1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script language="javascript" type="text/javascript"> window.onload = initPage; function initPage(){ setLinks(); } function setLinks(){ if( document.getElementById && document.getElementsByTagName ){ if( document.getElementById( 'headlamp_assembly' ) ){ var table = document.getElementById( 'headlamp_assembly' ); var links = table.getElementsByTagName( 'a' ); for( var i=0; i < links.length; i++ ){ links[i].onclick = function(){ swapImage(this.title); return false; }; } } } } function swapImage(filename){ var image = document.getElementById("test"); image.src = "images/headlamp_assembly/" + filename + ".jpg"; } </script> </head> <body> <!-- START CONTENT AREA --> <h1>Hideaway Headlight Assembly</h1> <div style="width: 252px; float: left"> <table id="headlamp_assembly" width="250px"> <tr><td><a href="images/headlamp_assembly/left1.jpg" title="left1"><img src="images/headlamp_assembly/left1_tn.jpg" /></a></td><td><a href="images/headlamp_assembly/right1.jpg" title="right1"><img src="images/headlamp_assembly/right1_tn.jpg" /></a></td></tr> <tr><td><a href="images/headlamp_assembly/left2.jpg" title="left2"><img src="images/headlamp_assembly/left2_tn.jpg" /></a></td><td><a href="images/headlamp_assembly/right2.jpg" title="right2"><img src="images/headlamp_assembly/right2_tn.jpg" /></a></td></tr> <tr><td><a href="images/headlamp_assembly/left3.jpg" title="left3"><img src="images/headlamp_assembly/left3_tn.jpg" /></a></td><td><a href="images/headlamp_assembly/right3.jpg" title="right3"><img src="images/headlamp_assembly/right3_tn.jpg" /></a></td></tr> <tr><td><a href="images/headlamp_assembly/left4.jpg" title="left4"><img src="images/headlamp_assembly/left4_tn.jpg" /></a></td><td><a href="images/headlamp_assembly/right4.jpg" title="right4"><img src="images/headlamp_assembly/right4_tn.jpg" /></a></td></tr> </table> </div> <div style="width: 300px; float: left"> <img src="" id="test" /> </div> <!-- END CONTENT AREA--> </body> </html>