VirtualMV/HTML/Basic/Multimedia/Image map

HTML: Image map

An image map is an image that has defined clickable areas that trigger HTML events. When a mouse rolls over an image map, the cursor turns into a hand to indicate the "hotspots" of the image.

They are mostly used for navigation, though can also be used to rigger advanced HTML and JavaScript events. Flash is a commonly used alternative.

Hot spots can be defined as circular, rectangular and as a polygon (connected straight lines).

Image maps By the end of this page you will be able to: Add the HTML code for an image map

Creating an image map

To create a client-side image map you will need:

• An Image. Usually in gif, jpg or png format
• An HTML editor (it helps if it has image map functionality), otherwise you can use a drawing program that shows x (horizontal) x y (vertical) positioning of the mouse on the canvas.
• Client-side image map compatible web-browser: (Supported by most major browsers since Netscape 2.0 +, Internet Explorer 2.0 +, or other compatible browser )

The image map is create by locating the co-ordinates of the image, as follows:

Coordinates in an image map

This is then converted into HTML code

To create a map:

<map name="myMap" ></map>

Then add an entry for each "hot-spot" using this syntax:

<area shape="rect" href="rectangle.htm#test" 
      coords="53,85 163,180" alt="You Are On The Square">
<area shape="circle" href ="circle.htm#test"
      coords ="272,133 41" alt="You Are On The Circle"> 
<area shape="polygon" href ="polygon.htm#test"
      coords ="366,111 418,87 473,139 473,172 400,172" alt="You Are On The Polygon">

With your map ready you have to add one last piece of code, assigning the map to your image. Simply add a USEMAP line to your IMG tag.

<img src="imgMap.png" usemap="#myMap" height="286" width="588" />

In Microsoft Expression Web

To add an image map in Microsoft Expression Web.

1. Insert the image
2. Click on the image, then right click and select Show Pictures Toolbar
3. Click on the rectangular, circular or polygonal Hotspot tool (towards the right of the toolbar), then drag the area over the part of the image you want to create a hotspot for
4. On release a dialog window will open for you to enter the hyperlink

Adding an image map using Microsoft Expression Web

Code similar to the following will be added to the HTML

<p>
<map name="FPMap0" id="FPMap0">
<area href="backgammon.htm" shape="rect" coords="163, 208, 352, 389" />
</map>
<img alt="Image map example" src="vmv2010ImageMap.jpg" width="595" height="412" usemap="#FPMap0" />
</p>

In Adobe Dreamweaver

To add an image map in Adobe Dreamweaver.

1. Insert the image
2. Click on the appropriate hotspot tool (bottom left of window)
3. Drag over object
4. Add Hotspot Properties

Adding an image map using Adobe Dreamweaver

Code similar to the following will be added to the HTML

<img src="vmv2010ImageMap.jpg" alt="Image map example" width="595" height="412" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="160,208,351,386" href="#" target="backgammon.html" alt="backgammon" />
</map>

Sample images for hotspot tasks

For the following tasks try to create a hotspot using an image drawing program (like PaintShop Pro, PhotoShop), Expression Web, and Dreamweaver.

Task 1: Create an image map for the basic shapes

Using the following image, create an image map that allows a rectangle, circle and polygon to be selected.

Sample image for HTML Hotspot exercises

Task 2: Create an image map from a digital photo

Using the following image , create an image map that allows user to select the backgammon board, the ball and the castle that connects them to web page that briefly describes what was selected

Sample image for HTML Hotspot exercises

Adding JavaScript

You can also ask the image map to execute some JavaScript

<area shape="rect" coords="160,208,351,386" href="default.htm"
   onClick="alert('square');return false">

or using the javascript: schema

<area shape="rect" coords="1160,208,351,386" href="javascript:alert('square')"

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/HTML/Basic/Multimedia/Image map. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 25, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Multimedia/Image_map    (zotero)