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

Getting hover over to work with image map

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
pingeyeg
Asked:
pingeyeg
  • 2
  • 2
1 Solution
 
TheKyleCommented:
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
 
pingeyegAuthor Commented:
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
 
TheKyleCommented:
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
 
pingeyegAuthor Commented:
You guys rock!!  Thanks
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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