javascript: fun with images
DESCRIPTION
JavaScript: Fun with Images. Chapter 3 JavaScript for the WWW. Demos come mostly from text Website www.javascriptworld.com. Chapter 3 Demos in Text. Outline of Demos in C3. Rollovers (2 of 8 demo programs) Cycling Banners (0 of 4 demos) SlideShows (0 of 2 demos – use .ppt) - PowerPoint PPT PresentationTRANSCRIPT
JavaScript: Fun with Images
Chapter 3
JavaScript for the WWW
Demos come mostly from text Website
www.javascriptworld.com
Chapter 3 Demos in Text
Outline of Demos in C3
• Rollovers (2 of 8 demo programs)
• Cycling Banners (0 of 4 demos)
• SlideShows (0 of 2 demos – use .ppt)
• Random Images (1 of 1 demo)
• Rollover and Image Map (1 of 1 demo)
• Auto change background colors (0 of 1 demo)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A Simple Rollover</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE">
<A HREF="next.html" onMouseover="document.arrow.src='redArrow.gif'"
onMouseout="document.arrow.src='blueArrow.gif'">
<IMG SRC="blueArrow.gif"
WIDTH="147" HEIGHT="82" BORDER="0" NAME="arrow" ALT="arrow"></A>
</BODY>
</HTML> RollOver.html
Comments on this Simple RollOver
• Note that the JS is invoked from attributes of HTML tags, not <SCRIPT> tags
• It uses MouseOver event handlers in JS• This script does not download the images until
they are needed. There might be a delay in the mouseover
• In the floppy version, you can hear the browser getting the images from the diskette each time they are used. They are not cached in RAM.
• It’s better to pre-fetch the images in the <HEAD>
<HTML><HEAD> <TITLE>A Rollover with Pre-Fetching of Images</TITLE>
<script>
if (document.images) {
img1 = new Image
img2 = new Image
img1.src = "blueArrow.gif"
img2.src = "redArrow.gif"
} else {
img1.src = ""
img2.src = ""
document.arrow = ""
}
</script>
</HEAD> <BODY BGCOLOR="WHITE">
<A HREF="next.html" onMouseover="document.arrow.src= img2.src"
onMouseout="document.arrow.src=img1.src"><IMG SRC="blueArrow.gif"
WIDTH="147" HEIGHT="82" BORDER="0" NAME="arrow" ALT="arrow"></A>
</BODY> </HTML>
RollOver2.html
The next script puts a random image up on each visit
• It uses an Array of 4 images # 0, 1, 2, 3.
• Math.random() generates 0 < n < 1
• Then m=n*4 ranges from 0 to 3.999
• Math. floor(m) generates integer part of m, example floor(3.4) = 3
• This index picks one of the Array elements at random
<HTML> <HEAD> <TITLE>Random Images</TITLE>
<SCRIPT>
myPix2 = new Array("images/callisto.jpg",
"images/europa.jpg",
"images/io.jpg",
"images/ganymede.jpg")
function choosePix() {
if (document.images) {
randomNum = Math.floor((Math.random() * myPix2.length))
document.myPicture2.src = myPix2[randomNum]
}}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="WHITE" onLoad="choosePix()">
<IMG SRC="images/spacer.gif" WIDTH="262" HEIGHT="262" NAME="myPicture2" ALT="some image">
</BODY> </HTML>
RandomImages1.html
Image Maps in HTML
• Use ISMAP to find coordinates of subparts of an image
• Then put those coordinates into a shape
• Demo is an American flag
• After this demo, we will see how to combine image maps with rollovers in JS
<html> <head> <title> Demo of Client Side Image Map </title>
</head> <body>
<h5> What do the symbols on the American flag mean? <br>
(Click on the flag for answers) </h5>
<!-- the ISMAP provides coordinates of the mouse location in the status bar <img src="USflag.gif" ISMAP>
Then replace this tag with the one below. -->
<img src="USflag.gif" USEMAP = "#flagmap">
<!-- now the image map-->
<MAP NAME = "flagmap">
<AREA SHAPE = RECT COORDS ="0,0,81,60" HREF = stars.html>
<AREA SHAPE = RECT COORDS ="81,0,192,112" HREF = bars.html>
<AREA SHAPE = RECT COORDS ="0,60,81,112" HREF = bars.html>
</MAP>
</body> </html>
A:/ImageMapDemo.html
Combination of an Image Map with RollOvers
• This can be used for an attractive navigation bar.
• The hitch is creating nice graphics for each mouseover
• The underlying links are not valid in the demo
<HTML> <HEAD> <TITLE>Combining rollovers & image maps</TITLE> <SCRIPT >
if (document.images) {
img1 = new Image ; img2 = new Image; img3 = new Image
imgRed = new Image
img1.src = "images/testGreen1.gif“; img2.src = "images/testGreen2.gif"
img3.src = "images/testGreen3.gif“; imgRed.src = "images/testRed.gif"
} </SCRIPT> </HEAD>
<BODY BGCOLOR="WHITE"> <MAP NAME="roll_map">
<AREA SHAPE="RECT" HREF="sec1.html" onMouseover="document.roll.src=img1.src"
onMouseout="document.roll.src=imgRed.src" COORDS="0,0,120,60" ALT="Sample chapter">
<AREA SHAPE="RECT" HREF="sec2.html" onMouseover="document.roll.src=img2.src"
onMouseout="document.roll.src=imgRed.src" COORDS="0,60,120,120" ALT="About the authors">
<AREA SHAPE="RECT" HREF="sec3.html" onMouseover="document.roll.src=img3.src"
onMouseout="document.roll.src=imgRed.src" COORDS="0,120,120,180" ALT="Buy a copy">
</MAP>
<A HREF="home.html" onMouseout="document.roll.src=imgRed.src"><IMG USEMAP="#roll_map"
SRC="images/testRed.gif" WIDTH="120" HEIGHT="180" BORDER="0" NAME="roll"
ALIGN="LEFT" HSPACE="20" ALT="Book info"></A>
<H3>Thanks for visiting our site. Click on the box to the left.</H3>
</BODY> </HTML>
ImageMapRollOver.htm