JavaScript Image Maps

From http://www.w3schools.com (Copyright Refsnes Data)

# JavaScript Image Maps

An image-map is an image with clickable regions.

## Examples

Simple HTML Image map

Image map with added JavaScript

## HTML Image Maps

From our HTML tutorial we have learned that an image-map is an image with clickable regions. Normally, each region has an associated hyperlink. Clicking on one of the regions takes you to the associated link.

### Example

The example below demonstrates how to create an HTML image map, with clickable regions. Each of the regions is a hyperlink:

    <img src ="planets.gif"
    width ="145" height ="126"
    alt="Planets"
    usemap ="#planetmap" />

    <map id ="planetmap"
    name="planetmap">
    <area shape ="rect" coords ="0,0,82,126"
      href ="sun.htm" target ="_blank"
      alt="Sun" />
    <area shape ="circle" coords ="90,58,3"
      href ="mercur.htm" target ="_blank"
      alt="Mercury" />
    <area shape ="circle" coords ="124,58,8"
      href ="venus.htm" target ="_blank"
      alt="Venus" />
    </map>

### Result

## Adding some JavaScript

We can add events (that can call a JavaScript) to the <area> tags inside the image map. The <area> tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.

Here's the above example, with some JavaScript added:

    <html>
    <head>
    <script type="text/javascript">
    function writeText(txt)
    {
    document.getElementById("desc").innerHTML=txt;
    }
    </script>
    </head>

    <body>
    <img src="planets.gif" width="145" height="126"
    alt="Planets" usemap="#planetmap" />

    <map id ="planetmap" name="planetmap">
    <area shape ="rect" coords ="0,0,82,126"
    onMouseOver="writeText('The Sun and the gas giant
    planets like Jupiter are by far the largest objects
    in our Solar System.')"
    href ="sun.htm" target ="_blank" alt="Sun" />

    <area shape ="circle" coords ="90,58,3"
    onMouseOver="writeText('The planet Mercury is very
    difficult to study from the Earth because it is
    always so close to the Sun.')"
    href ="mercur.htm" target ="_blank" alt="Mercury" />

    <area shape ="circle" coords ="124,58,8"
    onMouseOver="writeText('Until the 1960s, Venus was
    often considered a twin sister to the Earth because
    Venus is the nearest planet to us, and because the
    two planets seem to share many characteristics.')"
    href ="venus.htm" target ="_blank" alt="Venus" />
    </map>

    <p id="desc"></p>

    </body>
    </html>

From http://www.w3schools.com (Copyright Refsnes Data)