I just released maphilight, a jQuery plugin that turns image maps into wonderful graphical masterpieces.
Image maps aren’t so popular any more, for some strange reason. So a quick definition: an imagemap is an <img> with the usemap attribute, pointing to a <map> that describes polygons that link places within that image.
This sprung from me wanting to display pretty highlighting of countries on a map, but not wanting to mess with flash for it. It involves enough annoying fiddling with <canvas> (and VML, because IE is in the stone age) that I feel I’m saving other people a decent amount of work by releasing it.
Simple demo
Pretty demo using a world map
Documentation
Download (requires
jQuery)
(Tools like “ HTML-Image map Creator WYSIWYG” might be handy if you want to make image maps yourself.)
Comments (58)
Discover your plugin and I liked a lot, on this website I could make a small development with drupal and Maphiligh.
If you want to see it working this is the link:
http://www.economiasolidaria.org/mapas/
Thank you for your work.
Greetings
http://www.investic.net/blog/karlos/
hi david,
great plugin. and smart done. i wondered some time how you get borders around non rectangles. then i peeked into the plugin and saw you did it with canvas. very nice!
but maybe you can help me with a question?
i need an option to have one area active by default. like your alwaysOn option, but not for the whole map, but one area. would this be possible??
i’m like 90% done and now i can’t find a way to do this :-(
best regards,
marc
Hi Marc,
You can see that sort-of working if you look at the in-development code.
It’s updated so that, if you’re using jQuery’s Metadata plugin then you can give individual areas the alwaysOn option. Take a look at demo_simple.html for an example.
It works perfectly in Firefox and Safari, but the alwaysOn shapes don’t appear at all in IE currently. It’s a layering thing, I think — the alwaysOn ones are being rendered behind everything else.
It’s sort of awkward for me to debug on IE at the moment, so this is likely to advance in fits and starts. If you decided to take a look at it yourself and made any progress, I’d be happy to accept patches.
Hi David,
Love what you’ve put together here–well done.
I was wondering if you planned to add any functionality that would highlight all shapes that share a title (i.e.: all of Hawaii instead of just one island at a time). I can see how it could be done, but don’t have the programming chops to do it.
Thanks!
I love the alwaysOn feature. I hope you can debug it for IE since 90% of the browsers in use are IE.
David,
I’ve been debugging the maphilight.js code and it looks like $.fn.maphilight is not being called in IE. I put an alert statement as the first line of the $.fn.maphilight function and it gets called in firefox, but not in IE.. Could this be the problem?
Great app!
sorry, the function does get called but for some reason the alert is handled right.. I hope that this somehow gives you an idea of where the error could be coming from..
Thanks!
Hi David,
First of all, thanks for this great piece of code.
I’m using your feature to implement a postalcode map of The Netherlands. The highlighting works smoothly. I also added overlib with a mouseover event to communicate the postalcode region including two or tree major cities inside the postal region. I’m trying to make the map work together with Xajax. Based on an onclick event i’m calling a Xajax function to save the clicked postalcode region in the database. What i would like to do after the xajax call is highlight the clicked region as AlwaysOn (using class=”{stroke:false, fillColor:’EAEAEA’, fillOpacity:0.2, alwaysOn:true}” on the area element).
I assign this class element using something like $objResponse->assign(‘area_id’, ‘class’, “{stroke:false, fillColor:’EAEAEA’, fillOpacity:0.2, alwaysOn:true}”);
The thing is it will not highlight with always on.
I tried to call $objResponse->script(“$(‘.map’).maphilight({fade: false})”); after the class assignment but it will not show. Is there a(nother) way to dynamically show the always on highlight?
Thanks Tim.
Tim,
This wasn’t possible until about 5 minutes ago. I just changed how it works — it used to refuse to touch an image a second time, now it cleans up all the cruft it put around it and regenerates with the new options.
All you have to do is call `$(‘#your_image_id’).maphilight(options)` again, and it’ll regenerate everything, including any changes you’ve made to the individual area tags.
Take a look at http://github.com/kemayo/maphilight/tree/master to see this in action — it’s currently not in an officially released version.
Let me know if this works for you — if it does, it’s time for another release, and if it doesn’t, I’ll play with it a bit more to get things working right.
Hi David, Thanks for your fast reply. This really helps me getting a step further. Now i kan dynamically reload the map by using the new call method. For example: $(‘#image_id’).maphilight({fade : false}).
Using this method it’s possible to call this from Xajax an reinit the map. Thats great. Now comes the ‘but’. The problem seem to occur with the metadata and always on feature. After selecting an area and execute a xajax command on the onclick event + reloading the map with the new feature it does not see the always on setting on line 165 (new version on github) if you put an alert between the lines 165 and 166: if(area_options.alwaysOn) { alert(‘alwayson’);
if(!canvas_always) {
it doesn’t see a class=”{metadata-options}” just set with xajax.
it only sees hardcoded metadatasettings. On page load i also assign the metadata class so at that point everything is fine. It seems a context problem. I’ll try to figure out if this could be fixed.
I also experience a ‘glitch’ if you put the image map inside a div which had a style display:none;. The metadata / always on area’s will not display. I played a little with visibility instead of display:none/block. If you use visibility instead of display the areas will be filled but visibility had it’s limitations.
Some progress…
It seems Xajax cannot assign a class attribute to a area-element. Metadata can be pulled out of a class=”{options}”, data=”{options}” of a tag inside te element. The last option will not work because we cannot close an area tag. So script cannot be surrounded by this tag. This leaves us with class and data. Also data cannot be used. I think due top the fact it’s not DOM on the area element. I tried to use the ‘lang’ attribute for testing. This you can assign to the area element using Xajax and if you use this init:
$(function() {
$.metadata.setType(“attr”, “lang”);
$(‘.map’).maphilight({fade: false});
});
It will be picked up if you reload the page. So i can conclude metadata could be read out of the ‘lang’ attribute. (remember this is testing and maybe a workaround not a real solution).
I tell xajax to first assign the metadata to the lang attribute and after complete a second xajax call to reload the map with the new feature. But to bad still, although the metadata is now for sure present in the area element (inside the lang-attr.) is will nog mark it as AlwaysOn on the reloaded map….
Made a stupid mistake… you can infact assign a class to AREA with assign className. But it still not shows it as always on on mapreload.
Hi,
I have a small problem. My map contains area into area and I am needing fill only outer area. Heve you any ideas?
David, thanks for this great script; it works smoothly!
I made a few modifications so the user is able to select and de-select a shape. I believe this mod solves Tim’s problem as well.
The script, and a working example can be found on the following location: http://formidablo.nl/jquery/.
Grtz,
Nielsos
I forgot to mention that every shape should have an id-tag with a unique value.
I’ve added extra functionality:
Link shapes with the “linked” attribute. Every shape with the same linked value will be turned on and off simultaneous
Example: class=”{alwaysOn:true,linked:1}”
http://formidablo.nl/jquery/index.html
Hey there, cool script but is there any option (or can you tell me where to start implementing it) to highlight an area from outside? For example by pressing a button?
Great work on this plugin. Anyone else have problems with it working on IE7? Seems to have hilite at all on:
http://davidlynch.org/js/maphilight/docs/demo_simple.html
Works great in all other browsers I’ve tested. Could there be a small annoying IE idiosyncracy that prevents this from working?
Very nice plug-in. I’d very much like to add some text to the highlighted area. Is it possible to have an associated floating DIV (like a tooltip). I want to show captions based on the AREA’s title tag.
Great plugin. I’m trying to figure out how to toggle the highlight when a map area is clicked. I will figure it out eventually, but figured I’d check w/you b/c I figure there’s probably just one line of code necessary to do it that I haven’t figured out yet.
I’d love to add a caption based on the image map AREA title tag, but I can’t figure out how to show any text with canvas-generated maphilight.
If I try and print an image to which maphilight is associated, the image does not appear. Is there a way to disable Maphilight when I print, or some CSS that can be placed inside
@media print { .. }
Thanks for a brilliant plugin. As a newbie to jquery, is there an easy way to trigger other stuff from inside your code. I’m hiding/showing text depending on an area of the image? Thanks again
alwaysOn does not seem to be working with IE. In the simple demo the squid does not have solid colouring.
Pinney, see http://formidablo.nl/jquery/index.html
for a example!
David,
Excellent plugin. I have created my image map all works fine in all browsers except ie 6/7. Is there a hack/fix for this?
Many thanks
Hello,
This is js script can be very usefull to me.
I would like to make a map for the website of the school where I work.
But I’d like that the name of the room appears when mouse is over the room.
What should I change in your script to do this ?
A better idea could be to change font size of the name of the room when mouse
is over (increase size when mouse is over).
The name of the room could be in the title or alt attribute of the “area” tag (or in a floating div)
Do you have any idea to do it easily ? (and well supported by most
of modern browsers and standard compliant).
Kind regards
This plugin is great, but I’ve been trying to get it to work with the jquery imagetool plugin, and haven’t had much luck, I thinking I’m getting mucked up with the canvas. http://code.google.com/p/jquery-imagetool/
Anyone else tried to combine these two and had much luck?
great script, thanks a lot for it, but doesn’t work in latest Opera 9.63 under win XP, when I open Simple demo I get:
CSS – http://davidlynch.org/js/maphilight/docs/demo_simple.html
HTML style attribute
Invalid value for property: width
Line 1:
width:undefinedpx;height:undefinedpx;
——————^
CSS – http://davidlynch.org/js/maphilight/docs/demo_simple.html
HTML style attribute
Invalid value for property: height
Line 1:
width:undefinedpx;height:undefinedpx;
————————————-^
what’s wrong?
thanks
Hi,
I notice there is a long list of support requests at jquery.com. Is this plugin still being maintained/developed?
Is it possible two highlight an area from another element, i.e. by hovering a link?
@alex
It’s quite simple, just let the element send it’s hover over tot the area you want to highlight.
This is what i did
$(‘ul.picture_tags li’).mouseover(function(){
$(‘area#’+ this.id.replace(‘hover_’, ”)).mouseover();
}).mouseout(function(){
$(‘area#’+ this.id.replace(‘hover_’, ”)).mouseout();
});
Anyone know if this is still maintained?
thank you for your quick response. i tried your code, but it seems not to work – the area is not highlighted. do you have an example page to look at?
Awesome work on this plugin…exactly what I needed and using some pretty cool techniques to get there. Saved me a bunch of time!
Just wanted to say “thanks a lot!” for saving me a bunch of time with your great plugin! Works like charm although fading is not going well with the ies up till now. I don’t care cause it’s much more I expected. :)
again: very nice work.
Once thing i don’t get, i read people saying it does not work in IE6,7 but i just test the example and it works great in IE6,7. The only issue is that in IE8 the highlight does not work, only the link. but if you put it in “compatibility view” which emulate IE7 basically.
But again: very nice work. save me a lot of time. Hopefully someone will find a fix for IE8.
Many thanks for this!! I have added this into one of my posts
I’d like to donate some money to help update this plugin for IE8. This is very useful to me. Can you contact me.
Cheers
Hello,
Good work. Any news with IE8.
Thank you
Is is possible to associate an image map area with a background image? In addition, i would like to be able to change the underlying background image depending on the values returned by a javascript method, when user clicks on a hotspot. Really urgent need, so would appreciate any help….thanks in advance.
Hi there. First off, your script is SWEET, RAD, AWESOME! I am however wondering if it’s possible to select default areas dynamically and to clear all selections dynamically. I’m using your tool for a realtor Website and I need to select areas by default for the user. Is there any way to do this? Thanks man!
Great plugin, thanks.
What about the IE8 Issue?
Hi – About making this work for IE.
Could it be the opacity that is not set as IE expects?
Look here: http://www.quirksmode.org/css/opacity.html
A very nice plugin indeed.
About the Opera bug mentioned by ‘One’: I got it to work by
explicitly giving the map-image a width and height attribute (note: NOT a style attribute like
style=’width:500px;height:500px’ but the old-fashioned way: width=’500px’ height=’500px’)
O, when will the day come…..
About highlighting from link (post 32 by Bert Goethals)
did anyone make this work?
I get an error on first line starting with: $(’ul.picture_tags li’)
Actually – found the error – I just needed to retype the single quotation marks.
BUT I still cannot make it work.
Has anyone a complete sample?
About the IE8 bug; seems like IE8 doesnt’ like this:
——-
addRule(“v\\:*” —– v\\:* must be a selector for IE
Davi, thank you for mention my Image Map Generator :)
******** YEAH !!!! ********
i found a fix for IE8 maphilight issue here: http://stackoverflow.com/revisions/1169252/list
i applied the fix and it worked. The one who posted that fix says that he is not sure if it does not break anything in IE6 and 7; but it did not on my side at all.
I’m still trying to figure out how to hilight a map area from a link, anybody?
I love this script!
Does anyone know how to toggle a country on and off in the code? Or perhaps highlighting a country by clicking on a link?
I didn’t want to use the other online maps because this script is really lightweight and fast.
Can multiple highlights be used, have California highlighted by default then also another highlight when mouse over?
Hi David,
Nice plugin (maphilight), exactly what I need but it seems not to work in IE8 anymore. I used a native IE8 and IETester. Both gave a javascript error “Invalid argument” and “Object does not support this property or method”.
Any ideas how to go about solving this?
Thanks anyway!
Harm
IE8 quick and dirty fix:
More solutions on the following pages:
http://jsxgraph.uni-bayreuth.de/wp/2009/03/20/jsxgraph-and-ie8/
and
http://ajaxian.com/archives/the-vml-changes-in-ie-8.
Great application! I only have one problem: I have an overlay which should be over all other content on the page, but the maphighlight image is the top element. I tried fiddling with the z-index, but that doesn’t work.
Hi David
Great app!! – but can you comment on this please..
Running your demo online works fine, but saving same page to HDD and running local shows no borders… Have checked all settings… no luck ;0(
Win XP / Firefox 3 / Dreamweaver CS3
Thanx, Deon
Would have been nicer to enable onkeypress /t for accessibillity when using the tab key to navigate. Good work though.
\t
I used it whith FF and works perfect but when i open it on IE8, doesnt work ¿any idea?
Trackbacks/Pingbacks (2)
[...] también está la posibilidad de usar google maps para tal caso, pero eso ya es otro tema. Con jQuery maphilight podemos hacer estos mapas más atractivos muy fácilmente, el [...]
[...] Step2 Download jQuery and the maphilight plugin from David Lynch – click here [...]