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.2k8 gold badges79 silver badges119 bronze badges

im having trouble implementing your method i supplied my working copy above
– James Kirkby
Commented Aug 24, 2012 at 14:00
#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.
– Jamie Treworgy
Commented Aug 24, 2012 at 14:03
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"
– James Kirkby
Commented Aug 24, 2012 at 14:18
Are you referencing the imagemapster script? Are you getting any errors?
– Jamie Treworgy
Commented Aug 24, 2012 at 14:22
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
– James Kirkby
Commented Aug 24, 2012 at 14:32

| Show 4 more comments

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

7899 silver badges11 bronze badges

Add a comment |

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,7843 gold badges23 silver badges21 bronze badges

Add a comment |

Collectives™ on Stack Overflow

html image maps and hover css

4 Answers 4

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
html
css
imagemap
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Not the answer you're looking for? Browse other questions tagged javascriptjqueryhtmlcssimagemap or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
html
css
imagemap
or ask your own question.