JavaScript images and rollovers

Objectives

manipulate images using JavaScript
create rollover images using JavaScript
create links that control multiple images

Simple rollover

this rollover changes an image as the mouse pointer moves over it
the "onmouseover" event signals when the mouse pointer has moved over the element
the "onmouseout" event signals when the mouse pointer has moved off the element
the image functions as a link and goes to a different page when clicked

image rollover also used as link - using images array

   <a href="page2.html"
      onmouseover="document.images['rollover'].src='th_musicCat.jpg';"
      onmouseout="document.images['rollover'].src='th_computerCat.jpg';">
   <img src="th_computerCat.jpg" width="100" height="69"
        border="0" id="rollover" alt="cat picture" />
   </a>

image rollover also used as link - using an ID value

   <a href="page2.html"
      onmouseover="document.getElementById('rollover').src='th_musicCat.jpg';"
      onmouseout="document.getElementById('rollover').src='th_computerCat.jpg';">
   <img src="th_computerCat.jpg" width="100" height="69"
        border="0" id="rollover" alt="cat picture" />
   </a>

Simple rollover with preloading

the images can be preloaded into variables in the head element, which will force the browser to load those images before the page starts to display
preloading causes a longer pause before the page starts to display, but helps eliminate pauses caused by having to load an image for the first time when a rollover is triggered
the text has a better implementation where the JavaScript code is moved into an external script

rollover with preloading

   <head>
   <script>
   pic1 = new Image();
   pic1.src = 'th_musicCat.jpg';
   pic2 = new Image();
   pic2.src = 'th_computerCat.jpg';
   </script>
   </head>
   <body>
   <a href="page2.html"
      onmouseover="document.getElementById('rollover').src=pic1.src;"
      onmouseout="document.getElementById('rollover').src=pic2.src;">
   <img src="th_computerCat.jpg" width="100" height="69"
        border="0" id="rollover" alt="cat picture" />
   </a>
   </body>

Multiple rollovers with preloading

having multiple rollovers on a page is a simple extension of having a single rollover
as more rollovers are added, it will make sense to store the images in an array

multiple rollovers

   <head>
   <script>
   pic1 = new Image();
   pic1.src = 'th_musicCat.jpg';
   pic2 = new Image();
   pic2.src = 'th_computerCat.jpg';
   pic3 = new Image();
   pic3.src = 'th_phoneCat.jpg';
   pic4 = new Image();
   pic4.src = 'th_attackCat.jpg';
   </script>
   </head>
   <body>
   <p>
   <a href="page2.html"
      onmouseover="document.getElementById('r1').src=pic1.src;"
      onmouseout="document.getElementById('r1').src=pic2.src;">
   <img src="th_computerCat.jpg" width="100" height="69"
        border="0" id="r1" alt="cat picture" />
   </a>

   <a href="page2.html"
      onmouseover="document.getElementById('r2').src=pic3.src;"
      onmouseout="document.getElementById('r2').src=pic4.src;">
   <img src="th_attackCat.jpg" width="100" height="69"
        border="0" id="r2" alt="cat picture" />
   </a>
   </p>
   </body>

Link rollover changing image

this is pretty much the same as the last example except that the link is now text and it is changing an image located in a different element of the document

link rollover changing image

   <head>
   <script>
   pic1 = new Image();
   pic1.src = 'th_musicCat.jpg';
   pic2 = new Image();
   pic2.src = 'th_computerCat.jpg';
   pic3 = new Image();
   pic3.src = 'th_phoneCat.jpg';
   pic4 = new Image();
   pic4.src = 'th_attackCat.jpg';
   </script>
   </head>
   <body>
   <p><a href="page2.html"
      onmouseover="document.getElementById('r1').src=pic1.src;"
      onmouseout="document.getElementById('r1').src=pic2.src;">Link 1</a></p>
   <p><a href="page2.html"
      onmouseover="document.getElementById('r2').src=pic3.src;"
      onmouseout="document.getElementById('r2').src=pic4.src;">Link 2</a></p>
   <p><img src="th_computerCat.jpg" width="100" height="69"
        border="0" id="r1" alt="cat picture" /></p>
   <p><img src="th_attackCat.jpg" width="100" height="69"
        border="0" id="r2" alt="cat picture" /></p>
   </body>

