Solved

Getting hover over to work with image map

Posted on 2007-11-23
4
10,490 Views
Last Modified: 2013-11-19
I have an image map that I am using and would like to allow for a mouseover effect to happen over each link.  Is there a way to make that work using css?  My code is below:



<map name="navbar">
<area shape="poly" coords="246,28,336,28,321,59,231,59" href="#" class="services">
<area shape="poly" coords="338,28,454,28,437,59,323,59" href="#" class="services">
<area shape="poly" coords="455,28,571,28,554,59,439,59" href="#" class="services">
<area shape="poly" coords="572,28,688,28,672,59,556,59" href="#" class="services">
<area shape="poly" coords="691,28,802,28,787,59,674,59" href="#" class="services">
</map>
 
 
 
 
<!--css-->
 
area .services a:hover {
	background				: url(/dev/images/services_hover.png) no-repeat;
}

Open in new window

0
Comment
Question by:pingeyeg
  • 2
  • 2
4 Comments
 
LVL 6

Accepted Solution

by:
TheKyle earned 500 total points
ID: 20344062
If you're ok with dropping the html image map and trying something else, then you could use a "CSS image map".  There's a really good article explaining them here...
http://www.alistapart.com/articles/imagemap/

Basically it involves using the image as a background image of a div and then absolutely positioning all of the anchor tags you need whereever you need them.  Then you can use the a:hover to give the link a background image on hover.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 20344147
That works for the hover over effect, but not on all resolutions.  Where it is positioned depends on your resolution.  Is there a way to fix that?
0
 
LVL 6

Expert Comment

by:TheKyle
ID: 20344168
It only depends on the resolution/window size if you are positioning the anchor tags relative to the body.  If you make the parent element position: relative, then everything inside of that element will be positioned relative to that.

For example in the following code, the anchor tag will always be 0 pixels from the top and 200 pixels from the left of the navigation UL no matter how big the window is or where the navigation UL is positioned...
...
<ul id="Navigation">
    <li><a href="" title="" class="Item1">Item 1</a></li>
    <li><a href="" title="" class="Item2">Item 2</a></li>
    <li><a href="" title="" class="Item3">Item 3</a></li>
</ul>
...
 
 
 
<!--css-->
#Navigation
{
    position: relative;
    background: url(navimage.jpg);
    height: 50px; width: 600px;
}
#Item1
{
    position: absolute;
    top: 0; left: 200px;
    height: 50px; width: 100px;
}
...

Open in new window

0
 
LVL 1

Author Comment

by:pingeyeg
ID: 20344180
You guys rock!!  Thanks
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript/CSS: Detect if hue-rotate supported by browser 1 34
Zoom the page when you go in from your phone 3 53
move widget title down 4 18
Html5 Index on a table 7 24
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

816 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now