6. Web Applications with
Animation, Image and Multimedia
6.1 Animation
MARQUEE Tag
- Creates a scrolling-text area
- Automatically scrolls the text to the left or
right from one side of the HTML document to the other.
Attributes
ALIGN = top | middle | bottom
BEHAVIOR = scroll | slide |
alternate
Scroll -- default setting
BGCOLOR = "#rrggbb"
or color name
DIRECTION = left | right
HEIGHT = number
HSPACE = number
LOOP = number | INFINITE
SCROLLAMOUNT = number
SCROLLDELAY = number
VSPACE = number
WIDTH = number
Example
6-1: A text animating example.
<HTML>
<!-- textanimate.html -->
<HEAD>
<TITLE> Text Animating </TITLE>
</HEAD>
<BODY>
<!-- scrollamount :
FASTER -- higher number
scrolldealy: Delay
between the times that text scrolls
across the screen
-->
<MARQUEE direction=RIGHT behavior=ALTERNATE scrollamount= 2
scrolldelay = 200>
<H3> <FONT
COLOR="red">
Electrical and
Computer Engineering Technology
</FONT>
</H3>
</BODY>
</HTML>
6.2 Adding Animated Images
IMG Tag
Place a graphic on the Web
page
Attributes
ALIGN
= absbottom | baseline | bottom | center | left | middle | right | texttop |
top
ALT
= text
Provide
a text for display when the image is not displayed
BORDER
= Number_in_Pixels
HEIGHT
= Number_in_Pixels
HSPACE
= Number_in_Pixels
VSPACE
= Number_in_Pixels
ISMAP
Server
side imagemap
LONGDESC
= url
Link
to a long description of the image
LOWSRC
= url
SRC
= url
URL
of the graphic file to be displayed
USEMAP
= url
Client-side
imagemap
WIDTH
= Number_in_Pixels
Microsoft IE's Attributes
DYNSRC
·
Can also be used to
insert video for Windows files, AVI files in HTML document
CONTROLS
-- add playback controls for the video
LOOP
= number | INFINITE
·
To indicate how often
the video clip will play
·
LOOP = 3
·
LOOP = INFINITE
START = fileopen | mouseover
| fileopen, mouseover
specify when to play the video
fileopen means downloaded
Example
6-2: Adding animated GIF file.
<HTML>
<!-- airplaneanimated.htm
This example uses an animated airplane.gif file from
from Microsoft GIF
naimator (part of FrontPage).
-->
<HEAD>
<TITLE>Airplane </TITLE>
</HEAD>
<BODY>
<IMG
SRC="airplananimated_files/airplane.gif"><BR>
</BODY>
</HTML>
6.3 Playing Multimedia
Applications
<EMBED> Tag
The <EMBED> tag is the
most common method of adding sound and video to Web pages.
To add an AVI file and play
forever:
<IMG DYNSRC =
"movie.avi" SRC = "mypicture.gif" WIDTH = 60 HEIGHT =60
LOOP = INFINITE ALIGH = RIGHT>
Embed the Wav File:
<EMBED src="file.wav" autostart=true loop=false volume=100
hidden=true><NOEMBED><BGSOUND src="file.wav"></NOEMBED>
or
<BGSOUND SRC =
"play.wav" LOOP = 4">
Embed Midi Files:
<EMBED src="file.mid" autostart=true loop=false volume=100
hidden=true><NOEMBED><BGSOUND src="file.mid"></NOEMBED>
or
<EMBED SRC="xfiles.mid" VOLUME="50" HEIGHT="60" WIDTH="144">
Example 6-3: Play a song.
<HTML>
<!-- playms.htm -->
<HEAD>
<TITLE>Playing Microsoft Sound</TITLE>
</HEAD>
<BODY>
<EMBED SRC="TheMicrosoftSound.wav"
VOLUME="50"
HEIGHT="60"
WIDTH="145"
AUTOSTART="true"
ALIGN="left"
HIDDEN="false"
LOOP="true">
</EMBED>
</BODY>
</HTML>
Activities