?
Solved

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

Posted on 2009-02-12
6
Medium Priority
?
2,357 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
0
Comment
Question by:pmsguy
6 Comments
 
LVL 4

Expert Comment

by:jasemhi
ID: 23627636
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
 

Author Comment

by:pmsguy
ID: 23627758
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
 
LVL 4

Accepted Solution

by:
jasemhi earned 1200 total points
ID: 23628114
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Expert Comment

by:jasemhi
ID: 23628131
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
 
LVL 30

Assisted Solution

by:Mark Steggles
Mark Steggles earned 400 total points
ID: 23628256
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
 
LVL 21

Assisted Solution

by:naspinski
naspinski earned 400 total points
ID: 23630455
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question