Apr222011

Highlight Image Map Area Hotspots With jQuery

Posted by Sam Deering
in Jquery Image Scripts

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

AUTHOR: Sam Deering. Find out more about jQuery4u author on Google Plus.

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

About the Author

Sam Deering

Sam Deering is a Web Developer who specialises in JavaScript & jQuery. He's always thinking of new ways to educate and make the web a better place....View Profile

Highlight Image Map Area Hotspots With jQuery

Code and Usage

Enjoyed this post? Share and Leave a comment below, thanks! :)

About the Author

Get jQuery Stuff in your inbox!