This document discusses JavaScript rollovers using animated GIF images. It provides instructions for creating a basic image rollover using JavaScript to swap images on mouseover. Students are then asked to work in groups to create a website with 4 pages that uses animated GIF rollovers across 4 states - up, over, down, and over while down - for a navigation scheme. The project involves forming groups, submitting a description by next week, working on the group projects over the next two weeks, and presenting completed projects on February 23rd. Homework due February 16th is to create an individual page with a GIF rollover in Dreamweaver and continue working on group projects.
7. Rollover Images
• Using JavaScript in a Web page, you
can detect when a user has placed
his or her mouse over an element
• Applying this to an image, when the
mouse is detected the script will
show a new image
8. DOM - Document Object
Model
• Rollovers use JavaScript and the
DOM (Document Object Model)
• DOM allows us to identify and
manipulate any element on a Web
page
17. Button States
• Up – Appears when the page first loads,
the default image
• Over – Appears when the mouse moves
over the image
• Down – Appears after the image has
been clicked, a “pressed” state
• Over While Down – Appears when the
mouse moves over the image in the
Down state
20. Group projects
• Create a website with at least 4 web pages
• Devise a navigation scheme for the website
• Use animated rollovers
• Use all of the 4 states:
‣ Up (static image)
‣ Over (animated)
‣ Down (static image)
‣ Over While Down (animated)
• Create one page per navigation item to demonstrate
how it works
22. Group Project Deadlines
• Due next week:
‣ Description (fill out form)
• Next two weeks:
‣ Work on Group Projects
• February 23:
‣ Presentations of completed projects
23. Turn in a description of
your Group Project
Fill out the Group Project Form
24. Homework, due Feb 16
• Create a Web page with a rollover
that uses a GIF animation in
Dreamweaver
• Work on Group projects