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...
She was game for a laugh, I can tell you!
How's it done, Francisco?
- 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.
- 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:
loadcache2=new Image(width of your image,height of your image);
<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 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.
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.
- Syndication scripts - promote your website by syndicating its content to other sites. This tutorial shows how.