Try me now!
Theory | In Practice | Quick Recap | Help | Suggestions
When Rectangular Images Won't Do |
Similar effect using Style Sheets
Theory - How Rollovers Work
The essential elements of the rollover break down as follows (in no particular order):
A piece of controlling code, which does most of the hard work. In HTML³ this can either be safely tucked away in the headers of your document by ticking the Rollover code tick box on the Header window, or entered anywhere in the document later on by clicking on the similarly-titled button at the bottom of the Links window.
An image or two - to be absolutely precise you need at least two images of the same size to get HTML³ to do rollovers properly (the image you start with, and a second which is shown when the mouse moves over the original), but if you so wish you could actually use a third which is displayed when the mouse pointer moves away from the image (usually you'd just use the same image you started with though)
The image definition must include a name - in the form <img src="piccy.gif" name="changeme">. This is the part that JS uses to identify the image; if you miss this part off all the rest of the JS code doesn't know which image to change (HTML³ can handle it all for you though)
A link - strictly speaking it's not when the mouse pointer moves over an image that the image changes, it's when the browser sees you're hovering over the link (that just happens to encompass the image) that the JS is activated and the image is changed. A PC trick is to link to "#" to get the rollover to work without actually having to link to anything (although Fresco will complain about trying to move to a non-existent label if you actually click on this link). Conversely, the link doesn't actually have to be around the image to work - I designed a site were the rollover was also activated when the relevant textual link at the bottom of the page was moved over, and by adding the onMouseOver code manually into a client-side image map definition a third way of lighting up that toolbar was introduced when a map (in both senses of the word - the imagemap was over a map of the British Isles!) was moved over; see http://www.notts-rspb.org.uk/.
Although this last is not a necessity, rollovers would look a little silly without the final element - pre-cacheing. This is yet another chunk of JS code which loads the images into the cache as the rest of the page loads - so that when you move over the link, you don't have to wait for the alternative image to download before it is displayed.
Put all of these together and you have quite a complex sequence of code, combining two JS programs (control code and pre-cacher), an image definition tag, and a rather large link tag that's been bloated with extra JS chunks (possibly including an optional extra chunk to write a message into the browser's status bar). However, with HTML³ you can achieve all of this with maybe four drag-and-drops.
Firstly, you need that controlling rollover code somewhere in the document - either output along with the rest of the header code or by pressing the button at the bottom of the links window as described above.
Secondly, open the Images window (or just drop an image onto the side bar) - all of the relevant details should be filled in for you, including the name section; however, you must make sure that the tick box next to the Name for JS effects section is ticked. The name (as with the alt text) will be based on the image's file name, which is handy when you come to drop images onto the link window to do the rest of the necessary as that window uses the same name assignment code! Names are best left in lower case, and it appears that you shouldn't use numbers as the first character. If you're not going to link this image to the controlling link you can click OK now, otherwise move straight to the next phase.
Next, open the Links window; do whatever you need to do to get a link, such as drop the file you want to link to onto the top part of this window, type in a URL or choose one from the database. If you're doing standard rollovers and so you want to link to the image you've just set up in the image window then don't worry about what text you're linking to - simply tick the Get data from image window tickbox and the link will be made around your image; conversely if you're lighting up an image from a text link then make sure this box is unticked and type in your text.
Now we're down to the nitty-gritty: the section headed by a tickbox marked JS: Rollover images. Make sure this is ticked, otherwise all this work is for nothing. Image name is the name= attribute that you should have set back in the Image window, and the Original SRC: is the image file that you want to use to set the rollover back to "normal" - although as I mentioned before this can actually be something other than the original image. To fill in both of these boxes easily simply drop your original image file onto this area; or, if you have already entered the HTML to display the image (i.e. you're not using the Get data from image window trick) you can use the drop-down menu button to access the database of the last 30 images used. Finally you must specify the image you want to Replace the original with - again you can drop the file onto this section, or you can swap data with the Original text box if the filenames are similar.
Now all that remains is to click on the OK button - you might want to set up the JS and Title link descriptions first though - and watch as reams of text is typed out for you. And that's it!
Just to go over that again, or in case you've skipped the long boring part to get to the easy instructions, simply do the following:
Okay, well, I spent several months honing this code to make sure it's compatible with, or at least doesn't generate errors on, all the browsers I've got access to - that's several flavours of Microsoft Internet Explorer, Netscape 4, and all the usual Acorn suspects. So, hopefully this makes it a little easier to track down the real culprit:
- Make sure the main rollover code is somewhere in the page (preferably in the header)
- Drop an image onto the Image window; make sure the Name for JS effects box is ticked
- In the Links window, type in a URL or drop the destination HTML file onto the top half of the window
- Switch on Get data from image window
- Switch on JS:Rollover images
- Drop your original image onto the top half of this rollover section; drop the image to change to on the bottom part.
- Check your JS description is how you want it, and press the OK button.
How to use this code for the betterment of mankind:
- Doesn't work anywhere; no error given
Probably this is due to not having the right filenames for the images; make sure you have Make dragged files relative switched on in both the Images and Links windows, and you've dropped the HTML page you're working on, or the directory containing it (or will contain it), or just a HTML file from within the same directory, on to the HTML³ iconbar icon.
- Doesn't work anywhere; some browsers give some error about something not being defined
This is probably because there is no name= attribute in the image tag
- Everything looks fine until I click on OK, when it doesn't output the code
You have to make sure both the Original and Replace filename boxes are filled in, and most important of all that you've actually remembered to switch on the JS:Rollover images tickbox in the links window - when this is switched off it doesn't grey out the rollover section so that you can drop things on that section and have them differentiated from other files dragged to the links window.
- It didn't work in browser X
- Anything else
If you've checked and double-checked the above, send me the code, the graphics and a description of the conditions (like, which browser you're using etc.) and I'll see what I can do. Note however that it doesn't like images with numbers as the first digit of the name, and it doesn't like images called "roll" (as it defines the image variables as the same name as the rolling procedures).
- Pre-cacheing - don't have the rollover control code in the header, delete the link and img tags from your page, just get the browser to use the pre-cacheing part to load images ahead of time. On the ArgoNet pages this was used in the "slideshow" section of the products pages - the first page loads, but also loads the large advertising image for the next slideshow page, and going to that page instantly displays the advert but also loads the image for the next page while you're not looking, and so on so the transition between pages is pretty seamless.
- Text that lights up - draw your original images as a set of buttons that have text on them in ArtWorks/Draw/Vantage/DrawWorks, and then clone these and have a duplicate set but with a different, brighter outline colour to the text. Then when you move over the buttons the text appears to light up. You could also change the text fill colour, or get fancy and blend the lighter edges to the background colour for a neon-style effect.
- Modify the code so moving over lots of icons only changes one central graphic into several different images. It's easy, although Rich Foster managed to mess it up even when it's handed to him on a plate!
When Rectangular Images Won't Do
In most browsers you'll see gaps between the images due to the number of linefeeds I've used to keep the code readable; this is left intentionally like that so you can see where one image ends and another begins. The code follows, or check the source of this page for the working version:
alt="Left" width="97" height="45" border="0" name="left"></a>
alt="Mid" width="27" height="45" border="0"
alt="Right" width="98" height="45" border="0" name="right"></a>
<area shape="default" nohref>
Similar effect to Rollovers using DHTML
Basically this sets a table cell to have a green background (the bgcolor version is for non-style sheet browsers, and the style version sets things up for the CSS to work). Then when you move over the cell the onmouseover event is triggered, causing the background colour to change. Move the mouse pointer away and the onmouseout event changes the colour back to the original (or to whatever you want). You should also be able to modify this code to change a cell background image. If you've included a hover colour in your header then links inside this cell will also change colour when the mouse pointer moves over them; the two together gives a similar effect to having graphical buttons changing as the mouse pointer goes over them, but for a smaller download footprint - a little text instead of downloading two images. However, currently this trick doesn't work on any RISC OS browser, because none of them do DHTML; then again it doesn't generate any errors, so if you want a trick to add to a site that gets a lot of PC using visitors but would like it to cause the minimum possible inconvenience to RISC OS users you could give it a whirl.
HTML³: © Richard Goodwin 1997-2002