Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Image / Javascript / Map

Styling An Image Map

Post a Comment
Can and be styled ? If not, what's the simplest (and most modern) way to style different zones of a single image ? The nice thing about and <

Solution 1:

If you work with image maps, I'd advice you to look at ImageMapster JQuery plugin, it can realy help with many image-map manipulation tasks.

It can setup opacity and background color for selected and hover zones, as you want, and ever join different zones in one area, making them working together.

I haven't tried Mapper you named, because of it's non-commerce licence, what doesn't satisfy my developer needs. But I have tried ImageMapster myself and like how it works - it's powerfull tool under MIT licence, forked from older plugin MapHighlite.

And about lightweight... I doubt it's very important issue because javascript code works in browser, and don't slow down your server. And in case of DOM/styles manipulations works realy fast.

Solution 2:

You could make the image a background image and place invisible <a>s over top with display:block;position:absolute; etc. and then when you mouse over them, you could make them semi-transparent colors or add borders or something... that would probably look nice, and be relatively simple :)

edit:example

Post a Comment for "Styling An Image Map"