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