Image Rollover

Page 1  
Page 2  
Page 3  
Page 4  


Just Discovered  

To set up the image or link rollover effect

  • You need a function with an array of images,
  • You need to create the innerHTML from the load area (the div tag),
  • You need to change it to the new image index (passed as a parameter).
  • include a body onload event since there is nothing in the div at startup.
  • include a table (optional) for presentation.
See the code below:

function changeImage(loadarea, imgindex){ var imagesArray=new Array('../images/Laura_unfinished_01_m.jpg', '../images/Laura_unfinished_02_m.jpg', '../images/Laura_unfinished_03_m.jpg', '../images/Laura_unfinished_04_m.jpg', '../images/Laura_finished_01_m.jpg' ) var imgobj=document.getElementById(loadarea) var newHTML = '<img src="' ; newHTML += imagesArray[imgindex] ; newHTML += '" border="0">' ; imgobj.innerHTML = newHTML } . . . <body onload="javascript:changeImage('imgLoadArea', 0)"> . . . <table border="0" width="100%" cellspacing="0" cellpadding="5px" valign=top> <tr> <td width="15%" valign=top> <a href="#" class="BodyLink" onMouseover="changeImage('imgLoadArea', 0)"> Page&nbsp;1&nbsp;&nbsp; </a><br> <a href="#" class="BodyLink" onMouseover="changeImage('imgLoadArea', 1)"> Page&nbsp;2&nbsp;&nbsp; </a><br> <a href="#" class="BodyLink" onMouseover="changeImage('imgLoadArea', 2)"> Page&nbsp;3&nbsp;&nbsp; </a><br> <a href="#" class="BodyLink" onMouseover="changeImage('imgLoadArea', 3)"> Page&nbsp;4&nbsp;&nbsp; </a><br><br><br> <a href="#" class="BodyLink" onMouseover="changeImage('imgLoadArea', 4)"> Just Discovered&nbsp;&nbsp; </a> </td> <td width="45%" valign=top> <!-- --> <div id="imgLoadArea" style="width:370px;height:450px"></div> <!-- --> </td> </tr> </table> . . .
back