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=sig nupMobileQ uestion'/>
</map>
However, it is a CSS generated background-image.
The CSS for this is
#header {
background-image:url(image s/header_b g.jpg);
background-position:278px 0;
background-repeat:no-repea t;
height:127px;
position:relative;
width:960px;
}
image.png
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=sig
</map>
However, it is a CSS generated background-image.
The CSS for this is
#header {
background-image:url(image
background-position:278px 0;
background-repeat:no-repea
height:127px;
position:relative;
width:960px;
}
image.png
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.
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?
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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>
<div id="link_to_login"><a href="#.html"><img src="transparent.gif" width="200" height="25" /></a></div>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.