We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

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

pmsguy
pmsguy asked
on
Medium Priority
2,377 Views
Last Modified: 2012-08-14
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
Comment
Watch Question

Commented:
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.

Author

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?
Commented:
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.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Commented:
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>
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
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
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
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.