HTML3
Sections
  Home
    Intro
    History
    FAQ

  Choices
  Side bar

  Styles
  Headers
  Footers
  Effects
  Chars
  Address
  Links
  Images
    Rollovers
  Tables
  Forms
  SSI
  Plugins
Resources
  Colour editing
  Image creation
  JS Tricks
  Servers
  Tokens
  Latin-1
|
|
HTML³: JavaScript Rollovers |
-
-
|

JavaScript Rollovers

JavaScript rollovers, or "cool lighty-uppy buttons" as I have been known to call them in the past, are images that change when a mouse pointer moves over them; they comprise of a few simple pieces of JS which combine both elements of the Links and Image windows, with just a little piece of the Header window thrown in for good measure.

Rollover image

Try me now!


Regular Sections
Theory | In Practice | Quick Recap | Help | Suggestions

Advanced Stuff
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.

In practice - how to use HTML³ for rollovers

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!

Quick recap

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:
  • 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.

Help! It didn't work

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:
  • 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
    This code will work in the current versions of Internet Explorer, Netscape, Fresco JS and Webster XL. The big trick came in getting it to "work" with earlier versions of IE - there were two version 3.02s (a regular release and a version for ISP rebadging), one which had little or no JS, and the other that had more JS but would generate an error; there is no way to tell the two apart from a practical viewpoint. This rollover code will simply not activate in IE 3; no rollovers, but no errors either. With Fresco, make sure you're using the JS version (there's no difference in the appearance of these two versions at the time of writing, apart from the JS version is noticeably slower at rendering graphics). With Webster XL, very early JS-enabled versions would not handle the interpretation needed to do generic rollover code, but has been able to handle it for some time - if your version ignores the rollover code from HTML³ simply upgrade (although Webster XL upgrades should come automatically via email on a regular basis to registered users, so you're not likely to have missed them - are you?). Browse and ArcWeb cannot now, and without a miracle probably never will be able to, handle any form of JavaScript.
  • 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).

Suggestions

How to use this code for the betterment of mankind:

  • 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.

  • At the time of writing I've never actually done this myself, but thought it was so cool when I saw it on the id Software site about the time Quake II came out - design a non-lit up version of a button, and a lit-up version; the original image is the non-lit version; the image used when you move over this is a once-only (non-repeating) animated GIF of the button flipping over from dark version to light version; then instead of going back to the original version straight off, the return graphic is a once-only animated GIF of the button flipping back from light to dark (just use the same graphics for the light-up but in reverse); this is a proper JavaScript rollover!

  • 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! Smiley
    What, you want more? Click here for some JavaScript tricks explained


Advanced Stuff

When Rectangular Images Won't Do

Someone asked me recently how to do javascript rollovers when the image can't be a straight rectangle - perhaps because there's some overlap such as with a bar made up of a series of parallelograms.

So that you don't have to have multiple copies of the whole image in memory, the way I would do this is to chop the image up. Do this so the non-overlapping parts are an image for each part, and the overlapping parts are separate images. So to take the example of a couple of buttons on a bar, you'd have two main button parts, both of which can be on or off, and a bit in the middle which can be off, on to one side, or on to the other side. When you move over a button, you have to modify the code to not only light up that button, but also the middle part; and of course you have to reset both when you move off the button. The middle part is a little more tricky - you'll have to set up a client-side image map with the javascript in the definitions of the hot areas.

There's nothing like an example to illustrate a tricky point, so here's some crude javascript to do what I've described above:

Left Mid Right

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:

<a href="javascript:void(0)"
  onMouseOver="document.left.src='left-on.gif';
               document.mid.src='mid-left-on.gif'"
  onMouseOut="document.left.src='left-off.gif';
              document.mid.src='mid-off.gif'">
<img src="left-off.gif"
  alt="Left" width="97" height="45" border="0" name="left"></a>
<a href="javascript:void(0)">
<img src="mid-off.gif"
   alt="Mid" width="27" height="45" border="0"
   name="mid" usemap="#clientmap"></a>
<a href="javascript:void(0)"
  onMouseOver="document.right.src='right-on.gif';
               document.mid.src='mid-right-on.gif'"
  onMouseOut="document.right.src='right-off.gif';
              document.mid.src='mid-off.gif'">
<img src="right-off.gif"
  alt="Right" width="98" height="45" border="0" name="right"></a>

<map name="clientmap">
<area shape="poly"
  coords="2,39,0,44,0,0,26,0,26,3"
  href="javascript:void(0)"
  onMouseOver="document.left.src='left-on.gif';
               document.mid.src='mid-left-on.gif'"
  onMouseOut="document.left.src='left-off.gif';
              document.mid.src='mid-off'">
<area shape="poly"
  coords="0,44,2,38,26,3,26,44"
  href="javascript:void(0)"
  onMouseOver="document.right.src='right-on.gif'
               document.mid.src='mid-right-on.gif'"
  onMouseOut="document.right.src='right-off.gif';
              document.mid.src='mid-off.gif'">
<area shape="default" nohref>
</map>

Fo more than two buttons you might need to have three images changing at the same time - a slanted section at each side of the button - and there's no pre-caching, but you should get the idea. The client side image map with javascript in it might not work in all browsers, but it certainly works in Fresco and IE, and at least the main part of the button will respond to mouseovers properly.

Similar effect to Rollovers using DHTML

I've since found a way doing somethig very similar to rollovers using tables and a combination of style sheet (CSS) and JavaScript style commands in a DHTML browser:

<td
bgcolor="#CCCCFF"
style="background-color: #CCCCFF"
onmouseover="this.style.backgroundColor='#9999FF';"
onmouseout="this.style.backgroundColor='#CCCCFF';">

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.

Test:

This page Links Index

HTML³: © Richard Goodwin 1997-2002

|