Using JQuery hover with HTML image map

+8 A:

You should check out this plugin:

http://plugins.jquery.com/project/maphilight

and the demo:

http://davidlynch.org/js/maphilight/docs/demo_usa.html

if anything, you might be able to borrow some code from it to fix yours.

mkoryak 2009-04-13 20:07:26

Thanks for this. It just leverages the map's coordinates with a flat overlay. The rollovers I've got in the final banner use gradient transparency that aren't flat, but this is a nice fallback if I can't get that to work.

boomturn 2009-04-14 11:51:52

This doesn't work in IE8

digiguru 2009-08-17 10:40:40

It works both in my IE8 and on the external IE8 hosted here http://www.spoon.net/Browsers/ @digiguru: What do you mean by "doesn't work"? Can you provide specifics.

John K 2010-07-24 18:23:04

This plugin is poorly documented, why does it have to be that any search for "jquery image map" returns this plugin, I hate when people assume a plugin is the answer to everything when it may be rather simple to do what is needed without the plugin (which usually uncessarily restricts what you can do, as if its not part of its API its more of a pain to use the plugin than code it yourself)

Rick 2010-07-25 07:35:05

people probably assume that whatever is #1 on google, it is the best solution to the problem.

mkoryak 2010-07-26 15:27:37

+1 A:

I found this wonderful mapping script (mapper.js) that I have used in the past. What's different about it is you can hover over the map or a link on your page to make the map area highlight. Sadly it's written in javascript and requires a lot of in-line coding in the HTML - I would love to see this script ported over to jQuery :P

Also, check out all the demos! I think this example could almost be made into a simple online game (without using flash) - make sure you click on the different camera angles.

fudgey 2009-07-29 15:18:08

A:

This tutorial might help:

Rollover effects using jQuery Maphilight plugin

gomezuk 2009-10-03 18:57:43

+1 A:

Although jQuery Maphilight plugin does the job, it relies on the outdated verbose imagemap in your html. I would prefer to keep the mapcoordinates external. This could be as JS with the jquery imagemap plugin but it lacks hover states. A nice solution is googles geomap visualisation in flash and JS. But the opensource future for this kind of vectordata however is svg, considering svg support accross all modern browsers, and googles svgweb for a flash convert for IE, why not a jquery plugin to add links and hoverstates to a svg map, like the JS demo here? That way you also avoid the complex step of transforming a vectormap to a imagemap coordinates.

newnomad 2009-12-15 22:46:06

+5 A:

I happened across this thread while trying to implement a particularly tricky image map recently. As a result I checked the Maplight plugin but found it unsatisfactory to my particular requirements.

As the HTML Image Map I was working on only had 9 distinct hot-spots I was able to opt for an HTML/Image/CSS/JQuery solution that I feel is elegant, flexible, robust and pretty accessible.

I wrote about it here: Revisiting HTML Image Map

Ian ChoiceCuts 2010-01-15 11:16:21

Thank you for this, I agree that the plugin is not that great and its unfortunate that it dominates any posting, it seems, about jquery image maps

Rick 2010-07-25 07:36:20

A:

Hi, I was wondering if there was an automatic way to create an image map from a simple png or svg image ?

2010-08-16 13:57:29

Please open a new question to ask this. Thanks!

Michael Myers 2010-08-24 15:06:23

ansaurus

tags:

views:

answers:

Using JQuery hover with HTML image map

related questions