ARTDM 170 Week 3: Rollovers

ARTDM 170, Week 3:
JavaScript + GIF
Gilbert Guerrero, gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170/

Turn in Homework
Two GIF Animations

Put your ﬁles in my dropbox

• Two GIF animations
• Put them in a folder with your
lastname and ﬁrst initial
• Example:
smith-h
anim1.gif
anim2.gif

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">

</script>
</head>
<body>
<a href="#" onmouseover="testRoll();">Hello</
a>
</body>
</html>

The JavaScript
<head>

</script>
</head>

The Image
<body>
<a href="#"
onmouseover="testRoll();">Hello
</a>
</body>

JavaScript Image Rollover
<html>
<head>

</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>
</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 ﬁrst 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

ARTDM 170 Week 3: Rollovers

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie ARTDM 170 Week 3: Rollovers

Ähnlich wie ARTDM 170 Week 3: Rollovers (20)

Mehr von Gilbert Guerrero

Mehr von Gilbert Guerrero (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

ARTDM 170 Week 3: Rollovers

Hinweis der Redaktion