ARTDM 170 Week 3: Rollovers
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
Favorites, Groups & Events
ARTDM 170 Week 3: Rollovers - Presentation Transcript
- ARTDM 170, Week 3: JavaScript + GIF Gilbert Guerrero, gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
- Turn in Homework Two GIF Animations
- 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
- GIF animations
- JavaScript Rollovers
- Rollover Images • When a user puts the mouse over an image a new image can be shown • Uses JavaScript and the DOM (Document Object Model) • DOM allows us to identify and manipulate any element on a Web page
- 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>
- The JavaScript <head> <script type="text/javascript"> <!-- function testRoll() { alert('how are you?'); } //--> </script> </head>
- The Image <body> <a href="#" onmouseover="testRoll();">Hello </a> </body>
- 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>
- The JavaScript <head> <script type="text/javascript"> <!-- function swapImage(id, theImage) { document.getElementById(id).src = theImage; } //--> </script> </head>
- The Image <body> <a href="#" onmouseover="swapImage('image1', 'images/pic1-over.jpg');return false;"> <img src="images/pic1-out.jpg" id="image1" /> </a> </body>
- Combine Animated GIFs with JavaScript Rollovers
- 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
- Using Animated Rollovers for Navigation
- Homework, due Sept 9 • Devise a navigation scheme for a website • Use animated rollovers • Use all of the 4 states: Up Over Down Over While Down • Create one page per navigation item (at least 3 pages) to demonstrate how it works
More info about this document
© All Rights Reserved
Go to text version
- Total Views 144
- 113 on SlideShare
- Comments 0
- Favorites 0
- Downloads 0
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Apple Keynote
0 comments
Post a comment