Highlight Image Map Area Hotspots With jQuery

By Sam Deering April 22, 2011

image-map-highlight

jQuery code snippet to highlight hotspot areas on an image which is being used as an image map with links references on different areas of the image.

Demos
Download

Code and Usage

highlight image map, image map show link areas, jquery highlight image map, jquery hotspot image map

Meet the author

Sam Deering

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Pingback: Highlight Image Map Area Hotspots With jQuery « « Big Engine Media Big Engine Media()
Pratik

I use your JQuery; works fine in IE but not in FF. can you please have look where i am doing mistake my code is as below (I am using ASP.Net 4.0 ImageMap Server Control, I uanble to send you map image however test any image using below code):

$(function () {
$(‘.mapHiLight’).maphilight({ stroke: false, fillColor: ‘009DDF’, fillOpacity: 1, alwaysOn: false });
});
- jquery4u
  
  @Pratik, code looks correct, can you check that your dom element has a class of ‘mapHiLight’, maybe even change it to ‘map-hilight’
Mark

Hi Sam,

I am trying to reuse your maphighlight code for an image map, and so far I have been partially successful. This works nicely with an initial map I have that is set as draggable using JQuery. All of my image hotspots highlight using the default rather nicely, which is fine for my purposes. It was only a matter of including your js code and a one-liner:

$(‘.current-level’).maphilight();

Where the image map is defined as follows:

…

As you can see, there are two images in use here. The first image is working fine, as it originally has the ‘current-level’ class. This code allows the user to zoom into image using a JQuery plug-in that sets current-level on the second image and recalculates all of the hotspots dynamically for the larger image size. The maphighlight aspect isn’t working for the zoomed in image and I was wondering if you had any ideas or pointers?

I’m not a JQuery or HTML5 expert so I’m sort of winging it and piecing things together.

Thanks!
- jquery4u
  
  @Mark, can you post a url so I can take a look at the code for you? Thanks, Sam
  - Mark
    
    Sam,
    
    I keep trying to reply with a link but it keeps saying that my comment is hidden for abuse reports. I haven’t done anything that should result in abuse reports… is something wrong?
Ceechad

thank u for the post, good stuff mate
- http://jquery4u.com/ jQuery4u
  
  Thanks Ceechad.
Neil

Is it
possible to style the default colour the of the hotspot? You have should how to
change the colour of the hover state but I am wondering if it is possible the
add a colour to the default state?

Cheers
Mark

Ok, test 1 2… trying to leave a comment…
Mark

Ok it won’t let me leave a comment with a URL in it. Is there a way to email you the link?
- http://jquery4u.com/ jQuery4u
  
  Hi Mark, yes it’s the disqus comment moderating when you post a link, I’ll have a look at your stuff and get back to you when I get the chance. Which files on
  OUTPUT_poster.zip should I be looking at?
  
  Sam
  - Mark
    
    Thanks Sam,
    The main file is poster.html with static HTML content. Then here is a breakdown of the other pertinent files:
    -poster.js: my file that controls everything
    -mapz js file: the JQuery plug-in that manages the drag/scroll/zoom effects for the image and related image map
    It has been a little while since I looked at it, but it appears that the class wrapping is affecting the mapz plug-in code as its selectors are based on one type of HTML element structure, and maphilight converts the structure. So as I experimented with it, the zoom capability would fail so I couldn’t even try getting highlights to work.
    Mark
    - Mark
      
      Hi Sam,
      
      I managed to figure out my issues and have everything working perfectly now. What was causing me trouble was that the wrapping div tags (including inherited classes from its child img tags) that maphilight uses were causing my img tags to not be in the same child groups. It was basically not easy to create a JQuery selector and JQuery APIs to traverse and locate my individual img tags. So I ended up doing a brute force iteration myself to get the elements I needed. I changed the logic to work with my new approach, and added a little line of code:
      if (!targetlvl.hasClass(“maphilighted”) {
      targetlvl.maphilight();
      }
      to get maphilight to create the div and canvas for my zoomed in image that has a dynamically calculated hotspot map that is the correct scale so all hotspots are correct in the zoomed image. Surprisingly, this worked well for the map highlight plug-in as well. I also had to hide the wrapping div tag of the current img tag and show the wrapping div tag of my target img tag to ensure my layered images display properly at each zoom level. The zoom levels were originally managed by CSS, using a higher z-index for the “current-level” class. This just didn’t work anymore once the div wrappers and maphilight canvas were in place.
      
      So the bottom line is that maphilight increased the complexity of my HTML file structure which required me to make some coding adjustments to get everything to work properly. The highlights look really sweet working on all zoom levels!
      
      Mark
      - http://jquery4u.com/ jQuery4u
        
        Thats awesome news Mark, glad you got it working! :)
Ehsan Mohsenpourian

hi
how it is possible to highlight an show hotspots before mousemove, in another words, i want to show all hotspots as highlighted in my imagemap with specific base style, then when mouse is moving over every hotspot – make it highlight with different colors or styles.
is it possible?
prabhukiran

