Overview

In this chapter you will learn : Using images as hyperlinks. Using area object to implement image map. Properties of area object. Creating an image map. JavaScript timing events.

As text can act as a hyperlink, images can also act as hyperlinks. You can define areas within the image that are hyperlinks to distinct URLs. These different links on the image are defined by certain coordinates, are often called as "hotspots". Images can be accessed using the image object . The <IMG> tag is used to access the images in the HTML documents. It places the image on the screen, and because the <IMG> tag is enclosed within the <A></A> tags, it becomes a Hotspot. Image objects can be created in the following way :

Example

img = new Image ( )                                  img.src = "http://www.xyz.com"

As you know clicking a hyperlink will open a web page linked to it, similarly, when a hyperlink is created on an image, clicking on any part of the image will lead to the opening of a document specified in the <A HREF.....> tag. In case the image is large, and there is a requirement of linking multiple documents to the same image, then there has to be a technique that segments the image into multiple sections and allowing each segment to be linked with a different document.
              This technique is called an Image map which means division of the image into various areas. It can be created and applied to an image so that particular portions of the image can be linked to a different file or image. The hyperlinked regions of an image are called hot regions and each hot region is associated with a file or an image that will be loaded into the browser when the hot region is clicked. So, an image map is an image with clickable region.
                       There are two kinds of image maps : server side and client side. JavaScript supports client side image maps. JavaScript provides the area object, with the help of which you can work with image maps.

Properties of an area Object

 

Property	Description
href	It takes the name of the file that is linked to the particular area on the image.
hash	It specifies the anchor name in the URL
host	It specifies the host name and the port of the URL.
pathname	It either sets the path name of the URL or returns the path portion of the URL.
port	This property specifies the port section of the URL.
protocol	It specifies the protocol part of the URL, including the colon after the protocol name.
search	It specifies the URL query string section, including the question mark.
target	It specifies the target name for the URL link.

Creating an Image Map

While creating an image map, the image is divided into various segments, which requires using the <MAP></MAP> tags. The <MAP> tag takes an attribute  NAME, through which the image area can be referenced in an HTML file :

Syntax

<MAP NAME = "map name">

Within the <MAP></MAP> tags the <AREA> tag is also defined. <AREA> tag defines a particular region within the image. These areas will have to be distinguished on the image and then linked to different documents. You can define the shape for particular areas amongst a rectangle, circle, or a polygon. For each defined shape, coordinates need to be specific to mark an appropriate area on the image. For example, a rectangle needs 2 points of specification, the upper left corner and the lower right corner and for a circle you need to specify three coordinates, the center coordinate x, center coordinate y and radius of the circle.

Example

<MAP NAME = "Color"> <AREA SHAPE = "rect" COORDS = "52, 65, 130, 80" HREF = "yellow.htm"> <AREA SHAPE = "rect" COORDS = "150, 65, 225, 80" HREF = "blue.htm"> </MAP>

Next, apply the image map to a particular image. For this purpose another attribute called USEMAP is used within the <IMG> tag. The USEMAP attribute specifies the location on the page where the image map coordinates and other data are specified. The USEMAP attribute takes the name of the image map as a value, and applies the map specifications to the respective image. The value is always preceded with the # sign.

Syntax

<IMG USEMAP = " *#map_name ">

 

Example

<IMG Src = "colourful.gif" USEMAP="#color">

JavaScript Timing Events

JavaScript allows you to execute certain code after a specified time interval, called timing events. The timing events allows you to time out users if they do not interact with the web page within a certain period of time. This event can also act as a security feature to allow web based applications to log off users if they do not interact with the server periodically.

Syntax

var timing =  set Timeout ("Function or Expression", delay time);

Time outs are like a timer. A timer on the page at the browser's status bar displays the time remaining before timing out. The delay time is entered as milliseconds. After specified number of milliseconds, the predefined function or an expression will be executed.

Example

<script type = "text/javascript"> <!-- setTimeout (" alert ('Time out, Fifty seconds over'); ", 50000) //--> </script>

 

One more event can be set, which is setInterval( ), causes a function to be called periodically based on the time value specified. That means, a particular function or expression is executed repeatedly after a set time interval.

Syntax

var timing = setInterval ( function( ), delay time);

The delay time is in milliseconds. This method waits for a specified number of milliseconds then executes the function specified and after the same amount of time, it will again execute the function. It will continue until you clear the interv