Simple Image Rollovers
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 In other words, the id attribute of the <img> tag is naming the “space”, not the image.
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’);”>
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.
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 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.