Link to home
Start Free TrialLog in
Avatar of pmsguy
pmsguy

asked on

Create an image map/hyperlink over a CSS background-image

I need to create a hyperlink on a CSS background-image.  
The issue is that the image is a background-image constructed via CSS.

see http://dev.getskoop.com/

I need the area "Not A Member, Join Now" be a hyperlink <a href="somelink.com">

So if this was an <img> tag I can basically do the following:
<map id='map_join_now' name='map_join_now'>
  <area shape='rect' title='Join Now' coords='245,215,470,269' href='/index.php?_node=signupMobileQuestion'/>
</map>

However, it is a CSS generated background-image.

The CSS for this is
#header {
background-image:url(images/header_bg.jpg);
background-position:278px 0;
background-repeat:no-repeat;
height:127px;
position:relative;
width:960px;
}
image.png
Avatar of jasemhi
jasemhi
Flag of United States of America image

To my knowledge, you cannot do that since it is a background image that doesn't allow interaction. Try adding a transparent gif in the html that lies over the Not a Member, Join Now portion of your background and making that your link.
Avatar of pmsguy
pmsguy

ASKER

Can someone reply with the actual code that will accomplish this?

What about an <a href> at certain CSS coordinates?

How do I change this from a background-image to an <img> tag and have the same visual results as the attached image?
ASKER CERTIFIED SOLUTION
Avatar of jasemhi
jasemhi
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Oops, your a href will be on the image:

<div id="link_to_login"><a href="#.html"><img src="transparent.gif" width="200" height="25" /></a></div>
SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial