HTML Examples: IMG, MAP, and AREA Elements

An active image is an image, which the user can click on it to execute a certain program.
You can allow the user to click on  the whole image or just a certain region of the image to execute a program.
If you use the attribute ISMAP, the coordinate of the mouse will pass to the external program. Also, IMG element must be within an Anchor element to take effect of using ISMAP.
Let look at the following examples, you will understand a lot better.

• Example 1: IMG element without ISMAP and USEMAP attributes and within an Anchor element
• Example 2: IMG element with ISMAP attribute and within an Anchor element
• Example 3: IMG element without ISMAP, with USEMAP attributes
• Example 4: IMG element with ISMAP, and USEMAP attributes and within an Anchor element
• Example 5: IMG element with ISMAP, and USEMAP attributes and within an Anchor element. MAP has two AREAs

You might read IMG element with the attributes ISMAP and USEMAP, MAP element, and AREA element for more details. 

Example 1: IMG element without ISMAP and USEMAP attributes and within an Anchor element

The following example is showing IMG element without ISMAP and USEMAP attributes and within an Anchor element. When you put the mouse over the flower image, you can see on the status line at the bottom of  the window (Netscape or Internet Explorer browser) the file sounds/MozartNo40.mid. You do not see the (x,y) coordination attached at the end of the program sounds/MozartNo40.mid, because IMG element does not have ISMAP attribute. When you click on any where on the image, the browser will try to execute the program sounds/MozartNo40.mid on a new pop-up window (TARGET="_blank").
Here is the source code:

 <A HREF="sounds/MozartNo40.mid" TARGET="_blank">
<IMG SRC="jpg/GoldPetals.jpg" WIDTH="100" HEIGHT="100"></A>

Example 2: IMG element with ISMAP attribute and within an Anchor element

The following example is showing IMG element with ISMAP attribute and within an Anchor element. Note that: IMG element must be within an Anchor element to take effect of using ISMAP. When you put the mouse over the flower image, you can see on the status line at the bottom of  the window (Netscape or Internet Explorer browser) the file sounds/MozartNo40.mid. You see the (x,y) coordination attached at the end of the program sounds/MozartNo40.mid, because IMG element has ISMAP attribute. When you click on any where on the image, the browser will try to execute the program sounds/MozartNo40.mid on a new pop-up window (TARGET="_blank"). The (x,y) coordination is also passed to the music player program, but it is a useless data for this example.
Here is the source code:

<A HREF="sounds/MozartNo40.mid" TARGET="_blank">
<IMG SRC="jpg/GoldPetals.jpg" WIDTH="100" HEIGHT="100" ISMAP></A>

Example 3: IMG element without ISMAP, with USEMAP attributes

The following example is showing IMG element without ISMAP and with USEMAP attribute. IMG element does not require to be inside an Anchor element, when using USEMAP attribute. The USEMAP value is "#map1", which references to the MAP named map1. In this example, the MAP map1 contains one AREA with COORDS="25,25,75,75", which specifies the center region of the image. Note that the image has a WIDTH="100", and HEIGHT="100". Therefore, if AREA has the COORDS="0,0,100,100", then this AREA will cover the whole image. 
In this example, the MAP map1 contains one AREA with COORDS="25,25,75,75". When you put the mouse over the center region of the flower image, you can see on the status line at the bottom of  the window (Netscape or Internet Explorer browser) the file sounds/MozartNo40.mid. You do not see the (x,y) coordination attached at the end of the program sounds/MozartNo40.mid, because IMG element does not have ISMAP attribute. When you move the mouse near the borders of the image, you will see no file sounds/MozartNo40.mid on the status line. When you click on the center region of  the image, the browser will try to execute the program sounds/MozartNo40.mid on a new pop-up window (TARGET="_blank").
Here is the source code:

<IMG SRC="jpg/GoldPetals.jpg" WIDTH="100" HEIGHT="100" USEMAP="#map1">

<MAP NAME="map1">
    <AREA SHAPE="rect" COORDS="25,25,75,75" HREF="sounds/MozartNo40.mid"
    TARGET="_blank" ALT="sounds/MozartNo40.mid">
</MAP>

Example 4: IMG element with ISMAP, and USEMAP attributes and within an Anchor element

The following example is showing IMG element with ISMAP and USEMAP attributes and within an Anchor element. Note that: IMG element must be within an Anchor element to take effect of using ISMAP. The USEMAP value is "#map2", which references to the MAP named map2. In this example, the MAP map2 contains one AREA with COORDS="25,25,75,75", which specifies the center region of the image. Note that the image has a WIDTH="100", and HEIGHT="100". Therefore, if AREA has the COORDS="0,0,100,100", then this AREA will cover the whole image. 
In this example, the MAP map2 contains one AREA with COORDS="25,25,75,75". When you put the mouse over the center region of the flower image, you can see on the status line at the bottom of  the window (Netscape or Internet Explorer browser) the file sounds/MozartNo40.mid. You do not see the (x,y) coordination attached at the end of the program sounds/MozartNo40.mid, because USEMAP is higher precedence than ISMAP. 

• Internet Explorer: When you move the mouse near the borders of the image, you will see file icons/home.gif on the status line. Also, you see the (x,y) coordination attached at the end of the program icons/home.gif, because IMG element has ISMAP attribute and no USEMAP attribute used in the area around the borders of the image. When you click on the area around the borders of  the image, the browser will try to execute the program icons/home.gif on a new pop-up window (TARGET="_blank").
• Netscape Navigator 4.7: When you move the mouse just a little outside of the borders of the image (not inside), you will see file icons/home.gif on the status line. Also, you do not see the (x,y) coordination attached at the end of the program icons/home.gif. It seems like Netscape Navigator 4.7 has bug. When you click on the area around the borders of  the image, the browser will try to execute the program icons/home.gif on a new pop-up window (TARGET="_blank").

Example 5: IMG element with ISMAP, and USEMAP attributes and within an Anchor element. MAP has two AREAs

The following example is showing IMG element with ISMAP and USEMAP attributes and within an Anchor element.  MAP has two AREAs. Note that: IMG element must be within an Anchor element to take effect of using ISMAP. The USEMAP value is "#map3", which references to the MAP named map3. In this example, the MAP map3 contains the first AREA with COORDS="0,0,100,50", which specifies the top left quarter region of the image, and the second AREA with COORDS="100,50,200,100", which specifies the bottom right quarter region of the image. Note that the image has a WIDTH="200", and HEIGHT="100". Therefore, if AREA has the COORDS="0,0,200,100", then this AREA will cover the whole image. 
In this example, the MAP map3 contains the first AREA with COORDS="0,0,100,50", which specifies the top left quarter region of the image, and the second AREA with COORDS="100,50,200,100", which specifies the bottom right quarter region of the image. When you put the mouse over the top left quarter region of the flower image, you can see on the status line at the bottom of  the window (Netscape or Internet Explorer browser) the file sounds/MozartNo40.mid. You do not see the (x,y) coordination attached at the end of the program sounds/MozartNo40.mid, because USEMAP is higher precedence than ISMAP. When you put the mouse over the bottom right quarter region of the flower image, you can see on the status line at the bottom of  the window (Netscape or Internet Explorer browser) the file video/CAPTURE.AVI. You do not see the (x,y) coordination attached at the end of the program sounds/MozartNo40.mid, because USEMAP is higher precedence than ISMAP. 

• Internet Explorer: When you move the mouse to the top right or bottom left quarter region of the image, you will see file icons/home.gif on the status line. Also, you see the (x,y) coordination attached at the end of the program icons/home.gif, because IMG element has ISMAP attribute and no USEMAP attribute used in these regions of the image. When you click on the area around the borders of  the image, the browser will try to execute the program icons/home.gif on a new pop-up window (TARGET="_blank").
• Netscape Navigator 4.7: When you move the mouse to the top right or bottom left quarter region of the image, you do not see file icons/home.gif on the status line. It seems like Netscape Navigator 4.7 has bug.

Example 5 Output:

HOME            MAIN