(Web Development Lesson 14)
Today’s Goal
(Images & Animation)
• To become able to add and
manipulate images and simple animations to a Web page
Images in HTML
• It is quite straight forward to
include gif and jpg images in an html Web page using the <IMG> tag
Format: <IMG src=URL,
alt=text
height=pixels
width=pixels
align="bottom|middle|top">
Plea: Don’t use images just for the sake of it!
6.283185307179586
NaN
100.55
<HTML><HEAD>
<TITLE>Image Demo</TITLE>
</HEAD><BODY>
<H1>Image Demo</H1>
Here is an image <IMG src="die5.gif">
<IMG src="die5.gif" height="63"
width="126"> <P>
Here is another <IMG align="middle" src=
"http://www.zainbooks.com/images/logo/logotop.jpg">
</BODY></HTML>
41.1 Images in JavaScript
• Images in JavaScript can be
manipulated in many ways using the built-in object Image
• Properties: name, border, complete, height, width, hspace, vspace,
lowsrc, src
• Methods: None
• Event handlers: onAbort, onError, onLoad, etc.
Image Preloading
• The primary use for an Image
object is to download an image into the cache before it is actually
needed for display
• This technique can be used to create smooth animations or to display
one of several images based
on the requirement
The Image Pre-Loading Process
1. An instance of the Image object
is created using the new
keyword
2. The src
property of this instance is set equal to
the filename
of the image to be pre-loaded
3. That step starts the down-loading of the image into the cache without
actually displaying it
4. When a pre-loaded image is required to be displayed, the
src
property of the displayed image is set
to the src
property of the pre-fetched image
Let us revisit an example that we first saw in Lesson 35
<HTML>
<HEAD>
<TITLE>Roll the Die</TITLE>
<SCRIPT>
JavaScript Code
</SCRIPT>
</HEAD>
<BODY >
HTML Code
</BODY>
</HTML>
<IMG name="die" src="die6.gif">
<FORM>
<INPUT type="button" value="Roll the Die"
onClick="rollDie( )">
</FORM>
dieImg = new Array( 7 ) ;
for( k = 1; k < 7; k = k + 1 ) { //Preload images
dieImg[ k ] = new Image( ) ;
dieImg[ k ].src = "die" + k + ".gif" ;
}
function rollDie( ) {
dieN = Math.ceil( 6 * Math.random( ) ) ;
document.die.src = dieImg[ dieN ].src ;
}
Another Example
• Develop a Web page that displays
six thumbnail images and a main image
die1.gif die2.gif die3.gif
die4.gif die5.gif die6.gif
• The main image should change to
a larger version of the thumbnail as soon as the mouse moves
over on a thumbnail image
<HTML>
<HEAD>
<TITLE>Image Selector</TITLE>
<SCRIPT>
JavaScript Code
</SCRIPT>
</HEAD>
<BODY >
HTML Code
</BODY>
</HTML>
dieImg = new Array( 7 ) ;
for( k = 1; k < 7; k = k + 1 ) { // Preload images
dieImg[ k ] = new Image( ) ;
dieImg[ k ].src = "die" + k + ".gif" ;
}
<IMG name="big" src="die6.gif" width="252" height="252"><P>
<IMG src="die1.gif" width="63" height="63"
onMouseOver=
"document.big.src=dieImg[ 1 ].src">
…
…
<IMG src="die6.gif" width="63" height="63"
onMouseOver=
"document.big.src=dieImg[ 6 ].src">
Where Else Can We Use This?
• Automobile Web site
• ???
Animation Example 1
• Take 16 images and cycle through
them to create an animation effect
<HTML>
<HEAD>
<TITLE>Animation 1</TITLE>
<SCRIPT>
JavaScript Code
</SCRIPT>
</HEAD>
<BODY >
HTML Code
</BODY>
</HTML>
<CENTER>
<IMG name="circle" src="circle1.gif" onLoad="setTimeout( 'circulate( )',
gap )">
</CENTER>
gap = 100 ;
imageN = 1 ;
circImg = new Array( 17 ) ;
for( k = 1; k < 17; k = k + 1 ) { // Preload images
circImg[ k ] = new Image( ) ;
circImg[ k ].src = "circle" + k + ".gif" ;
function circulate( ) {
document.circle.src =
circImg[ imageN ].src ;
imageN = imageN + 1 ;
if( imageN > 16 )
imageN = 1 ;
}
Animated Gifs
• We could have saved the 16 gif
images of the previous example in a single file in the form of an
animated gif, and then used it in a regular <IMG> tag to display a
moving image
• However, JavaScript provides better control over the sequencing and
the gap between the
individual images
setTimeout( ) executes circulate( )
once after a delay of
gap milliseconds
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
Animation Example 2
• Take 16 images and cycle through
them to create an animation effect
• Provide buttons to slow down or speed up the animation
<HTML>
<HEAD>
<TITLE>Animation 2</TITLE>
<SCRIPT>
JavaScript Code
</SCRIPT>
</HEAD>
<BODY >
HTML Code
</BODY>
</HTML>
<CENTER>
<IMG name="circle" src="circle1.gif" onLoad="setTimeout( 'circulate( )',
gap )">
</CENTER>
<FORM>
<INPUT type="button" value="Slow Down"
onClick="slowDown( )">
<INPUT type="button" value="Speed Up"
onClick="speedUp( )">
</FORM>
gap = 100 ;
imageN = 1 ;
circImg = new Array( 17 ) ;
for( k = 1; k < 17; k = k + 1 ) { // Preload images
circImg[ k ] = new Image( ) ;
circImg[ k ].src = "circle" + k + ".gif" ;
}
function circulate( ) {
document.circle.src =
circImg[ imageN ].src ;
imageN = imageN + 1 ;
if( imageN > 16 )
imageN = 1 ;
}
function slowDown( ) {
gap = gap + 20 ;
if( gap > 4000 )
gap = 4000 ;
}
function speedUp( ) {
gap = gap - 20 ;
if( gap < 0 )
gap = 0 ;
}
No change
No change
Two new
functions
41.2 Flash Animation
• Designed for 2-D animations, but
can be used for storing
static vector-images as well
• A special program (called a plug-in) is required to view
Flash files in a Web browser
• Can be used to design complete, animated Web sites with
hardly any HTML in it
• Binary-file storage
Structured Vector Graphics
• New format; may become more
popular than Flash
• Plug-in required
• Text-file storage; search engine friendly
During Today’s Lesson …
• We became able to add and
manipulate images and simple animations to a Web page
Our 15th & Final Web Dev Lecture:
(Programming Methodology)
• To understand effective
programming practices that result in the development of correct programs
with minimum effort
• To become familiar with simple debugging techniques |