It's Sean!

UK freelance journalist, author
and copywriter Sean McManus

Printed from © Sean McManus.
Home > Articles > Webmaster resources > Javascript examples > Javascript rollovers

If Goya had learned Javascript

Goya self-portrait Hello! I'm Francisco de Goya. You might remember me from such galleries as the Museo del Prado in Madrid, where I'm pleased to say several of my works now hang.

Academics haven't overlooked the similarity between La Maja Vestida and La Maja Desnuda, which they've hung side-by-side to hammer the point home. But very few realise this was my first attempt at a flick-book animation. Work was stalled because I couldn't work out how to switch rapidly between two oil paintings about the size of a bedroom wall. Now I have.

And I'm going to share my secret with you.

Roll your mouse over the picture below to see what I'm getting at...

Goya's painting of La Maja Vestida switching to La Maja Desnuda on mouse overd

She was game for a laugh, I can tell you!

How's it done, Francisco?

Well, it's all done thanks to the magic of Javascript rollovers. Allow me to elaborate:

  1. Optimise: First you create your images and optimise them. Because you need the images to switch instantaneously, it's important they download as quickly as possible. Optimise your images with Netmechanic's tool.
  2. Cache: Now you need to cache the hidden picture. Ever been to those websites where you roll your mouse across the navbar and only some of the buttons change some of the time? That's usually because the browser didn't start downloading the image until your mouse went over it, and your mouse wasn't there long enough to finish. Additionally, the delay in the time taken to download spoils the illusion for anyone not using broadband. So, you need to load the pictures that aren't on screen at the start straight away and store them in the cache for instant display when they're needed. Here's the code that does the job: <script language="javascript">
    function cache()
    loadcache=new Image(455,207);
    loadcache2=new Image(width of your image,height of your image);
    You need to paste that code between the <head> tags in your document. The first two lines starting with loadcache are used here to cache my image. The second two are there just to show you how to add more. To get this routine to work its magic, you need to call it from your BODY tag like this: <BODY onLoad="cache();">
  3. Add your image tags: Now for the trickery. You add some Javascript to your image tag so when the mouse rolls over the image, the picture is changed and when the mouse rolls off of the image, it's changed back to the original image again. Here's the actual code I've used here: <IMG SRC="maja2crop.jpg" BORDER=0 width=455 height=207 name="maja" onMouseOver="document.maja.src='majanudecrop.jpg';" onMouseOut="document.maja.src='maja2crop.jpg';" onfocus="document.maja.src='majanudecrop.jpg';" onblur="document.maja.src='maja2crop.jpg';"> Here's some code I've made more generic for you to edit:

    <IMG SRC="youroriginalimage.jpg" BORDER=0 width=yourimagewidth height=yourimageheight name="yourimagename" onMouseOver="document.yourimagename.src='yourreplacementimage.jpg';" onMouseOut="document.yourimagename.src='youroriginalimage.jpg';" onfocus="document.yourimagename.src='yourreplacementimage.jpg';" onblur="document.yourimagename.src='youroriginalimage.jpg';">

What else can I use it for?

The Javascript rollover has been widely used for image buttons on navbars in the past. Using stylesheets, you can make links highlight (or even change their appearance and background image) when the mouse goes over them, so the use of Javascript rollovers for navbars is fading. It imposes a much greater download burden.

The technique is still useful for examples like this, where you want people to be able to contrast two different images easily. You could use it to highlight different types of map data, or to show different lines on a graph. Or you could just use it to remove a young lady's clothing, as I have here.

Javascript can be difficult for people using assistive devices to access, so it's important to build redundancy into the site with text descriptions or alt tags as appropriate.

It can be a major usability barrier for everyone if essential information is only displayed when the mouse rolls over an image - for example if links don't make sense until then. That makes me feel like painting something angry.


Labelled with ICRA link opens in new window

Francisco de Goya died in 1828 leaving behind a legacy of widely-admired paintings that has long outlived him. His experiments with Javascript are less well known.

Related links