1

I'm trying to display a background image for a map area when a user hovers over it. Currently I've specified a separate id for each area and I have written a javascript function that triggers when the area is hovered over. To this function I pass the element id and by looking at the console I know that the function is being called with the correct element yet the background is not being displayed! Currently I've only implemented the functionality in the products tag.

I also tried giving the area a z-index of 9999 and fixed width/min-width and height/min-height.

Here is the website https://dl.dropbox.com/u/14863356/OsmosysV3/index.html

NOTE: Just an fyi to others who are facing this problem, Chrome or safari require that you have name attribute declared for map even though it is deprecated.

Abijeet Patro
  • 2,842
  • 4
  • 37
  • 64

2 Answers2

0

Why do you even need javascript? In CSS could you not do:

#welcome{
  height: 300px; // or whatever
  &:hover{
    background: url("welcome.jpg")
  }
}

Then same for the other elements.

veritas1
  • 8,740
  • 6
  • 27
  • 37
  • @verticas1 That's not working. I think you may have misunderstood my question. I'm talking about hovering over the area element of the image map. If you hover over products in the #slideshow and then hover over the product names, you'll find that there are tags for each of them. I want the area tags' background to change when I hover over them. Currently they have a transparent background. – Abijeet Patro Aug 14 '12 at 10:28
0

According to this Visible Area Tag image map areas are not visually represented and hence no css is reflected on them. If you want a hover over effect over your maps, then you can find a way to do so by following this link

It's probably not the neatest way to do it, but it works.

Community
  • 1
  • 1
Abijeet Patro
  • 2,842
  • 4
  • 37
  • 64