Search code examples
javascriptimagemap

How can I adapt a javascript magnifier to allow it to click on an imagemap?

w3schools has an example image magnifier. I am using it on an image that has an associated image map - but the magnifier seems to have disabled the ability to click.

What I would like is that when the cursor hovers over an area element of the image map, the browser status bar should show the area's link destination (as it does normally, without the magnifier), and if the user clicks their mouse button, the link should be followed.

The magnifier implements a DIV, dynamically inserted onto the page, of 100x100px. The background of that DIV is dynamically updated to show an enlargement of the image you are enlarging.

I have managed to add a pointer to the centre of the DIV by inserting an IMG tag into the DIV and styling the image with margins to position it at centre.

The issue, I think, is that this DIV (and the cursor image within it) sits on top of the main image, which is the one having an image map. Hence is there a way to detect the map areas below the magnifier's DIV?

Solution

  • Ok - so I did work this out. Will do my best to explain here. Do take a look at the w3schools image magnifier I linked - there is a demo on that page.

    What we are going to do it:

    First, add a pointer image to the magnifier.

    Second, use an image map with the background (main) image, and allow the user to click on the map areas (despite the fact the magnifier div is positioned in front of the main image).

    To add the pointer, in the js file, find this line:

     glass = document.createElement("DIV");

    Then add this line after it:

    glass.innerHTML = '';

    This simply adds an image within the magnifier. Update 'src' to point to your image. The class name is then used in the css file like this:

    img.handpointer {margin-left: auto; margin-right: auto; width: 36px; 
 /* or absolute */
  left: 50%;
  margin-top: 46px;
  margin-left: 32px;
}

    The margin values will need to be updated depending on the shape of your pointer. Note - once we add the image map, the browser will show its own pointer (in addition to yours) when you hover over a map area link. Use this fact to adjust your margins so that the clicking point of your pointer aligns with the browser's exactly. Then add the following CSS to hide the browser's default pointer:

    area {
  cursor: none;
}

    Next we add the image map to the background image. I used a free online image map generator to generate the code for my map. I also used an image map resizer to automatically scale the image map as my background image scales with the browser window. Both of these are very simple. My resulting HTML for rending the background image is in a format that began with the map generator tool and then was adapted (ie with class names and how the divs are nested) to facilitate the resizer. The result begins like this:

    <!-- Magnifier container -->
<div class="img-magnifier-container" id="img-magnifier-container">

    <!-- Logo -->
    <img class="centered" class="main" src="./logonoshadowlargeclear.png" />

    <!-- Main Image -->
    <img class="main" id="main" src="./sample.jpg" usemap="#image-map">

    <!-- Image Map Generated by http://www.image-map.net/ -->
    <map name="image-map" id="image-map">
        <area target="" alt="" title="" href="1" coords="492,266,15" shape="circle">

    In my case I also have a logo image placed over the background image - so you might not have that line.

    If you test your code now, you won't be able to click your map area links. To fix that we just need one line of CSS. Find the CSS for this class:

    .img-magnifier-glass

    and add this line to the declaration:

    pointer-events: none; /* allow click-through to background */

    This comes from a simple example on allowing clicks through to elements behind other elements, noted in the accepted answer to a question about that, here. Do note there is CSS in that example for IE and I haven't included that in my answer here.

    If you test now, we have one more problem - when your magnifier reaches a map area link, the magnifier stops moving. To fix this, note the javascript for the magnifier adds listener events to your background image and your magnifying glass. We need to add them to the image map element. To do this, in the magnify function, note the line:

    img = document.getElementById(imgID);

    After this, add a similar one to select the image map, like this:

    imgmap = document.getElementById('image-map');

    Note the element's ID value - you'll see I used that in the HTML I posted above.

    Now, where the magnify function has this line:

    img.addEventListener("mousemove", moveMagnifier);

    You want to add something similar, after it, for the map element, like this:

    imgmap.addEventListener("mousemove", moveMagnifier);

    And likewise, find the line for touch screens like this:

    img.addEventListener("touchmove", moveMagnifier);

    Then add a similar line for the image map, like this:

    imgmap.addEventListener("touchmove", moveMagnifier);

    Your magnifier should now continue to move while hovering over map areas. If you didn't hide the browser's default pointer before then you will see it appear (in addition to the pointer you added earlier). Use this fact to adjust your margins on your custom pointer so the pointing pixel align's with the browsers, then hide the browser's default pointer as described earlier.