ptg 413 chapter 12 Working with Images (and Links) 12.1 Introduction to Images A picture is worth a thousand words. Whether it’s a slide show, banner, movie, or photo album, the Web contains a huge collection of images. Any time you buy something online, there is usually an image associated with the item, maybe a small image, and then a bigger image if you want more detail. Whatever it is, a book, a house, a pair of shoes, or a toy, we like to see it before we put it in our virtual shopping cart and pay the money. Although the focus of this chapter is on JavaScript and images, hypertext links are so closely intertwined with images and navigation, they are also discussed here. Images can be links, clickable image maps, banners, marquees, billboards, or roll- overs—you name it. With HTML, the images you load are static, and just sit on the page. They cannot be changed without loading a brand new page, and loading a lot of images takes time. JavaScript brings a new dimension to working with images. Instead of view- ing a static image on the page, you can create dynamic images that can be changed on the fly, adding animation and drama to your Web page. For example, you can create effects such rollovers, slide shows, cycling banners, dynamic menus, and more. Just as with forms, JavaScript has access to every image on you page. Before getting into the fun of images, we will look at how JavaScript accesses them. In Chapter 13, “Handling Events,” and Chapter 15, “The W3C DOM and JavaScript,” you utilize what you learn here to see the full potential of image manipulation with JavaScript. From the Library of WoweBook.Com ptg 414 Chapter 12 • Working with Images (and Links) 12.1.1 HTML Review of Images Before using images with JavaScript, the following section reviews the basics of using images in a static Web page. Table 12.1 lists HTML image tags. Table 12.1 HTML Image Tags Tag Attributes Description IMG Starting tag for loading an image. ALIGN Floats the image either to the left or right side of the page, or aligns the image with text in directions, texttop, top, middle, absmiddle, bottom, or absbottom. ALT Alternative text in case the image doesn’t appear. BORDER The width in pixels of an image border. HEIGHT Height of the image in pixels. HSPACE Adds space, in pixels, to both the right and left sides of the image. SRC Contains the URL, location of the image relative to the document root of the Web page. VSPACE Adds space, in pixels, to both the top and bottom of the image. WIDTH Width of the image in pixels. MAP Starting tag for an image map. Image maps link areas of an image with a set of URLs. Clicking on an area of the map sends the user to that page. ID The name of the image map. NAME Also the name of the image map. AREA Defines the clickable areas of the image map. ALT Describes what happens when the user clicks. COORDS Determines the shape of a rectangle, circle, or polygon in x,y pixel coordinates. HREF The address of the page that will appear when the user clicks in a particular area. SHAPE Assigned a type, where type represents the shape of the area. From the Library of WoweBook.Com ptg 12.1 Introduction to Images 415 Using an Image in an HTML Web Page. Example 12.1 is an HTML file linked to an image. In this example, we review the way inline images are created in a document. EXAMPLE 12.1 <html> <head><title>HTML Images</title></head> <body bgcolor="lightblue"> 1 <img src="baby.jpg" alt="baby" border=2 align="left" 2 hspace="10" width="220" height="250" /> 3 <pre> Father calls me William, sister calls me Will, Mother calls me Willie, but the fellers call me Bill! Mighty glad I ain't a girl ruther be a boy, Without them sashes, curls, an' things that's worn by Fauntleroy! Love to chawnk green apples an' go swimmin' in the lake Hate to take the castor-ile they give for belly-ache! Most all the time, the whole year round, there ain't no flies on me, But jest 'fore Christmas I'm as good as I kin be! </pre> </body> </html> __________________________ Eugene Field, Jest ‘Fore Christmas,in Childcraft, Vol. 2, (Chicago: Field Enterprises, Inc., 1949). EXPLANATION 1 The image src attribute defines where the image is located. This image, baby.jpg, is located where the HTML file called image.html is found, normally under the document root of your browser. If the image can’t be loaded, the alt attribute spec- ifies text that will appear in its place. The image will be aligned at the left side of the page and will have a thin black border around it. There will be 10 pixels of space on both the left and right sides of the image. This keeps the text from jam- ming up too close to the picture. 2 The width and height attributes of the img tag allow you to specify the size of your image in pixels. If you right-click on an image (Windows), a popup window will appear where you can select Properties to obtain info about your image. 3 This is a <pre> tag that is followed by all the text that appears at the right side of the image. See Figure 12.1. From the Library of WoweBook.Com ptg 416 Chapter 12 • Working with Images (and Links) 12.1.2 The JavaScript image Object With the Legacy DOM, JavaScript provided the image object as a property of the docu- ment object, giving you easy access to the images that have been loaded into a document. Although you can use the W3C versions of the DOM, the Legacy DOM is supported by all modern browsers and is commonly used when working with images. Just like the form object, the image object corresponds to the HTML <img> tag and each image is assigned to the images[] array 1 in the order in which the image appears within the doc- ument. The first image would be represented as document.images[0], the next as docu- ment.images[1], and so on (see Figure 12.2). As with forms, images can also be named and given an id. The properties for the image object correspond to the HTML attributes of the <img> tag, such as src, width, height, border, vspace, and hspace, and are shown in Table 12.2. 2 It is possible to assign values to these properties to dynamically change the size, shape, and border of the image. There are no common methods for the image object unless you use the id attribute and methods such as getElementById() and getElements- ByTagName() provided by the W3C DOM. JavaScript also provides event handlers that are triggered when an image is loaded, a mouse crosses the image, or when the user clicks on an image. Although we use event handling in this chapter, Chapter 13 provides a more complete discussion. Figure 12.1 Using images in an HTML page: Output from Example 12.1. 1. Implemented starting in JavaScript 1.1. 2. These properties are common to both Mozilla/Firefox and Internet Explorer. Internet Explorer, however, supports many more than those listed here. From the Library of WoweBook.Com ptg 12.2 Reviewing Links 417 For preloading offscreen images, JavaScript provides an image constructor (see Example 12.6). The constructor is used if you have large images that will take time to download or images that are being replaced dynamically within the page. The images are preloaded into memory (but not displayed) and available from the cache when the user requests them, thus making the response time much faster (see Example 12.4). 12.2 Reviewing Links Links are fundamental to the Web. They are primarily used to navigate you from page to page. We have been using links in many examples so far. There are a number of ways to execute JavaScript from a link such as navigating to another page, opening a link in Figure 12.2 Document object and images. Table 12.2 image Object Properties Property HTML <img> Attribute Description border border An integer value determining the width of an image border in pixels. complete A Boolean value returning true if Navigator has finished downloading the image. height height An integer representing the height of the image in pixels. hspace hspace An integer representing the horizontal space (pixels) around the image. lowsrc lowsrc Specifies an optional image to display for a low-resolution device. name name A string containing the name of the image. prototype Used to add user-specified properties to an image object. src src A string containing the path and name of the image. vspace vspace An integer representing the vertical space (pixels) around the image. width width An integer representing the width of the image in pixels. images[0] images[1] images[ ] window document From the Library of WoweBook.Com ptg 418 Chapter 12 • Working with Images (and Links) a popup window, calling a function from a link, submitting a form from a link, and so on. This chapter focuses on how links are used with images. As you know, HTML hypertext links are usually created by assigning a Web address or a file name to the HTML <a href> tag, for example: <a href="http://www.ellieq.com">Go Home</a> If a JavaScript function is assigned to the <a href> tag, when the user clicks the link, the function will be executed (see Example 12.4). <a href="JavaScript:greetings()"><big>Click here for salutations</big> <a href="JavaScript: function_name(arguments);"> Do Something </a> And you can use an event handler with a link (see Chapter 13): <a href="newpage.htm" onClick="newwindow();return false">Click Here!</A> <a href=JavaScript: onClick="return handler(arguments)" > <A HREF="JavaScript:newwindow()" ><IMG SRC="mypic.jpg" border="0"></A> 12.2.1 The JavaScript links Object Like the form object and image object, the link object is a property of the document object and gives you access to the hypertext links that have been loaded into a document (see Figure 12.3). It corresponds to the HTML <a href> tag. As each HTML form is a Java- Script element of the forms[] array, and each image is assigned to the images[] array, so each link is assigned to the links[] array in the order in which the link appears within the document. The first link would be represented as document.links[0]. The properties for the links object are shown in Tables 12.3 and 12.4. 3 There are no common methods for the links object. Figure 12.3 Document object and links. 3. These properties are common to both Netscape and Internet Explorer. Internet Explorer, however, sup- ports many more than are listed here. links[0] links[1] links[ ] window document From the Library of WoweBook.Com ptg 12.2 Reviewing Links 419 A links object contains a URL, similar to the window’s location object, and shares the same properties. A full URL takes the following form: <protocol>//<host>[:<port>]/<pathname>[<hash>][<search>] There are nine events that can be triggered by a link: onClick, onDblClick, onKey- Down, onKeyPress, onKeyUp, onMouseDown, onMouseUp, onMouseOver, and onMouse- Out. (For details, see Chapter 13.) Table 12.3 Properties of the W3C links Object Property What It Describes charset Sets or returns the character encoding of the target URL. disabled Sets or returns whether or not the target URL should be disabled. href The entire URL. hreflang Sets or returns the base language of the target URL. id Sets or returns the id of a <link> element. media Sets or returns on what device the document will be displayed. name The name of the <link> element. rel Sets or returns the relationship between the current document and the target URL. rev Sets or returns the relationship between the target URL and the current document. Table 12.4 Properties of the JavaScript links Object Property What It Describes hash The anchor part of the URL (if any). host The hostname port part of the URL. hostname The hostname part of the URL. href The entire URL. pathname The pathname part of the URL. port The port part of the URL. Continues From the Library of WoweBook.Com ptg 420 Chapter 12 • Working with Images (and Links) protocol The protocol part of the URL, including the colon. search The query part of the URL. target The HTML target attribute of the link. EXAMPLE 12.2 <html> <title>Using Links </title></head> <body> <h2>Links and their Properties</h2> <big> 1 <a href="http://search.yahoo.com/bin/search?p=Java Script tutorial"> Search for JavaScript Stuff</a> <p> 2 <a href="http://google.com?" >Go to google</a> </p><p> 3 <a href="http://www.bing.com">Go to bing</a> </p> <script type = "text/javascript"> document.write("<br /><b>This document contains " +document.links.length + " links.<br /></b>"); 4 for (i = 0; i< document.links.length; i++){ 5 document.write("<u>document.links["+i+"]:</u><br />"); 5 document.write("<b>hostname:</b> " +document.links[i].hostname +"<br />"); 6 document.write("<b>href: </b>" +document.links[i].href +"<br />"); 7 document.write("<b>pathname:</b>" +document.links[i].pathname +"<br />"); 8 document.write("<b>port:</b> " +document.links[i].port +"<br />"); 9 document.write("<b>query string:</b> " +document.links[i].search +"<br />"); 10 document.write("<b>protocol:</b> " +document.links[i].protocol +"<br /><br />"); } </script> </big> </body> </html> Table 12.4 Properties of the JavaScript links Object (continued) Property What It Describes From the Library of WoweBook.Com ptg 12.2 Reviewing Links 421 EXPLANATION 1 This link goes to the Yahoo! search engine’s main site and searches for the word “JavaScript tutorial.” Note: The browser inserted a %20 for the space between “JavaScript”and “tutorial”, an example of URL encoding. 2 This link goes to the Google search engine’s main site. 3 This link goes to the Bing search engine’s main site. 4 The size of the links[] array is determined by the length property. It displays the number of links in the document. 5–10 The for loop is used to iterate through the links array and display some of its prop- erties. The output is shown in Figures 12.4 and 12.5. Figure 12.4 Viewing the properties of the links object. From the Library of WoweBook.Com 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 . Properties of the JavaScript links Object Property What It Describes hash The anchor part of the URL (if any). host The hostname port part of the URL. hostname The hostname part of the URL. href. (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 The pathname part of the URL. port The port part of the URL. Continues From the Library of WoweBook.Com ptg 420 Chapter 12 • Working with Images (and Links) protocol The protocol part of the