will you tell me how to highlight the map area on page load itself???
Nw working fine in mouse over …..
- Mark
  
  The best bet is to ensure that all images are loaded before trying to call maphilight. The window.load hook allows whereby document.load does not.
  
  $(window).load(function() {
  //This must be called before hiding HTML elements. Hidden HTML
  
  //elements do not respond properly to JQuery script
  init_images();
  
  //Initialize image map highlight plug-in
  $(‘#myimage’).maphilight();
  });
Pradeep

by using maphilight() how could i keep selected Hot Spot Image Map Area On Click
- Mark
  
  Here is what I did to make this work. I know it’s 8 months old, but maybe it will help still?
  
  var data = $(thisspot).data(‘maphilight’) || {};
  
  if (toggleOn == true) {
  data.alwaysOn = true;
  data.strokeColor = “0000cc”;
  data.strokeWidth = 3;
  }
  
  if (toggleOn == false) {
  data.alwaysOn = false;
  data.strokeColor = “ff0000”;
  data.strokeWidth = 1;
  }
  
  $(thisspot).data(‘maphilight’, data).trigger(‘alwaysOn.maphilight’);
joptions

with using maplight(), my image size is not staying to the set size of 600px, but going to the default size of 2000px, how can i disable the image from being re sized?
Steve

Is there a way to add a hook such that my own JS function is called on mouseover and/or mouseout on the hotspots? I want to highlight something else when the hotspot is highlighted.
- Mark
  
  You should be able to use any old event handler to intercept the mouseover/mouseout events. Then within your event handler, you can use maphilight as usual to highlight any element you want. You can take a look at the code in my other reply to use the alwaysOn value to set a highlight on an element that the mouse is not hovering over.
  - Steve
    
    Thanks Mark, but I’m not sure I’ve made myself clear. I want the hotspots to highlight normally, but in addition to that want to do something else – highlight a row in a table as it happens. Is that how you interpreted it? I’m no javascript or jQuery guru, and it’s not clear to me how to intercept the events in as you describe. It’s also not clear which other reply you are referring to – do I need to be registered/logged in to see everything? I posted as a guest.
    - Mark
      
      Sorry about that. Here is the code copied again and modified a bit for your case.
      
      $(‘myhotspot’).mouseover.function() {
      var data = $(myotherspot).data(‘maphilight’) || {};
      
      data.alwaysOn = true;
      data.strokeColor = “0000cc”;
      data.strokeWidth = 3;
      
      $(myotherspot).data(‘maphilight’,
      data).trigger(‘alwaysOn.maphilight’);
      };
      
      To toggle it off make another mouseout event handler and use this to turn off the highlight instead. If you want to not change the highlight coloring, then only use the data.alwaysOn code for each.
      
      data.alwaysOn = false;
      data.strokeColor = “ff0000”;
      data.strokeWidth = 1;
      - Steve
        
        OK thanks, I think I’m beginning to get the idea. This code is assuming that the ‘otherspot’ highlight is also a map hotspot, correct? In my case the ‘other’ thing I want to do is just change the background colour of a row in a a table – it is identifiable by attribute, but doesn’t have all the maphilight structure around it.
        
        The big picture is this – my page has an image with hotspots which is a diagram of motorbike parts, and also a table with details/prices of those parts. What I want to achieve is that (1) mouseover on the hotspot will highlight it normally AND also highlight the applicable table row (change bg colour), and (2) mouseover on the table row will change its background AND also highlight the image hotspot. I have item 2 working, but item 1 is what the query is about. Sorry to be a pain – I’m still not sure if this makes adapting the code above easier or harder.
        
        My initial thought was that it would be necessary to add another option to maphilight, which was an extra user function to execute on mouseover/mouseout. If not null, maphilight would just call the functions after doing its normal mouseover/mouseout stuff. I’m sure that would work, but I’m now thinking it can probably be done more simply.
      - Mark
        
        Yes, I was assuming that. My bad.
        
        It sounds to me like what you want to do has nothing to do with maphilight. It sounds like you can just make an event handler for mouseover for your hotspot that finds the matching/associated table row and changes the css for the background color of that row. That doesn’t require maphilight at all. I think your best bet is to use a combination of jQuery and CSS. Something like:
        
        tr.hovered {
        bg-color: newcolor;
        }
        
        $(‘.hotspot’).bind(“mouseover”, function(){
        
        var hotspot = this;
        
        //get id from $hotspot to match with tr
        
        $().addClass(‘hovered’);
        });
        
        Your tr will need some attribute to tie it to the hotspot. Either it is the data itself, or the id with _tr or something else to make it unique. Once you have a selector to your tr element, you can add the hovered class to it and CSS will take care of the background color change.
        
        Corresponding mouseout:
        
        $(‘.hotspot’).bind(“mouseout”, function(){
        
        var hotspot = this;
        
        //get id from $hotspot to match with tr
        
        $().removeClass(‘hovered’);
        });
        
        Either that or have your event handlers change the CSS directly, rather than specifying styles in your CSS file. When not dealing with positional type styles, I prefer to use CSS rather than change it in code because it really belongs separated into the CSS file. There may be other, better ways to do this, but this is probably how I would try to do it myself.
      - Steve
        
        Thanks for staying with this. I have actually achieved what I want to achieve, not quite how you describe but similar. And learned a bit more about jQuery in the process, which can’t be a bad thing! I do like your idea of using addClass and removeClass, and putting the actual colours in the CSS – more generic and more maintainable. I wasn’t doing that, but probably will. Consider this query closed.
        
        And what I should have said at the beginning – many thanks to you or whoever put this together and made it available. It has certainly allowed me to make the website work a lot better.
Dev

Hi, Thanks for plugin at first. I use http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html to make map responsive. But when I use your plugin it affects on responsiveness. is there a way to avoid this?
Dev

Hi, Cool Plugin, but it’s not responsive on me, is there a way to get responsiveness too?
Vasundhara InfoTech

Hi , I want to create map of pune city with all area and after clicking on any particular area my site will show all properites or builder in that particular area , need help on same

e.g property in bavdhan http://www.punebuilder.com/2/2005/Property-in-Bavdhan