Previous Message
Next Message

Making a background image a link?

Sent by Paul Novitski on 28 June 2004 06:06


At 01:25 PM 6/21/2004, Terry Riegel wrote:
>Is is possible to make a bg image clickable.


Terry,

Everyone is telling you this isn't possible, perhaps because of their 
attention to precise semantics.  No, you can't literally make a background 
image clickable, since a background image isn't an entity that can possess 
a behavioral property the way CSS is organized.  But you can certainly 
apply a background image to a link, and without needing any transparent 
image overlays:

         #logolink
         {
                 display: block;
                 height: 100px;
                 width: 200px;
                 background-image: url(logo.jpg);
         }
         ...
         <a id="logolink" href="http://whatever"></a>

The anchor tag is naturally inline so you need to make it a block in order 
to hold a shape without inner content.  The height & width are those of the 
image.

To make this work in a non-CSS user agent as well, you might want to add 
something like this:

         #bglink span
         {
                 display: none;
         }
         ...
         <a id="bglink" href="#">
                 <span>Click my logo</span>
         </a>

If CSS isn't enabled, the text link replace the image link.

Cheers,
Paul 


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: