HTML and CSS Reference
In-Depth Information
Figure 12.14 Each time the user clicks the button, a random picture is displayed.
12.3.4 Links with an Image Map and JavaScript
You might want to associate more than one link with an image. This can be done by
using an HTML image map. The image map is used to list the links associated with the
image and an event handler will activate some action when the user clicks the link or
rolls the mouse over it, and so on. In Example 12.8, an image map is created with a num-
ber of links associated with an original image entitled “Spring in San Francisco.” When
JavaScript handles the page, it creates a links array where each element of the array is a
link in the order in which it was placed in the document. There is an onClick event han-
dler associated with each link. When the user clicks on a link, he or she is redirected to
another image of “Spring in San Francisco” (see
scritpt/javascript_image_map.htm ) .
<head><title>Using Links </title>
<map name="my_image_map">
<area shape="rect" href="spring5.jpg"onclick=
<area shape="rect" href="spring2.jpg"onclick=
<area shape="rect" href="spring3.jpg"onclick=
<area shape="rect" href="spring4.jpg"onclick=
<area shape="rect" href="spring5.jpg" onclick=
Search WWH ::

Custom Search