html image maps and hover css

Question

Im working on a image map a previous dev created as part of a navigation. It will feature the UK map cut up into regions to navigate to them parts of the site. The previous dev used img maps, but image maps dont use css correctly as image maps are a legacy method.

Bellow is the code

<style type="text/css">

#map a {
    cursor: hand;
}

</style>

<div id="mapimage"><img src="ukmap.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486></div>

 <map id="map" name="map">


    <area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" />

    <area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" />

    <area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" />

    <area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" />

    <area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" />

    <area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" />

    <area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" />

    <area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" />

    <area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" />

</map>

We need each of the areas to change colour on hover. would it be best to re write this using div and ul/li with absolute positioning. Or is it possible to change the ukmap.gif with jquery/javascript on mouse over? as then i could have the same image with different areas blocked colour and change the image to mimic a css:hover, i dont want to undermine previous peoples work while at same time not wasting time rewriting it if a simple jquery hack can select these

<html>
<head>
<style type="text/css">

#map a {
    cursor: hand;
}

</style>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>


    <script>
$('#mapimage').mapster(
    { 
        fillColor: 'ff0000'
    });
</script>

<div>
    <img id="mapimage" src="images/map-complete.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486></div>

 <map id="map" name="map">


    <area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" />

    <area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" />

    <area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" />

    <area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" />

    <area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" />

    <area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" />

    <area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" />

    <area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" />

    <area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" />

</map>

Jamie Treworgy · Accepted Answer · 2013-07-29 17:02:49Z

6

"image maps are a legacy method" -- untrue. HTML image maps are fully supported by the HTML 5 spec.

CSS simply doesn't apply to imagemaps.

Try ImageMapster, a jquery plugin designed exactly for this purpose.

Here's a basic usage (same problem as the other answer - the areas don't match right, I couldn't easily find an accurate imagemap of the UK and don't have your source image that your areas match). But you get the idea.

http://jsfiddle.net/VcGXL/

// basic implementation of hotspots with ImageMapster

$('#mapimage').mapster(
{ 
    fillColor: 'ff0000'
});

edited Jul 29, 2013 at 17:02

answered Aug 24, 2012 at 13:33

Jamie Treworgy

24.4k9 gold badges81 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

James Kirkby Over a year ago

im having trouble implementing your method i supplied my working copy above

Jamie Treworgy Over a year ago

#mapimage is an id selector. In your HTML, that is on the div, not the image. I changed it to the image in the example. You need to target the image.

James Kirkby Over a year ago

in the second example the #mapimage is on the image not the div, i took your code and put it together <script> $('#mapimage').mapster( { fillColor: 'ff0000' }); </script> <div> <img id="mapimage"

Jamie Treworgy Over a year ago

Are you referencing the imagemapster script? Are you getting any errors?

James Kirkby Over a year ago

yes referrencing imagemaster script and its in he rgiht directorys ect here is the head of the doc <html> <head> <style type="text/css"> #map a { cursor: hand; } </style> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.7.2/…> <script type="text/javascript" src="mapster/dist/jquery.imagemapster.js"></script> <script> $('#mapimage').mapster({ fillColor: 'ff0000' }); </script> error in browser console shows Uncaught SyntaxError: Unexpected token ILLEGAL > line 15

|

VVV · Accepted Answer · 2012-08-24 13:22:58Z

If you don't want to restart everything you could do the following: Add the hover code to each area, and change the source of the image.

$('#southeast').hover(
        function() {
            $('#mapimage img').attr('src', 'http://www.groupswelcome.co.uk/maps/uk_map.gif');
        },
        function() {
            $('#mapimage img').attr('src', 'http://www.alert24uk.com/ESW/Images/uk-map.gif');
        }
    );

Here's a fiddle of this method (rollover southeast at the bottom right)... Images do not correspond to the mapping of course.

By doing this, you will see a blank image temporary... until the image loads.

There are ways to prevent this, like using a spritesheet instead. If interested, I can work up an example for you.

This is an easy way. There are other options. HTML5 canvas if your website is for recent browsers.

George SEDRA · Accepted Answer · 2013-02-06 09:23:33Z

1

In fact the default display for area in none so you have to style it to display:block first, so put this CSS rule to change the cursor over the maps areas:

area{
    display:block;
    cursor:hand;
}

answered Feb 6, 2013 at 9:23

George SEDRA

7859 silver badges12 bronze badges

Comments

Juan Carlos Moreno · Accepted Answer · 2015-03-20 03:03:07Z

0

Sorry to jump on this question late in the game but I have an answer for irregular (non-rectangular) shapes. I solved it using SVGs to generate masks of where I want to have the event attached.

The idea is to attach events to inlined SVGs, super cheap and even user friendly because there are plenty of programs for generating SVGs. The SVG can have a layer of the image as a background.

http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/

answered Mar 20, 2015 at 3:03

Juan Carlos Moreno

2,8043 gold badges25 silver badges21 bronze badges

Collectives™ on Stack Overflow

html image maps and hover css

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related