• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2362
  • Last Modified:

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
0
pmsguy
Asked:
pmsguy
3 Solutions
 
jasemhiCommented:
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.
0
 
pmsguyAuthor Commented:
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?
0
 
jasemhiCommented:
pmsguy,

Try this:

CSS:
#link_to_login {
      height: 25px;
      width: 200px;
      position: absolute;
      top: 61px;
      right: 371px;
}

HTML (can go anywhere before </body>):
<div id="link_to_login"><img src="transparent.gif" width="200" height="25" /></div>

Let me know if you need a bit more help on this.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
jasemhiCommented:
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>
0
 
Mark StegglesWeb DeveloperCommented:
Hello,

jasemhi is on the right track but you dont need the transparent image or the div:

#link_to_login {
display:block
      height: 25px;
      width: 200px;
      position: absolute;
      top: 61px;
      right: 371px;
}

<a href="" id="link_to_login"></a>

Thanks
Steggs
0
 
naspinskiCommented:
I have a downloadable example with a full explanation of this here:
http://naspinski.net/post/CSS-image-map-with-rollovers--map-of-the-United-States.aspx
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now