Multiple links controlling one image

this is a fairly straightforward extension of the basic link-controlled rollover

multiple links controlling one image

   <head>
   <script>
   pic1 = new Image();
   pic1.src = 'th_musicCat.jpg';
   pic2 = new Image();
   pic2.src = 'th_computerCat.jpg';
   pic3 = new Image();
   pic3.src = 'th_phoneCat.jpg';
   pic4 = new Image();
   pic4.src = 'th_attackCat.jpg';
   </script>
   </head>
   <body>
   <p><a href="page2.html"
      onmouseover="document.getElementById('r1').src=pic1.src;">Music</a></p>
   <p><a href="page2.html"
      onmouseover="document.getElementById('r1').src=pic2.src;">Computer</a></p>
   <p><a href="page2.html"
      onmouseover="document.getElementById('r1').src=pic3.src;">Phone</a></p>
   <p><a href="page2.html"
      onmouseover="document.getElementById('r1').src=pic4.src;">Attack</a></p>
   <p><img src="th_computerCat.jpg" width="100" height="69"
        border="0" id="r1" alt="cat picture" /></p>
   </body>

Image link and rollover which also controls another image

this example stores the images in an array
a random image for the first picture is chosen from the array using Math.random
a counter is kept for the second picture and the rollover images are shown in cyclic order from the array
one image acts as both a link and a control for two rollovers - itself and a second image

link doubling as rollover

   <head>
   <script>
   var ctr = 0;
   pic = new Array();
   if (document.images) {
      for (i=0; i<5; pic[i++]=new Image());
      pic[0].src = 'th_musicCat.jpg';
      pic[1].src = 'th_computerCat.jpg';
      pic[2].src = 'th_phoneCat.jpg';
      pic[3].src = 'th_attackCat.jpg';
      pic[4].src = 'th_pets.jpg';
   } else {
      for (i=0; i<5; pic[i++]="");
      document.r1 = document.r2 = "";
   }
   </script>
   </head>
   <body>
   <p><a href="page2.html"
      onmouseover="document.getElementById('r1').src=pic[Math.floor(Math.random()*4)].src;ctr=++ctr>3?0:ctr;document.getElementById('r2').src=pic[ctr].src;"
      onmouseout="document.getElementById('r1').src=pic[4].src;">
   <img src="th_pets.jpg" width="100" height="69" border="0" id="r1" alt="cat picture" /></a></p>
   
   <p><img src="th_pets.jpg" width="100" height="69" border="0" id="r2" alt="cat picture" /></p>
   </body>

Simplifying complex rollovers with a function

this example is the same as the last, except that a function is being used to change the images
using a function to change images allows the creation of quite complex sets of rollovers while keeping the code maintainable

simplifying complex rollovers with a function

   <head>
   <script>
   var ctr = 0;
   pic = new Array();
   for (i=0; i<5; pic[i++]=new Image());
   pic[0].src = 'th_musicCat.jpg';
   pic[1].src = 'th_computerCat.jpg';
   pic[2].src = 'th_phoneCat.jpg';
   pic[3].src = 'th_attackCat.jpg';
   pic[4].src = 'th_pets.jpg';

   function change(item, n) {
      document.getElementById(item).src = pic[n].src;
   }
   </script>
   </head>
   <body>
   <p><a href="page2.html"
      onmouseover="change('r1',Math.floor(Math.random()*4));ctr=++ctr>3?0:ctr;change('r2',ctr);"
      onmouseout="change('r1',4);">
   <img src="th_pets.jpg" width="100" height="69" border="0" id="r1" alt="cat picture" /></a></p>

   <p><img src="th_pets.jpg" width="100" height="69" border="0" id="r2" alt="cat picture" /></p>
   </body>