UPDATE 2011-05-04: Version 1.3 released. Works in IE9. (There’s a pattern here.)
UPDATE 2010-05-22: Version 1.2 released. Works in IE8.
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.)
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.o…
Thank you for your work.
Greetings
http://www.investic.net/blog/k…
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/maphi… 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/in…
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/maphi…
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/in…
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/jquer…
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/maphi…
HTML style attribute
Invalid value for property: width
Line 1:
width:undefinedpx;height:undefinedpx;
——————^
CSS – http://davidlynch.org/js/maphi…
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/…
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/revis…
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.d…
and
http://ajaxian.com/archives/th….
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
Great plugin.
Zallen has made a patch available at http://plugins.jquery.com/node…
Though it is only a beta version it solved the IE8 problem for me without breaking it for other browsers I tested. I suggest you check it out and give him some feed back.
A big thank you to you David. Even though you don’t seem to maintain maphilight any more, you certainly did a good job.
A very special thank also to Nielsos for the support and extra functionality above. Your code at http://formidablo.nl/jquery does not seem to have been updated to IE8 so unfortunately I could not use it. If you have the time I think you could make many people happy if you merge Zallens work with one or more of your own excellent additions. Especially the “linked” attribute is great – so e.g. Alaska is highlighted together whith the rest of the USA. If you do, then I suggest you put the code at jQuery for an official version 2.
I’ve analyzed Zallen’s code and added the IE8 fix in my version, see http://formidablo.nl/jquery/in…. It should work fine without forcing IE8 running in compatibility mode.
The code is currently a mess and some of the methods are inefficient. The rendering speed of Firefox is really fast only IE spend ages to draw a shape on the canvas. When I’ve some hours to burn I’ll try to speed up rendering in IE and probably rewrite the whole code.
See a working example of my previous version on http://living.tv/index.php > Select a new area.
Thanks for your work! I’ve done all the maps on http://www.golfcard.de/home.ph…
with a combination of:
* The “linked” functionality http://formidablo.nl/jquery/
* The IE8 bug http://stackoverflow.com/quest…
I had to use old versions of maphighlight and jquery to get the linked functionality running. Any idea how to fix that?
Thanks again,
Florian
I used it whith FF and works perfect but when i open it on IE8, doesnt work ¿any idea?
thanks man! wonderful!
Hi David)
Thanks for sharing. Map highlight is exactly what I need.
But its not working on localhost/hdd indeed. Only from remote server.
And also it fails with jquery 1.4 and higher 🙁
p.s. Post comment icons should have some title or tooltip -__-
It is recognizable only becouse there are 4 of them and everyone has username & mail 🙂
Great plugin, really what I needed! Quality.
How would it be possible to fade in and fade out all areas at page load? This way the user knows that you can click and highlight.
Hello David,
first of all, please excuse my poor english.
I am using your plugin in one of our projects and i’m having issues with the ie6.
The page does not load and I’m getting the message “The Page http://www.mypage.com could not be loaded”…
Have you encountered this issue at some point?
I allready have checked every thing else and only the maphilight.js file is making troubles when embedded
I would enjoy any hint. Thank you.
Gretings,
Olivier
Awesome plugin. Thanks alot.
It doesn’t work with IE8?
This plugin is quite handy!
There is some strange behavior when I set strokeOpacitiy and strokeWidth to 1. In IE8 it is actually interpreted correctly as a thin, 1px wide line with full opacity. However, in FF and in Chrome it’s not. I get a 3px wide semi-opacity stoke.
I tested it with switching off clear type in IE8 but it stays the same.
Am I possibly doing something wrong?
FLow
Dear David,
do you have details to integrate your plugin into WP 3.0?
Thanks.
PLBon
WordPress3.0integration
Dear David,
do you have details to integrate your plugin into WP 3.0?
Thanks.
PLBon
Notice that maphilight becomes extremely taxing on local resources when multiple country selection occurs – is there a way to have the map select countries by area, rather than highlighting the boundary perimeter (would this help anyway with clientside load for large selections?)
Thanks for this script. It works quite well but it seems to consume a lot of CPU time when using maps with many areas (I have around 10000 areas). Would there be a way to fix that ?
I am having some issues with the group by. It does not seem to work at all in Chrome 5.0.375.127, Safari 5.0.1 (7533.17.8), and Firefox 3.6.6. It does work in Opera 10.60 Build 3445 and IE 8.0.7600.16385. However once I enter a sub-area of the group, exit the area, then re-enter the same sub-area, the group highlighting no longer works. I am using jquery 1.3.2. Has anyone else had similar issues or know of any fixes? Thanks.
Ian and others wanting to print. The issue with maphighlight print is that “print” runs on the html as modified by maphighlight. That modified html has two copies of the image that is being maphighlighted. The first image is visible as a background image in an inserted div and the second is transparent and overlaid. The css below makes the image visible for printing
@media print{ img { opacity:1 !important; filter:alpha(opacity=100) !important; -ms-filter: alpha(opacity=100) !important; -ms-opacity:1 !important; } }
GREAT plugin! Works like a charm!
One question: how would I have a clicked area stay highlighted till the next area is clicked?
Great plugin! I have just started using it, but I had to reverse order of painting regions. Of course, this problem can be seen only when the regions overlaps.
I finally figured out what I was doing wrong and it works. Yeah! Except on the page, I resize the image to 400 pixels wide. Now the picture window is 400 wide, but the image is full-sized again, meaning it’s only showing the top left corner of the actual picture. How do I get it to keep the image reduced? Thanks!!
im still confusing to make path on the map.. please give me step-by-step
Hi David,
I’m trying to dynamically resize the IMG element that uses the class=”map” attribute but can’t do it. What would be the best way of implementing image resizing of the picture or zooming in/out with your js lib? Thanks.
Hi David. I am using your plugin but after adding about 20 map areas it is REALLY SLOW !!!! Am I doing something wrong ??? Here is my page….Please help ! :
http://www.linuxsystems.com.au…
dear sir as i have done image slicing and mapping ant then mouse over using photoshopsee at
http://www.mahanagartimes.net
thanks for the plugin..
but i need some help..
i want to keep the clicked (selected) area highlighted even when the mouse is out ..till i click on the other area..
First thing first. I love your library! Just none thing, I can’t seem to get the fillColor or strokeColor to work on a single area.
If I use [area shape=”rect” coords=”826,314,905,345″ href=”#Leil10″ id=”myID” rel=”popup” alt=”” class=”{alwaysOn:true}”] it works, and this item is always on, but if I use
[area shape=”rect” coords=”826,314,905,345″ href=”#Leil10″ id=”Leil10″ rel=”popup” alt=”” class=”{alwaysOn:true, fillColor:#ff0000}”] nothing happens. It seems to break the script somehow.
Any Ideas?
Cheers
Vidar
@Vidar:
You’re doing class=”{alwaysOn:true, fillColor:#ff0000}”
It should be class=”{alwaysOn:true,fillColor:’ff0000′}”
Hey David Love I love this script!! I have been looking for something like this for a while! Question tho…how easy is it to implement in on a cms page? Any help would be greatly appreciated! Thanks!
Thanks David!
Now it works like a charm, it also works through Javascript now. You’re the best. 🙂
Have a splendid day.
Cheers
Vidar
Dear David, I was wondering if its possible to style the link when an area is clicked. Right now, when you click the link, the area is selected, but the link remains unchanged.
Hope you understand..
ps. I’ve been looking for something like this for ages and your script is a life saver!
Wow…performance is much better with new version 1.3 using alwayson. My map is now almost at an acceptable speed but not quite !!!
Hi David, would it be possible to create the reverse effect of the default highlight overlay with this plugin? I mean: instead of a map area getting a fill with certain opacity and color on mouse hover, I would like all areas to have that fill by default remove it on hover, making the hovered area more clear than its surrounding areas…
Thanks 🙂
I would need this also
Maphilight doesn’t work right in the latest development releases of Chrome. (Chrome 14). Basically, the hover effect, be it background color, outline, etc., is not removed when the mouse leaves the target area. I’ve been trying to debug, but I’m afraid I haven’t gotten anywhere. I get the same issue when trying your demos, so I know it’s not a problem with my code.
If I figure out what’s wrong, I’ll let you know, but any help would be appreciated!
Thanks!
@Joe: I don’t see that happening on “14.0.825.0 (Official Build 92801) dev” on OSX. Are you on the exact same version?
Yes, except on Windows. (14.0.825.0 dev-m)
I’ve been debugging, however, and apparently canvas.clearRect() isn’t working at all for me.
When I comment out the lines referencing clearRect() and add canvas.width = canvas.width, the code works fine. (Nice to know there’s a workaround!)
I’m realizing that it’s clearly not a bug in your code. When I visit http://jsperf.com/canvasclear and run the tests for Chrome 14.0.825.0 on Windows Server 2008, clearRect() hangs on ‘pending…’ forever.
It appears that Chrome has introduced a bug into the Windows branch of 14.0.825.0.
Then again, my build of Chrome is passing all tests on this page:
http://philip.html5.org/tests/…
I don’t know what to make of it, but for now, modding the script with canvas.width = canvas.width works for me.
Chrome updated to 14.0.825.2, and your code works again as-is. That’ll teach me to stress out about issues in alpha builds. 🙂
Does this work with circular areas within the map? I have a requirement where there are circular areas that need to be highlighted.
Once and image has turned into a highlighting map, is it possible to get an area to highlight and fade to correct opacity from jquery code? ie even if the mouse is not over the area.
I have a table of items that correspond as a key to the image items. I want to hover over a table row and the corresponding area should light up.
I am trying to pull a color in for the fill color dynmaically…
$(function() {
$(‘.map’).maphilight({fillColor: ‘${site.palette[‘primaryColor’]}’});
});
The problem is that the ‘primaryColor’ value returns a value with the # infront of the hex color value… so #999999 instead of 999999.
Is there any way to make this work so either the script can allow the value ‘#999999’ instead of ‘999999’ or is there a way to strip the # from the value that is pulled?
This script rocks! thank you very much.
-Matt
IE 9+10 compatibility added:
http://formidablo.nl/jquery/in….
I find you mapper exactly what i need for my purposes. I have one question. How do i change each area property individually via javascript.
Hi. I wanted to know that if i want to highlight or select muutiple areas in an image map simultaneously how will i achieve this
Hi,
I am using alwaysOn in order to put a permanent background colour in the image map segments, however I really want another hover over on it.
The reason for this, is I have a map which is acting like a heat map based on figures from a database, so they go green if good and red if bad by default, I then want a rollover effect on them so that you click on them and another map opens which is a zoomed in area of the first.
I have set alwaysOn to do this and used a tooltip hover over in order to put tooltips on them, however is it possible to also change the colour (again) of the segments?
“…so that you click on them another map opens which is a zoomed in area of the first.”
How are you doing this?
Hi David,
Could you help me with the map highlighting inside the dialog. I have a map that highlights just fine as stand alone page but when I try to load it inside the jquery dialog it doesn’t work. I placed the call function for map highlight inside the dialog open command, and I have the .js on the parent page. What am I missing?
$dialog
.load($link.attr(‘name’) + ‘ #contents’)
.dialog({
title: $link.attr(‘title’),
width: eval(hsize),
height: $link.attr(‘vsize’),
modal: true,
buttons: buttons,
open: $(function() {$(‘.map’).maphilight();})
});
It should be:
open: function(){ $(‘.map’).maphilight(); }
i.e. it doesn’t need to be wrapped in the jquery function.
hi, for some reason the hyperlink with the id to trigger the map highlight doesn’t work – can you spot my error?
Area 11 Including:
Love the script!
How would I go about toggling the ‘alwaysOn’ feature on multiple areas?
Eg. I have 4 areas, when you click on one it remains higlighted. If I click on another one the new one stays highlighted and the first one unhighlights.
Cheers!
Hi – great plugin by the way – i’m currently wanting to highlight area maps in sharepoint 2010 – i can get it working in ie8 and firefox but unfortunately my company standard is ie7 and it doesn’t seem to work in this – anyone know of any fixes – please email me at oliverwakefield1870@gmail.com it would be much appreciated.
Dear Deavid, thanks you very much for the wonderful plugin, it was a life saver, recently i have used your plugin in to one of my projects, one of my client need to do a interactive directory map for their mall, you can see the demo version from below link.
http://www.pad10.com/testsitie…,
as you can see when you hover over you can see the map getting hilight and if you click it you can see the information display on right side, when you click the list below is doing the same thing but there is a small issue, when you click the list and you select an area and if you click the 2nd link the 2nd area is getting hilight without clearing the previous one, what i need is either some one click the blocks from the map or the list below it will hilight the area on the map and when they click the 2nd block in the map or in the list it should hilight the area by clearing the previous hilight area.
i have submit this issue i’m facing several forums but none of them able to help me, finally i thought the best one to ask ins the creator of the plugin, please if you have time to consider my matter please provide me a solution for this issue, i’ll be glad if you help me with this.
Nice work man you deserve alot of thanks and money hhhhhh
Hi,
I just wanted to tell you how awesome your plugin is. Really. You, sir, made my day 🙂
Is there a way to make one area highlight multiple areas, yet allow those other areas to still operate independently? Here’s my example: http://www.michigan.gov/docume… On that map I have several small research stations mapped out. They work great, if you mouse over, they get highlighted. It would be nice, though, if in addition to the individual areas lighting up, one could mouse over the “DNR Fisheries Research Station” button in the legend just left of the map and have all of the individual research stations on the map light up at the same together, identifying them all at once, as it were. Does that make sense? Is there any way to make this happen?
Thanks!
Very cool, thanks for creating this and sharing it.
Hi, I’m using this to highlight areas of an ad. There are 2 radio buttons: green=like, red=dislike and you have to choose a color before highlighting. I’m unable to change the hover color after a color is selected; it always uses the default. I tried overwriting fillColor/strokeColor when a radio is clicked but that’s not working. Any suggestions? Thanks
is there any way to highlight (alwaysOn = true) certain areas based on values in an array:
This is what i’m referring to:
http://stackoverflow.com/quest…
Hi,
Has anyone found a way to make this responsive? Im trying to combine it with rwdImageMaps (https://raw.github.com/stowbal… to make the whole box responsive. Has anyone done this before?
Any idea will be apprisiated…
Found a partly good way (newer browsers).
Just add the background-size attribute and resize it to 100%. Should then always be fully sized.
I’ve not tested this done, just sharing an idea
You could do, approximately:
$(window).on(‘resize’, function() { $(‘.map’).maphilight(options); });
That’d clean up the existing map and redraw it. Since rwdImageMaps itself resizes off of a resize hook you’d probably want to include a short delay to make sure it doesn’t get confused. (Also, resize is a pretty spammy event, so applying some throttling would be for the best.)
Hi Richard, Have you had any further luck? I’m currently trying to do the same thing — combine maphilight with RWDImageMaps. They both work on their own, but neither work when combined.
Thank you very much for creating this cool plugin. My apologies; I need some help with it. I am working on a small project that ideally requires highlighting of image map sections. But when I install your excellent plug-in the image seems to resize to its original, rather than scale to its stated width and height. ie if the original is 1500×600 but the tag is listed as 500×200 it should scale to a third of its size. ‘Why not change the image to fit what is in the![]()
tag?’, I hear you say. There are reasons, and that may be a solution in the long run – but I was wondering why it was doing this, and not maintaining its original size, and whether there might be a simple way of alleviating the problem. It appears to be a cross-browser issue- certainly across Mac Safari and Mac Firefox.
Hi.
I found a bug:
The original image size is w:1000 and h:626.
The html code:
//Resize
If the the original image width and height is 550 and 344, than works fine.
But if they are different does not change the size of the image.
If i supplements the javascript code:
wrap = $(‘
‘).css({
display:’block’,
background:’url(“‘+this.src+'”)’,
‘background-size’:this.width+”px “+this.height+”px”, //<--NEW CODE
position:’relative’,
padding:0,
width:this.width,
height:this.height
});
Then works fine in FF, but IE 8 dosent works. Dont resized the image.
Do you have any idea?
Elegant and hugely useful. Thank you for this.
This is really nice. Is there anyway to associate 2 different polygons? i.e. if an island is part of a province?
I could just make the one big polygon and cover up the connecting lines but it feels a bit of an aritifical cheat
Can I use mapper so that when I hover over an area, the opacity of the background image is more???
I found a couple of questions regarding image-resizing, but no answer.
Could you check my example?
http://mxt.no/Vegkart/checklin…
If I uncomment line 25 (and start using maphilight) the image does not resize anymore.
How can I use maphilight while still fitting the image into the page?
Hi David,
Can you show me how to fill with a pattern vs. a color?
Thanks,
Tree
hello, how to add $(canvas).css(‘opacity’, 0).animate({opacity: 1}, “slow”); on every hover over area????
Hello David,
How to animate context.fill(); on mouseover and mouseout?? thanks
Hi,
Is there a way to highlight “multiple areas” on the map? When user hover over a region, based on class, areas with same class should also get highlighted.
Please do respond as soon as possible.
Thanks.
Hi,
Is it possible to use maphilight in bootstrap modal? I tried to add z-index but I can’t make it work. Any help is greatly appreciated!
Thanks,
Eli
Hi,
My client recently upgraded to SP2013 and is using IE10 as default. Do you know if there is a fix for IE 10? I can’t get the code to work on IE10. Any help will be greatly appreciated.