Here’s the scenario: You have a background image in your layout… like a header logo, and you want to apply a link to that logo – back to the home page, for example.
In old HTML days we would have had an image file in place (not a CSS background) and apply an image map. Now you might suggest adding a transparent spacer.gif image to apply a link to… or some other fancy schmancy thing… but you can do the whole thing with CSS!!
A co-worker pointed me to this website: http://www.position-relative.com/tutorials/tute1_css_bg_image.php and I want to give them the credit they deserve… but also put the code here so I can quickly reference it.
Here’s what you do:
On the div box which has the background image (for instance box1), make sure the CSS specs have it assigned “position: relative;”.
That is most important to make this work…
Then, create a transparent box in the CSS to create the link:
#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }
**make sure to remove the border if you want it hidden
and here is the HTML to create the box link:
<div class=”box1″>
<a id=”box-link” href=”#”></a>
<p>The background of this box is an image.</p>
</div>
and there you have it! tried this out today and it works on all browsers IE7 and newer.
Thanks again to www.position-relative.com for the lesson.
Tags: css, HTML, Image Maps
Leave a Reply