JS Image Rollover/Mouseover
Step by Step

(Note: It's always a good idea to save your original png image for editing later)
(Note2: The terms are usually out and over (out when someone isn't over..))
(Note3: Yes, there are other ways to do this, but this is a good example of the basics)

Final Product: image rollover/mouseover

1. Create folder - rollover

2. Fireworks - homeout and homeover (creating the original and rollover images)

• Open Fireworks
• File - New, and create 150x50 image with white background
• Use the rounded rectangle tool and create a rounded rectangle that fills the canvas (Blue background)
• Use the text tool to add the word Home to the image (Lucida Sans, size: 32, color: white)
• Use the align "window" to align Home to the center/middle (make sure it's selected before aligning)
• Save as homeout.png
• Export as homeout.gif

• Save homeout.png as homeover.png
• Change rectangle color to fuchsia (use the select tool, click on the rectangle, change the color)
• Save
• Export as homeover.gif
• Close any open images

3. Fireworks - secondout and secondover (creating the original and rollover images)

• File - Open and open homeout.png
• Save as secondout.png
• Use the text tool and change the text to Second
• Save
• Export as secondout.gif

• Save secondout.png as secondover.png
• Change rectangle color to fuchsia
• Save
• Export as secondover.gif
• Close any open images

4. DreamWeaver - create index.htm/second.htm and insert image object

• File - New
• Save as index.htm in the rollover folder
• Insert Image Object - Rollover Image
  • Name: Home
  • Original Image: homeout.gif
  • Rollover Image: homeover.gif
  • (Make sure preload is checked)
  • Alt: Link to Homepage
  • URL: index.htm
• Click ok, Save, and Test rollover in browsers

• Repeat Insert Image Object but with secondout.gif, secondover.gif and url to second.htm

• Save index.htm
• Save index.htm AS second.htm
• Add h1 with the words SECOND Page
• Save
• Test pages in browsers