Styling area tags

css imagemap area
sisko picture sisko · Jun 20, 2011 · Viewed 9.8k times · Source

I have a pair of image-maps on which I want their areas to high-light when the mouse hovers over them.

I am using jquery to detect the mouseover and assigning a css class. The assignment works and I can confirm the new class name. But, the area does not high-light.

My best guess is perhaps area is not a recognised HTML tag. Can anyone suggest how I could get this to work?

Thanks

Answer

Arturo Molina picture Arturo Molina · Sep 29, 2011

It seems like the html area tag is not a visual element that you can style. But, this other question: Visible Area tag? points to a very useful jQuery plugin you could use: http://davidlynch.org/js/maphilight/docs/

Related questions

Responsive image map

I have an existing image map in a responsive html layout. Images scale according to browser size, but the image coordinates are obviously fixed pixel sizes. What options do I have to resize the image map coordinates?

Read More
Adding hover effects for links in image map (area)

I'm only a beginner in html and I would like to put hover effects for my image map. I have searched for lots of solutions but I only come up with solutions using script which I don't understand. How does …

Read More
How do I give a border around the <area coords>?

I want a border around the active link part of the image that is defined by the coordinates. I currently have implemented to the extent that when the user clicks, the outline is visible by using: outline-color, thanks to href. …

Read More