ARTDM 170 Week 3: Rollovers

506 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
506
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Let's take a look at the Photoshop mockup.
  • ARTDM 170 Week 3: Rollovers

    1. 1. ARTDM 170, Week 3: JavaScript + GIF Gilbert Guerrero, gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
    2. 2. Turn in Homework Two GIF Animations
    3. 3. 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
    4. 4. GIF animations  
    5. 5. JavaScript Rollovers
    6. 6. 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
    7. 7. 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>
    8. 8. The JavaScript <head> <script type="text/javascript"> <!-- function testRoll() {     alert('how are you?'); } //--> </script> </head>
    9. 9. The Image <body> <a href="#" onmouseover="testRoll();">Hello </a> </body>
    10. 10. 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>
    11. 11. The JavaScript <head> <script type="text/javascript"> <!-- function swapImage(id, theImage) {     document.getElementById(id).src = theImage; } //--> </script> </head>
    12. 12. The Image <body> <a href="#" onmouseover="swapImage('image1', 'images/pic1-over.jpg');return false;"> <img src="images/pic1-out.jpg" id="image1" /> </a> </body>
    13. 13. Combine Animated GIFs with JavaScript Rollovers
    14. 14. 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
    15. 15. Using Animated Rollovers for Navigation
    16. 16. 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

    ×