Creating
Rollovers
A rollover is an image which changes in some way when the user's mouse
pointer passes over it. It is most often used as an interactive device
as part of a site's navigation buttons. Stereotypically the button may
appear to light up or squash to indicate a link. If the user chooses not
to click the link, the first image is usually restored once the mouse
pointer has passed over it.
Dreamweaver is far more than just a tool for producing html (hyper text markup language). Rollovers use JavaScript and Dreamweaver makes this possible for non-programmers too.
To create a rollover you will first need a pair of images in .gif, .jpg or .png format. They should be the same width and height (measured in pixels), or else JavaScript will resize the second image to match the first, even if this distorts the second image beyond recognition. Then choose 'Insert Rollover Image' from halfway down the Insert menu, or just click on the symbol for this from the Common panel of the Objects palette, or even drag it to where you want the rollover to be inserted.
Original Image: Then fill the Original Image box by browsing for the image that you want displayed when the page is first displayed. This original version is also called the 'off', the 'up' or the 'static' state.
Image Name: The JavaScript requires that each time an image is used on your page it has a unique name, so Dreamweaver conveniently names it for you as Image 1 - you can rename this now or from the Properties Inspector later, or just leave it be.
Rollover Image: Next browse for your Rollover Image. This is your 'on' or 'over' state.
Link or When clicked, go to URL: (URL = Uniform Resource Locator, the official term for a web page address). The JavaScript is attached to a web link associated with the first image - even if you just want a graphic effect, there must be a link. This can be an absolute address such as http://www.jednet.co.uk/jamie which can link to an external page on someone else's site or a relative link to within your own site. Dreamweaver will put in a # hash symbol as a blind link for you if you do not specify a real link of your own. You can go back and change this link afterwards from the Properties Inspector, but if you simply delete the # hash and leave the link empty your JavaScript will break. (Some American authors call the # hash sign 'pound').
Preload Rollover Image: Usually you will want to preload your second image to give a good response. There is a special case when this may not apply. The rollover image does not have to be a simple unmoving picture - it can be an animated gif. If this is set to loop then it can be preloaded. If set to play only once or a few times, it will have likely stopped moving long before anyone invokes it, so preloading must then be unchecked. This is also true if it relates closely to the original image and must be seen from frame 1 rather than viewed from any point in the animation.
You cannot preview your rollover in Dreamweaver so press function key 12 (F12) to switch into your browser. When you come back to Dreamweaver press F10 to view the source code and see how much JavaScript has been written for you.
Dreamweaver 3 takes rollovers to the next level with a function which will create an entire Navigation Bar. This can even automate the production of a table into which the buttons will be ordered. It allows each of the buttons to show a different look for up to FOUR states. In addition to the 'up' and 'over' states used for simple rollovers as detailed above, it allows for extra images to represent 'down' for when the user has their mouse button depressed and the rare 'over while down' when the pointer is over the image after it has been clicked. Navigation Bars are particularly useful when put into a frameset.