Working with Images (and Links) - JavaScript by Example

HTML and CSS Reference

In-Depth Information

Figure 12.14 Each time the user clicks the button, a random picture is displayed.

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 http://www.tutorialspoint.com/java-

scritpt/javascript_image_map.htm ) .

EXAMPLE 12.8

<html>

<head><title>Using Links </title>

1

2

<area shape="rect" href="spring5.jpg"onclick=