Links are fundamental to the Web. They get you where you want to go, and often take you so far away that you forgot where you were when you started. In fact, Web crawlers are programs that use links to move all over the Internet. HTML hypertext links are usually created by assigning a Web address or a filename to the HTML <a href> tag, for example: <a href="URL address ">Go Home </a> 11.4.1 JavaScript URLsWith JavaScript, you can also assign a function to the <a href> tag that will be launched when the user clicks his mouse on the link. For example, <a href="javascript: function_name(arguments);"> Do Something </a> or, to use an event handler with a link (see Chapter 12, "Handling Events"): <a href=javascript: onClick="return handler(arguments)" > 11.4.2 The links ObjectThe links object is a property of the document object and gives you access to the hypertext links that have been loaded into a document. It corresponds to the HTML <a href> tag. As each HTML form is a JavaScript 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 Table 11.23. [5] There are no methods common to both Netscape Navigator and Internet Explorer for the links object.
A links object contains a URL, similar to the window's location object, and shares the same properties. See "The location Object" on page 244. There are nine events that can be triggered by a link: onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp, onMouseOver , and onMouseOut . (For details, see Chapter 12, "Handling Events.") Table 11.23. Properties of the links object.
Example 11.37<html><title>Using Links </title> </head> <h2>Links and their Properties</h2> <body> 1 <a href="http://search.yahoo.com/bin/search?p=javascript"> Search for JavaScript Stuff</a> <p> 2 <a href="http://google.com" >Go to Google</a> <p> Click here for Yahoo <br> 3 <a href="http://www.yahoo.com"> <img src="yahoo.bmp"> </a> <script language = "JavaScript"> 4 document.write("<br><b>This document contains " + document.links.length + " links.<br></b>"); 5 for (i = 0; i< document.links.length; i++){ document.write("<u>document.links["+i+"]:</u><br>"); 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:</b> " + document.links[i].search +"<br>"); 10 document.write("<b>protocol:</b> " + document.links[i].protocol +"<br><br>"); } </script> </body> </html> EXPLANATION
Example 11.38<html><title>Using Links </title> <head> 1 <map name="my_image_map"> 2 <area shape="rect" href="union4.jpg" coords="157,117,287,203"> <area shape="rect" href="union1.jpg" coords="10,12,134,96"> <area shape="rect" href="union2.jpg" coords="171,12,286,91"> <area shape="rect" href="union3.jpg" coords="5,118,132,201"> <area shape="default" href="christmas.jpg"> 3 </map> </head> <body> <h2>Christmas on Union Square</h2> 4 <img src="union1.jpg" width=300 height=240 5 usemap="#my_image_map"> <script language="JavaScript"> var lstr = "<ul>"; 6 for ( var i = 0; i < document.links.length ; i++ ){ lstr += "<li><a href=" + document.links[i].href ; lstr += ">link[" + i + "] </a>\n"; } 7 lstr += "</ul>"; 8 document.open(); 9 document.write(lstr); 10 document.close(); </script> </body> </html> EXPLANATION
11.4.3 The anchor ObjectAn anchor is a place in an HTML document that can be reached with a link. Anchors allow you to access specific parts of a Web page. JavaScript 1.1 introduced the anchor object, which represents an HTML <a> element. The anchors object is a property of the document object and gives you access to the links that have been loaded into a document. As each HTML hypertext link is a JavaScript element of the links[] array, and each image is assigned to the images[] array, so each anchor is assigned to the links[] array in the order in which the anchor appears within the document. The first anchor would be represented as document.anchors[0] . The only standard property defined for the anchor object is the name property. Any other properties found with this object are browser specific and not supported by the W3C DOM standard. There are no methods common to both Netscape Navigator and Internet Explorer for the anchor object. 11.4.4 The embeds ObjectThe embeds object (Navigator 3.0), like the forms and image objects, creates an array representing each embedded object in a page, such as a movie, spreadsheet, or audio clip, in the order the object is found in the page. The first embedded object is assigned to embeds[0] , the second to embeds[1] , and so on. You can also index the embeds[] array by string; just use the name of the embedded object in quotes. In the following example, when the page is loaded, the embedded sound clip will automatically start playing, and will be stopped if the user presses the link, "Stop that noise!". The assumption is that you are using Netscape Navigator with the LiveAudio plug-in installed. Not all audio plug-ins support .wav files. It is more likely that you have a newer version of Netscape or are using IE or Opera, in which case you are probably using RealPlayer by RealNetworks or Microsoft's Windows Media Player. The example is just a demonstration of how the embeds object is used in JavaScript. Example 11.39<html><head> <script language="JavaScript"> 1 function playme(){ 2 if (document.embeds){ 3 if( navigator.appName == "Netscape" ) //document.embeds[0].play(); 4 document.classical.play(); } else{ 5 document.embeds[0].run(); } } 6 function stopSound(){ document.classical.stop(); } </script> </head> 7 <body onLoad="playme();" bgcolor="green" link="white"> <center> <font face="arial" size=+1 color="white"> <h2>Beethoven's 5th Symphony Playing...</h2> 8 <embed src="Beeth5th.wav" name="classical" hidden=true <!-- hide Live Audio's control panel --> loop=false volume=100 autostart=true> 9 <a href="javascript:stopSound()">Stop that noise!</a> <br> <img src="noteserver.jpg" border="2" width=500 height=200> </body></html> EXPLANATION
Figure 11.55. Plays the embedded .wav file until it is finished or the user presses the link.
Figure 11.56. The stop() method isn't supported in IE. The music plays until the clip finishes.
|