An image map is made up of regions or area, and each region or area has an associated hyperlink. Clicking on one area takes you to the associated link.
Adding Java Script to image maps is as easy as adding it to an HREF. In fact, Java Script treats area tags almost exactly like it does HREFs. You can stick onMouseOvers,onClicks, and onMouseOuts in the area tag, and they will do what you expect.
There are two kinds of image maps :
1 Clint Side image map
2 Server Side image map
Java Script supports client side image maps. Java Script provides the area object,with the help of which you can work with image maps and what you want to do on that image.
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.
Using Client-Side Image Maps
A client-side image map is defined with the MAP tag. We can define areas within the image that are hyperlinks to distinct URLs; the areas can be rectangles, circles, or polygons.
Traditionally, image-map requests are sent to servers, and a CGI program performs a database lookup function. With client-side Java Script, however, you can perform the lookup on the client. You can use the search property of the location object to parse the x and y coordinates and perform an action accordingly. For example, suppose you have a file named image.html with the following content:
Example:2
<H1>Click on the image </H1> //Mouse event
<P>
<A HREF="image.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>
<SCRIPT>
str = location.search
if (str == "")
document.write("<P>No coordinates specified.")
else
{
commaloc = str.indexOf(",") // the location of the comma
document.write("P>The x value is " + str.substring(1, commaloc))
document.write("<P>The y value is " +
str.substring(commaloc+1, str.length))
}
</script>
Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
Keywords:JavaScript Image Maps Creating HTML Image Maps Image Maps and JavaScript
