DIGITAL
ARTS 1
Mr. Skocko • Room 246 •
593-5446 • Digital Arts Home
In this lesson you will learn how to use Dreamweaver to create and insert javascript rollovers from your .jpg files (Note: the same process is used to create.gif rollovers)
To insert a single image rather than a rollover, see this tutorial
Double-click on 01.html in your Site Window to open it
Click on the Insert Rollover Image icon (or navigate to Insert > Interactive Images > Rollover Image)
Just a note that the Insert Image command is covered in this tutorial
After clicking the Insert Rollover Image icon, you get this dialog box
Click Browse... to locate your Original Image
Navigate to your images folder (in your art folder) and Open your original image
Click Browse... to locate your Rollover Image
Your rollover is easy to locate because you named it correctly in this tutorial, right?
Provide the Alternate Text (for the sight-impaired or those surfing with images turned off) and click Browse... to designate the linked page
Select the next file in your list and hit Return
When complete, hit Return and let dreamweaver do all the coding for you
Your image will look terrible (but this is just a visual cue to let you know it's a rollover)
Click once on the image and the image reverts to its vibrant self
Your Property Inspector reflects the settings you made in the Insert Rollover Image dialog box
Unlike standard images, you cannot reset the link in the Property Inspector without destroying the javascript created via the Insert Rollover Image dialog box
To change the link you must repeat the process
Congratulations! You now know how to insert rollovers into HTML documents (thanks to Dreamweaver)
Repeat as necessary then see the how to insert stand-alone images tutorial