ARTDM 170, Week 3: Rollovers

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

Turn in Homework
Two GIF Animations

Save for Web and
Devices...
Letʼs try this again in Photoshop

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

GIF animations
Any volunteers?

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

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

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 HTML
<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 HTML
<body>
<a href="#" onmouseover="swapImage('image1',
'images/pic1-over.jpg');return false;">
<img src="images/pic1-out.jpg" id="image1" />
</a>
</body>

An image is an image
even when that image is
an animation
Combine Animated GIFs with
JavaScript Rollovers

Rollover with a click and then
another rollover

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

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

Form Groups
No less than 3 to a group

Group Project Deadlines
• Due next week:
‣ Description (ﬁll out form)

• Next two weeks:

‣ Work on Group Projects

• February 23:
‣ Presentations of completed projects

Turn in a description of
your Group Project
Fill out the Group Project Form

Homework, due Feb 16

• Create a Web page with a rollover
that uses a GIF animation in
Dreamweaver
• Work on Group projects

ARTDM 170, Week 3: Rollovers

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (19)

Similar a ARTDM 170, Week 3: Rollovers

Similar a ARTDM 170, Week 3: Rollovers (20)

Más de Gilbert Guerrero

Más de Gilbert Guerrero (20)

Último

Último (20)

ARTDM 170, Week 3: Rollovers

Notas del editor