What is an Image map
Setting Up the Rollover
What to do
Linking

image1 image2 image3 Default


What is an Image Map?

An image map is a way of defining a hot spot within an image on a Web page. This means that, rather than having the whole image behave as one link like in the first rollover assignment, you can have lots of different links within the one image.


For example, the single image below has an associated image map containing 3 hot spots that, when rolled over, bring up different Javascript messages:

Shapes


Circle Rectangle Triangle Default

The usemap attribute

So how's it done? Well, to associate an image map with an image, you simply add the usemap attribute to the standard <img> tag for the image. In the above example, the image map is called shapes, so the <img> tag looks like this: 
<img src="images/shapes.jpg" width="375"
height="102" style="border: none;" alt="Shapes" usemap="#shapes" />

The map tag

The other half of the image map is the map definition. In the definition, you tell the browser where the hot spots are in the image, and what the hot spots need to link to.

The map is defined using the <map></map> tag. In the example above, the map tag looks like this: 
<map name="shapes" id="shapes">

<area    shape="circle"
    coords="58,50,40"
    onmouseover="javascript:clicked_on('circle');"
    title="Circle" alt="Circle"/>

<area    shape="rect"
    coords="136,11,227,89"
    onmouseover="javascript:clicked_on('rectangle');"
    title="Rectangle" alt="Rectangle"/>

<area    shape="poly"
    coords="309,13,358,89,257,89"
    onmouseover="javascript:clicked_on('triangle');"
    title="Triangle" alt="Triangle"/>

<area    shape="default"
    nohref="nohref" title="Default" alt="Default"/>

</map>
The 3 "hot spot" areas - a circle, a rectangle, and a polygon - are defined and linked to a Javascript function to display the appropriate shape name.

The above map element can be placed anywhere within the HTML page body.

The general syntax for the map element is: 
<map name="map-name">

<area    shape="area shape"
    coords="area coordinates"
    href="area hyperlink" or nohref="nohref"
    target="hyperlink target"
    title="area title"
    alt="alternate text"/>

<area    shape="area shape" ...

</map>
The area tag has the following attributes: 
shape="rect | circle | poly | default"

Specifies the shape of the area. Possible values are: 
coords="area-coordinates"
Specifies the coordinates that define the corners of the shape. The coordinates depend on the shape specified in the shape attribute:
Shape Coordinates
rect coords="x1,y1,x2,y2"
(The top left and bottom right corners of the rectangle)
circle coords="x,y,r"
(The centre and radius of the circle)
poly coords="x1,y1,x2,y2,x3,y3,..."
(The corners of the polygon)
href="area-hyperlink"

This is the URL that you'd like to link the hot spot to. It works just like a standard <a href=...> tag.

You can specify a nohref attribute instead, in which case the hot spot will not link to anything.
title="area-title"

This attribute allows you to give the area a title. When the mouse is rolled over this hot spot, the browser will usually pop up a tool tip displaying this title.

Putting the image map in a separate file

The name of the image map specified in the usemap attribute is really a URI, which means it can reference a map in another file on your website, if required. For example, if you saved your map element in a file called shapes.map in the same directory as your HTML file, you would reference the map using: 
<img src="images/shapes.jpg" width="375"
height="102" style="border: none;" alt="Shapes" usemap="shapes.map#shapes"/>

Working out image map coordinates

One easy way to work out coordinates is to change your image map from client-side to server-side temporarily, by changing the usemap="mapname" attribute to ismap="ismap", and adding a dummy <a href> tag around the image, e.g.: 
<a href="#"><img src="images/shapes.jpg" width="375"
height="102" style="border: none;" alt="Shapes" ismap="ismap"/></a>
Then, as you roll the mouse over the image, you should see the coordinates appear after the "?" in the status bar of your browser! Try moving your mouse over the image below to see if this works:

Shapes

coords.png

  1. What to do

    Open BBEdit by clicking on the icon in the dock
    .

  2. Create a new web document +CTRL+N.
    • Make sure XHTML 1.0 Strict is selected

    • Give your document a title (This is what appears on the top of your browser).

    • Press OK


  3. Save the document in your web folder as imagemap.html.


  4. This is what you should see:
    1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Your Title</title>
    <meta  name="generator" content="BBEdit 7.0.4" />
</head>
<body>
	
</body>
</html>


  5. Between the <body></body> tags add a pair of <div></div> tags
    <div>


</div>


  6. Insert your Photoshop Image with your buttons between the <div> tags.

  7. Work out coordinates by adding the attribute ismap="ismap", and adding a dummy <a href> tag around the image: 
    <a href="#">
<img src="images/buttons.png"  style="border: none;" alt="buttons" ismap="ismap"/>
</a>


  8. What kind of shape is your button?
    Shape Coordinates
    rect coords="x1,y1,x2,y2"
    (The top left and bottom right corners of the rectangle)
    circle coords="x,y,r"
    (The centre and radius of the circle)
    poly coords="x1,y1,x2,y2,x3,y3,..."
    (The corners of the polygon)


  9. Add a <map></map> element somewhere in your page.
    <map name="buttons" id="buttons">

<area    buttons="your_shape"
    coords="your_coordinates"
    onmouseover="javascript:show(img1.src);"
    title="img1" alt="img1"/>

<area    buttons="your_shape"
    coords="your_coordinates"
    onmouseover="javascript:show(img2.src);"
    title="img2" alt="img2"/>

<area    buttons="your_shape"
    coords="your_coordinates"
    onmouseover="javascript:show(img3.src);"
    title="img3" alt="img3"/>

<area    shape="default"
    href="javascript:show(img0.src);" 
    title="Default" alt="Default"/>

</map>

  10. Preview your page and then roll the mouse over the image. You should see the coordinates appear after the "?" in the status bar of your browser. Add the coordinates to your buttons in your <map></map> element.
    coords.png

  11. To prepare the image to be a map, replace ismap="ismap" with usemap="#buttons" id="roll" in the <img> tag.

  12. Remove the dummy link

  13. Navigate to the <head></head> section (lines 4-8 in my document)

  14. Add a Javascript declaration: 
    <script type="text/javascript">
    //<!--
	
    //-->
</script>

    The second line of the declaration comments out the script. If you do not include these comments when your browser validates the document, it may see the script as invalid XHTML code.
  15. Add the following lines: 
    var image0 = new Image();
image0.src = "address_of_default_image.jpg";
var image1 = new Image();
image1.src = "address_of_image_1.jpg'";
var image2 = new Image();
image2.src = "address_of_image_2.jpg'";
var image3 = new Image();
image3.src = "address_of_image_3.jpg'";
    My addresses were: 
    images/rollover2/_0000_bg0.jpg
    
images/rollover2/_0001_bg1.jpg
    
images/rollover2/_0002_bg2.jpg
    
images/rollover2/_0003_bg3.jpg

  16. Add the following functions: 
    function show(img){
	document.getElementById('roll').src=img;
}

Linking

  1. Open index.html

  2. Navigate to your table

  3. Copy the last row: 
    <tr>
    <td class="assignment"><a href="last_assignment.html">last assignment</a></td>
    <td class="description">Applications used</td>
    <td class="date">9/20/05</td>
</tr>
    and paste beneath it: 
    <tr>
    <td class="assignment"><a href="last_assignment.html">last assignment</a></td>
    <td class="description">Applications used</td>
    <td class="date">9/20/05</td>
</tr>
<tr>
    <td class="assignment"><a href="last_assignment.html">last assignment</a></td>
    <td class="description">Applications used</td>
    <td class="date">9/20/05</td>
</tr>


  4. Change the first column to: 
        <td class="assignment">Face Game</td>


  5. Change the second column to: 
        <td class="description">BBEdit, Photoshop and Javascript</td>


  6. Change the third column to: 
        <td class="date"></td>


  7. In cell 1 of this row set up an anchor container (a link) around the text you added, linking it to the timeline page in your web folder


    1. Hilite the word Rollover
    2. Press +CTRL+A
    3. Click on the File button
    4. Navigate to the rollover page in your web folder
    5. Click on the Choose button
    6. Click on the Apply button