1 / 13

JavaScript: Fun with Images

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)

kaye-ball
Download Presentation

JavaScript: Fun with Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript: Fun with Images Chapter 3 JavaScript for the WWW

  2. Demos come mostly from text Website www.javascriptworld.com

  3. Chapter 3 Demos in Text

  4. 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)

  5. <!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

  6. 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>

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

  8. 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

  9. <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

  10. 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

  11. <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

  12. 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

  13. <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

More Related