Our News

o      A simple image rollover is an effect which happens when the mouse appears over an image (usually a linked button) on the page. The original image is replaced by another of equal size, usually giving the effect that the button is highlighted in some way.

o      With what we have learned so far, we already have the ability to create a simple image rollover effect. All that remains is to clarify the particulars of the process:

o      The page is loaded and the original image appears on the page as specified by the <img> tag’s src attribute.

o     The mouse moves offer the image and the alternative image is loaded into place.

o     The mouse leaves the image and the original image is loaded back.

o      As you may have realised, we are going to use JavaScript to alter the src attribute of the image tag. The best way to think of this is to picture the <img> tag as simply a space on the page into which an image file can be loaded. The src attribute tells the browser which image to load into the space, and so if we change that value, the image will be changed.

o      In other words, the id attribute of the <img> tag is naming the “space”, not the image.

o       Now, in order to alter the src attribute with JavaScript, we need to tell JavaScript which image “space” we want to alter. We use the id attribute along with the getElementById() method from the last chapter to do this:

 button_img =document.getElementById(“button”);

           button_img.src = “new_image.jpg”;

      o   We can directly insert this code into the image’s event handler:

 <img src=”old.jpg” id=”button” onmouseover=”document.getElementById(‘button’).src’new.jpg’;”>

  Note that this code is suddenly very convoluted. There are two immediate potential solutions. The first is to define a function:

            function swap_image( id, new_image )

          {

           img = document.getElementById(id); 

           img.src = new_image;

          }

            …

           <img src=”old.jpg” id=”button” onmouseover=”swap_image(‘button’, ‘new.jpg’);”>

o       This is a much cleaner solution, and more importantly we can use this for any images on the page, simply by changing the arguments of our function call. We can also use the function to achieve the “swap back” functionality: 

            … 

      <img src=”old.jpg” id=”button” onmouseover= ”swap_image(‘button’, ‘new.jpg’);”onmouseout=”swap_image(‘button’, ‘old.jpg’);”>

o       We can go even further in “cleaning up” our code, though. Because the event handler is being used to alter the object which is experiencing the event (ie, the mouse is moving over the image tag that we are trying to change), we can use the “automagic” JavaScript object this to perform the operation: 

     function swap_image( img, new_image )

  {

    img.src = new_image;

  }

   … 

   <img src=”old.jpg” id=”button” onmouseover=”swap_image(this, ‘new.jpg’);”>

o       Note a couple of things. Firstly, this has no quotes around it – we are using it like a variable name. Secondly, our function now uses the first argument directly, instead of using it to get the relevant object from the page. We can do that because this is actually an object – it’s an object that takes on the properties and methods of whatever object it is called from, in this case, it becomes equivalent to

      document.getElementById(‘button’), although is obviously much shorter!

o      Using this has some limitations. For example, if we wanted to change the src attribute of any other image on the page when the mouse moved over “button”, we would be unable to use this, and hence would have to define another function that could take an id as its argument and get the relevant object that way.

Project

o      Copy the folder called buttons from the network drive to your project folder. o Open your previous project file, and save it under the name chapter_23.html. o Clear all JavaScript code from your script tags.

o     Ensure that you have a script element in the head area of your document, and none in the body area.

o      Within the body area of your page, create a paragraph containing six image elements. Set the src attributes of the images to load the following files in your copied buttons folder, and give each a sensible id:

o     contacts.jpg o   home.jpg o   people.jpg o   products.jpg o  quotes.jpg o  whatsnew.jpg

o      Create a JavaScript function in the head area script element that takes two arguments – an id and a file name. It should alter the src property of the appropriate image object to the file name given.

o     Use this function to swap the src attribute of the contacts button to contactsover.jpg when the mouse moves over the image.

o   Once you have this working, update the remaining five images with event handlers to swap their src attributes to their appropriate “over” image.

o      Add event handlers to all six images to ensure that they return to their original state when the mouse is moved away from them. Check your work in your browser

o     Add a new paragraph above the previous one, and add an <img> tag to it to containing the file rocollogo.jpg from the images folder.

o      Add a text link to a new paragraph between the two paragraphs. The link should be a “dummy” link (ie use “#” as its href attribute value), but when the mouse moves over it, the image above it should change to show rocollogo.gif.

o      Moving the mouse away from the text link should return the logo to its previous state.

o     Check your work in your browser.