Banner background image as a link?


Thanks to the help of another Sitepoint member, I was able to get a lot of the text out of the background image in my banner and make it more search engine friendly. The only problem now is that I am trying to set the entire top banner as a clickable link that goes back to the home-page. I know background images are just that - and not clickable. I think I could do it with JavaScript but I am trying to not use JavaScript if possible to make the web site more accessible. I also don’t want to revert back to having the entire banner as an image. Can anyone help?


Alas , a lil planning would have gone a long way here. Still, here is a patch fix.

ad your anchor here : <h2><a href=“#”><span>* COME ENTER OUR WORLD *<span></a></h2>

#enterOurWorld h2 {position:static;}/* or make sure that this H2 does’t have relative OR absolute position*/
#enterOurWorld h2 a{ position:absolute; top:0; left:0; right:0; bottom:0; height:100%; width:100%; z-index:100 }
#enterOurWorld h2 a span span{size and position to match your original H2}
#enterOurWorld h2 +p {padding-top: (original padding-top+ the height of the original h2 including padding + margin}

Not totally elegant, but a relatively clean solution considering.

Hope that helps