MAP Element | MAP Object

Contains coordinate data for client-side image maps.

HTML Syntax

<MAP
    CLASS=classname
    ID=value
    LANG=language
    NAME=name
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

An image map is a graphic image, with predefined regions, that contains links to other documents or anchors. For example, you could create an image of the solar system containing links that the user can click to navigate to pages for the individual planets.

The MAP object is referenced with the USEMAP attribute in an IMG element, as follows:

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

A MAP element contains a set of AREA elements defining the linking regions in the image.

The MAP element requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

MAP Members

Styles

MAP Styles

Example

This example provides the full code for an image map of the solar system. It creates links from the image map to individual images of the planets using the AREA element with the MAP element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.

Sample Code

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 
    ALT="Solar System" USEMAP="#SystemMap">

<MAP NAME="SystemMap">
    <AREA SHAPE="rect" COORDS="0,0,82,126"
        HREF="/workshop/graphics/sun.gif">
    <AREA SHAPE="circle" COORDS="90,58,3"
        HREF="/workshop/graphics/merglobe.gif">
    <AREA SHAPE="circle" COORDS="124,58,8"
        HREF="/workshop/graphics/venglobe.gif">
    <AREA SHAPE="circle" COORDS="162,58,10"
        HREF="/workshop/graphics/earglobe.gif">
    <AREA SHAPE="circle" COORDS="203,58,8"
        HREF="/workshop/graphics/marglobe.gif">
    <AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,
        281,75,288,91,267,87,253,89,237,81,229,64,228,54"
        HREF="/workshop/graphics/jupglobe.gif">
    <AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
        349,74,367,105,337,85,324,85,307,77,303,60,307,50"
        HREF="/workshop/graphics/satglobe.gif">
    <AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,
        404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44"
        HREF="/workshop/graphics/uraglobe.gif">
    <AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
        435,77,445,92,456,77,463,72,463,62,462,53,455,47"
        HREF="/workshop/graphics/nepglobe.gif">
    <AREA SHAPE="circle" COORDS="479,66,3"
        HREF="/workshop/graphics/pluglobe.gif">
</MAP>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.