Image Map Creator/Generator that allows for the easy addition Javascript onclick events?

Question

While I'm well aware of how image maps work, and how to code them, etc...I find it a waste of time to use the image map creator to generate the Image Map code, then use HTML Tidy to tidy it, and then manually add all of the image attribute adding onclick events, having them return false, and making sure that the href="#", especially for large image maps.

Does anyone know of an image map creator that supports adding Javascript events (such as onclick) directly as opposed to just adding href urls, and then having to manual edit the code later?

Answer 1

You're trying to solve this problem the wrong way. This problem has nothing to do with creating image maps, it has to do with manipulating HTML. There's nothing unique about the tags in an imagemap.

So you have a bunch of stuff you want to do to some HTML, which happens to be an imagemap. Why not use something designed specifically to manipulate HTML, eg jQuery, to solve your problem?

"adding onclick events, having them return false, and making sure that the href="#"...

$('area').attr('href','#');
$('area').attr('onclick','.. whatever you want ...');

Just because jQuery is a javascript tool doesn't mean you can't use it for one-time tasks. Right click in Chrome, inspect element, "Copy as HTML."

Now let me add that using jQuery to add onclick attributes makes little sense, generally, since you should just be adding event handlers. But you could do this if you wanted to produce HTML that you will then copy/paste as hardcoded HTML. But I generally speaking, "onclick" should be avoided like the plague, especially with (as you say) imagemaps that have a lot of elements. It's just wasted bandwidth; since you're binding javascript handlers anyway you are obviously running javascript on your page already. Why not just use javascript to bind the handlers?