Question

So, I need two small parts of my header to be clickable. The problem is that I can’t use map tag because my image is set in css as a background of a div. And I’m not allowed to change that (to use img src instead). How can I do that, without using absolute positioning of two divs behind the image.

css:

#bg_top { /*the design for the header*/
    background:url(../images/header_bg_new.png) center top  no-repeat;
    min-height: 100%; /*stick footer to bottom of the page*/
    text-align:left;
    width:100%;

Answer 1

Their is a trick for solving this problem…

In the div#bg_top add a transparent gif image which should be of dimension 1×1 and then assign its width and height in img tag…

<div id="bg_top"><img src="spacer.gif" width="100%" height="100%" /></div>

and then add map tag in it…
This is a simple trick you can use…

You can apply img tag via jquery also,

$("#bg_top").html("<img src='spacer.gif' width='100%' height='100%' />");

Download image from this link:- Spacer.gif