ARTDM 170, Week 3: Rollovers
•
0 likes•319 views
This document discusses JavaScript rollovers using animated GIF images. It provides instructions on 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 the navigation. The project involves forming groups, submitting a description by next week, working on the group projects over the next two weeks, and presenting the completed projects on February 23rd. This week's homework is to create an individual page with a GIF rollover in Dreamweaver and continue working on the group projects.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (19)
Similar to ARTDM 170, Week 3: Rollovers
Similar to ARTDM 170, Week 3: Rollovers (20)
More from Gilbert Guerrero
More from Gilbert Guerrero (20)
Recently uploaded
Recently uploaded (20)
ARTDM 170, Week 3: Rollovers
- 1. ARTDM 170, Week 3: JavaScript Rollovers Gilbert Guerrero gguerrero@dvc.edu http://gilbertguerrero.com/blog/ artdm-170/
- 2. Turn in Homework Two GIF Animations
- 3. Save for Web and Devices... Letʼs try this again in Photoshop
- 4. Put your files in my dropbox • Two GIF animations • Put them in a folder with your lastname and first initial • Example: smith-h anim1.gif anim2.gif
- 5. GIF animations Any volunteers?
- 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
- 9. Triggering Events <html> <head> <script type="text/javascript"> <!-- function testRoll() { alert('how are you?'); } //--> </script> </head> <body> <a href="#" onmouseover="testRoll();">Hello</ a> </body> </html>
- 10. The JavaScript <head> <script type="text/javascript"> <!-- function testRoll() { alert('how are you?'); } //--> </script> </head>
- 12. JavaScript Image Rollover <html> <head> <script type="text/javascript"> <!-- function swapImage(id, theImage) { document.getElementById(id).src = theImage; } //--> </script> </head> <body> <a href="#" onmouseover="swapImage('image1','images/ pic1-over.jpg');return false;"><img src="images/ pic1-out.jpg" id="image1" /></a> </body> </html>
- 13. The JavaScript <head> <script type="text/javascript"> <!-- function swapImage(id, theImage) { document.getElementById(id).src = theImage; } //--> </script> </head>
- 14. The HTML <body> <a href="#" onmouseover="swapImage('image1', 'images/pic1-over.jpg');return false;"> <img src="images/pic1-out.jpg" id="image1" /> </a> </body>
- 15. An image is an image even when that image is an animation Combine Animated GIFs with JavaScript Rollovers
- 16. Rollover with a click and then another rollover
- 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
- 18. Using Animated Rollovers for Navigation
- 19. Group Projects
- 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
- 21. Form Groups No less than 3 to a group
- 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
Editor's Notes
- Let's take a look at the Photoshop mockup.