|
Client-side image map
<!--
To be able to click on an image and go to a URL based on the position of the click, use image maps.
The picture does not have to be changed.
Add the usemap attribute in the img tag. Let it point to the name of a map tag. See example below:
-->
<
img
src
=
"mypicture.jpg"
usemap
=
"directions"
>
<
map
name
=
"directions"
>
<
area
coords
=
"0,0,50,50"
href
=
"URL01.htm"
>
<
area
coords
=
"50,0,100,50"
href
=
"URL02.htm"
>
<
area
coords
=
"100,0,150,50"
href
=
"URL03.htm"
>
<
area
coords
=
"0,0, 150,150"
href
=
""
>
</
map
>
<!--
Now, when a mouse is clicked on the image, the browser goes to the URL whose coordinates
fall within those specified by the <map> tag.
The last <area> tag has coordinates the full size of the image. This is used to catch any
mouse click not caught by the earlier <area> tags.
The noref attribute can also be used to take no action, as in the following example
-->
<
area
coords
=
"0,0,150,150"
noref
>
|