ptg 422 Chapter 12 • Working with Images (and Links) 12.3 Working with Imagemaps An imagemap is an image with clickable areas where each area is represented by a link, also called a hotspot. An imagemap makes it possible to make one image link to several pages depending on the area or pixel coordinate positions clicked by the user. A simple example would be an image of the map of the United States. If the user clicks on Maine, for example, then a link would navigate the user to another page with information about that state, a closer image of the state, and so forth. In the HTML page you simply specify the area of the image (hotspot) and the link that will be associated with that part of the image. The most time-consuming and boring part of this process is determining the coordinate positions for the hotspot. This can be done manually or by an image mapping program. There are a number of programs on the Web to help you (see Figure 12.6), and many are free. In fact, most HTML editors have image mapping as a built-in function (see Figures 12.7 and 12.8). Figure 12.5 After clicking on a hyperlink: Output from Example 12.2. From the Library of WoweBook.Com ptg 12.3 Working with Imagemaps 423 Figure 12.6 A free online image mapping tool. From the Library of WoweBook.Com ptg 424 Chapter 12 • Working with Images (and Links) In Example 12.3, if you click on the face of any of the people in the family, you are linked to a page with information about that family member. In the HTML page the <area> tag and its attributes represent the coordinates and the shape of the image map (see Table 12.5) as well as a link to the navigation page where the user will be directed when he or she clicks on the hotspot. Example 12.3 demonstrates how to create an image map. Figure 12.7 Using the tool to map a rectangular hotspot. Figure 12.8 Using the image mapping tool to get the coordinates of the hotspot. Coordinates are for the highlighted rectangular shape. From the Library of WoweBook.Com ptg 12.3 Working with Imagemaps 425 In Example 12.3 the coordinates are plotted with rectangular image mappings, but there are other shapes that can be used: the circle and polygon. (The polygon shape can be used to customize the area of the link.) Note: All coordinate values are relative to the top left corner of the image (0,0). Table 12.5 Shape Coordinates for an Imagemap Shape Coordinates coords rect “x1,y1,x2,y2” Top left and bottom right corners of the rectangle. circle “x.y,r” Center and radius of the circle. poly “x1,y1,x2,y2,x3,y3, ” Corners of the polygon. default The remaining area of the image, not defined by any coordinates. EXAMPLE <area shape=rect coords= x1,y1, x2,y2 href="http://www.domain.com"> <area shape=circle coords= x1,y1, x2,y2 href="http://www.domain.com"> <area shape=polygon coords= x1,y1, x2,y2, , xn,yn href="http://www.domain.com"> EXAMPLE 12.3 <html> <head><title>Using Links </title> 1 <map name="my_image_map"> 2 <area shape="rect" href="nicky.html" coords="68,41,159,190"> <area shape="rect" href="daniel.html " coords="202,28,287,133"> <area shape="rect" href="jake.html " coords="273,20,358,125"> <area shape="rect" href="kimmy.html " coords="350,76,431,185"> <area shape="rect" href="uncledan.html " coords="403,10,491,98"> <area shape="rect" href="jessica.html " coords="485,8,573,96"> 3 <area shape="default" href="family.gif"> </map> Continues From the Library of WoweBook.Com ptg 426 Chapter 12 • Working with Images (and Links) </head> <body> <div align="center"> <h2>The Family</h2> 4 <img src="family.gif" usemap="#my_image_map" /> </body> </html> The file: nicky.html <html> <head><title>Nicky</title></head> <body> <script type="text/javascript"> var age = 14; alert("Nicky, age "+ age); 5 window.location="example12.12.html"; </script> </body> </html> EXPLANATION 1 The HTML <map> tag defines the client-side image map. The name attribute is re- quired to make an association with the name and the usemap attribute of the image. See line 4. In this definition, you tell the browser where the hotspots are in the im- age, and what the hotspots need to link to. 2 The <area> tag defines the hotspot for a rectangular shape; that is, the top left and bottom right corners of the rectangle. The rectangular shape for each area of the map is drawn around each of the family members in the picture (see Figure 12.9). 3 The default represents the remaining area of the image not defined by any area tags. It has no coordinates. 4 This is the image that will be displayed on the screen. The attribute use- map=“#my_image_map” attribute associates the image map with this image. The image map could also be placed in another file as usemap=“image- file.map#my_image_map” where “imagefile.map” is the name of a file that de- fines the areas. 5 When the user clicks on the area around the image of the girl at the far left, the link goes to this page, nicky.html. After displaying information about Nicky, the user is directed back to the original page. EXAMPLE 12.3 (CONTINUED) From the Library of WoweBook.Com ptg 12.3 Working with Imagemaps 427 The user clicks his or her mouse on one of the faces and will be redirected to another file (see Figure 12.10). Figure 12.9 The image has hotspot areas defined for each of the family members. Figure 12.10 User clicked the mouse on Nicky’s face. A link to nicky.html is opened. From the Library of WoweBook.Com ptg 428 Chapter 12 • Working with Images (and Links) 12.3.1 Replacing Images Dynamically with the src Property By changing the value assigned to the src property of an image, it is possible to dynam- ically replace one image with another. You can create an array of images with the Array() constructor, and assign any one of these images to the src property of the JavaScript images[] array. EXAMPLE 12.4 <html> <head><title>HTML Images</title> <script type="text/javascript"> 1 var myImages=new Array("baby1.jpg", "baby2.jpg", "baby3.jpg", "baby4.jpg"); 2 index_val=0; 3 function next_image(){ 4 index_val++; 5 if (index_val < myImages.length){ 6 document.images["babypic"].src = myImages[index_val]; // could say document.babypic.src or // document.images[0].src } 7 else{ index_val=0; document.images["babypic"].src = myImages[index_val]; } } 8 function previous_image(){ index_val ; 9 if (index_val >= 0){ document.images["babypic"].src = myImages[index_val]; } 10 else{ index_val=myImages.length - 1; document.images["babypic"].src = myImages[index_val]; } } </script> </head> <body> <div align="center"> <h2>Baby Gallery</h2> 11 <img name="babypic" id="babypic" src="baby1.jpg" width="329" height="440" > <br /> From the Library of WoweBook.Com . the image (hotspot) and the link that will be associated with that part of the image. The most time-consuming and boring part of this process is determining the coordinate positions for the. to the src property of the JavaScript images[] array. EXAMPLE 12.4 <html> <head><title>HTML Images</title> <script type="text /javascript& quot;> 1 var. <head><title>Nicky</title></head> <body> <script type="text /javascript& quot;> var age = 14; alert("Nicky, age "+ age); 5 window.location="example12.12.html";