Your SlideShare is downloading. ×
0
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ARTDM 170, Week 3: Rollovers

428

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
428
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Let's take a look at the Photoshop mockup.
  • Transcript

    • 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?
    • 6. JavaScript Rollovers
    • 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>
    • 11. The HTML <body> <a href="#" onmouseover="testRoll();">Hello </a> </body>
    • 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

    ×