In addition JavaScript can be used to create images, which change automatically, or to make animated banners similar to animated GIFs.

Size: px

Start display at page:

Download "In addition JavaScript can be used to create images, which change automatically, or to make animated banners similar to animated GIFs."

Sabina Skinner
6 years ago
Views:

1 JavaScript and Images... 1 Creating Rollovers... 1 Creating Effective Rollovers... 2 Triggering Rollovers from a Link... 4 Multiple Images Changing a Single Rollover... 5 Working with Multiple Rollovers... 8 Multiple Images with a Single Rollover Using a Function Multiple Rollovers Using a Function Creating Cycling Banners Adding Links to Cycling Banners Building Slide Shows Displaying a Random Image Automatically Changing Background Colours... 20

2 JavaScript and Images During the last session, we got familiar with the basic JavaScript concepts. Perhaps, one of the best uses of JavaScript is to add animated graphics to your pages in the form of rollovers (or rollover images). Rollovers are images on Web pages, which change when the user performs an action, usually moving the mouse over an image. In addition JavaScript can be used to create images, which change automatically, or to make animated banners similar to animated GIFs. Creating Rollovers When creating a rollover, we have to use two separate images, an original image, which is loaded when the page is loaded by the user, and a replacement image, which is displayed instead of the first one, to give the illusion of movement or animation. In order to create a rollover: 1. Type <A HREF="link.html" where link.html is the address to which the image would be linked to 2. Type onmouseover = "document.arrow.src = 'repimage.gif ' " where repimage.gif is the name of the replacement image. 3. Type onmouseout = "document.arrow.src = 'orgimage.gif ' "> where orgimage.gif is the name of the original image. 4. Type <IMG SRC="orgimage.gif " NAME="arrow"></A> where arrow is just the name given for the rollover image (this could be any name). The NAME attribute has to be present in the IMG tag for the rollover to work. In addition the onmouseout and onmouseover event handlers have to be placed in the A tag and not IMG tag. 1

Example <TITLE>Creating Rollovers</TITLE> <BODY BGCOLOR=white> <A HREF="page2.html" onmouseover="document.myimage.src='rightdarkblue.gif ' " onmouseout="document.myimage.src='right.gif ' "> <IMG SRC="right.

3 Example <TITLE>Creating Rollovers</TITLE> <BODY BGCOLOR=white> <A HREF="page2.html" onmouseover="document.myimage.src='rightdarkblue.gif ' " onmouseout="document.myimage.src='right.gif ' "> <IMG SRC="right.gif" NAME=myimage BORDER=0></A> This is how the image looks like before it is being pointed at with the mouse and after it has been pointed at with the mouse. Rollovers have their disadvantages as well; they are not supported by some of the older browsers such as Netscape 2.0 and Internet Explorer 3.0; also as the second image has to be downloaded in order to be displayed there may be a slight delay before the second image replaces the first one. Creating Effective Rollovers In order to ensure that the replacement image appears immediately, without any delay, we ca use JavaScript to preload all the images into the browser s cache (so that they are on the user s hard-disk) and place the images into script variables. 2

4 When the user moves the mouse over an image, the script swaps one variable containing the replacement the original image for another one containing the replacement image. Example <TITLE>Creating Effective Rollovers</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">  <BODY BGCOLOR=white> <A HREF="page2.html" onmouseover="document.myimage.src=myimageblue.src" onmouseout="document.myimage.src=myimagegreen.src"> <IMG SRC="right.gif" NAME=myimage BORDER=0></A> The above script first of all checks whether the browser understands image objects, and if so assigns the two variables myimagegreen and myimageblue to two separate image objects. The.src property is then used to fill the two objects with two GIF images. 3

5 The second part of the script deals with the problem of the older browsers by creating dummy variables, which are empty and are used to keep from getting error messages in old browsers. If you use transparent images as your replacement rollover image then they will show the image that they are replacing underneath. In addition both the original and replacement images should be of identical dimensions, otherwise the browser may resize the image, thus giving a distorted result. Triggering Rollovers from a Link In addition to creating rollovers by moving the mouse over an image, you can make a rollover occur when the user points at a text link. In order to achieve that all you need to do is to put a text link within the <A HREF tag. Example <TITLE>Triggering Rollovers from a Link</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">  <BODY BGCOLOR=white> <A HREF="page2.html" onmouseover="document.myimage.src=myimageblue.src" onmouseout="document.myimage.src=myimagegreen.src"> <H3>Next</H3></A><BR> <IMG SRC="right.gif" NAME=myimage BORDER=0> 4

6 This is how the image looks like before it is being pointed at with the mouse and after it has been pointed at with the mouse. Multiple Images Changing a Single Rollover It is possible to set up several different images to trigger a rollover. Example <TITLE>Multiple Images Changing a Rollover</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers myimage = new Image myimage1 = new Image myimage2 = new Image myimage3 = new Image else myimage1.src = "links.jpg" myimage2.src = "tables.jpg" myimage3.src = "images.jpg" myimage.src = "invisible.gif" 5

myimage1 = "" myimage2 = "" myimage3 = "" myimage = "" document.textfield = "" // End hiding script from old browsers --> <BODY BGCOLOR=lime> <A HREF="page1.html" onmouseover="document.textfield.src=myimage1.

7 myimage1 = "" myimage2 = "" myimage3 = "" myimage = "" document.textfield = "" // End hiding script from old browsers --> <BODY BGCOLOR=lime> <A HREF="page1.html" onmouseover="document.textfield.src=myimage1.src" onmouseout="document.textfield.src=myimage.src"> <IMG SRC="right.gif" BORDER=0></A> <A HREF="page2.html" onmouseover="document.textfield.src=myimage2.src" onmouseout="document.textfield.src=myimage.src"> <IMG SRC="right.gif" BORDER=0></A> <A HREF="page3.html" onmouseover="document.textfield.src=myimage3.src" onmouseout="document.textfield.src=myimage.src"> <IMG SRC="right.gif" BORDER=0></A> <IMG SRC="invisible.gif" NAME="textField"> This is how the example above looks like: 6

8 When the user points with the mouse at the first icon, the following image appears below: When the user points with the mouse at the second icon, the following image appears below: When the user points with the mouse at the third and final icon, the following image appears below: 7

9 The key to the successful implementation of the above example is to use the last image (the one which would change) with the name textfield. In addition all the three of the anchor tags should reference the same document object (document.textfield.src). Working with Multiple Rollovers If you want to make the image that triggers a rollover to be a rollover itself, you can do that by swapping out the original image with a replacement image. Example <TITLE>A Complex Rollover</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers myimage = new Image myimage1 = new Image myimage2 = new Image myimage3 = new Image myimage1.src = "links.jpg" myimage2.src = "tables.jpg" myimage3.src = "images.jpg" myimage.src = "invisible.gif" myimage1off = new Image myimage2off = new Image myimage3off = new Image myimage1on= new Image myimage2on= new Image myimage3on= new Image myimage1off.src= "right.gif" myimage2off.src= "right.gif" myimage3off.src= "right.gif" myimage1on.src= "rightdarkblue.gif" myimage2on.src= "rightdarkblue.gif" 8

10 else myimage3on.src= "rightdarkblue.gif" myimage1 = "" myimage2 = "" myimage3 = "" myimage = "" document.textfield = "" document.myimage1 = "" document.myimage2 = "" document.myimage3 = "" // End hiding script from old browsers --> <BODY BGCOLOR=lime> <A HREF="page1.html" onmouseover="document.textfield.src=myimage1.src; document.firstimage.src=myimage1on.src" onmouseout="document.textfield.src=myimage.src; document. firstimage.src=myimage1off.src"> <IMG SRC="right.gif" BORDER=0 NAME="firstimage"></A> <A HREF="page2.html" onmouseover="document.textfield.src=myimage2.src; document. secondimage.src=myimage2on.src " onmouseout="document.textfield.src=myimage.src; document. secondimage.src=myimage2off.src "> <IMG SRC="right.gif" BORDER=0 NAME="secondimage"></A> <A HREF="page3.html" onmouseover="document.textfield.src=myimage3.src; document. thirdimage.src=myimage3on.src" onmouseout="document.textfield.src=myimage.src; document. thirdimage.src=myimage3off.src"> <IMG SRC="right.gif" BORDER=0 NAME="thirdimage"></A> <IMG SRC="invisible.gif" NAME="textField"> 9

11 This is how the example above looks like: When the user points with the mouse at the first icon, the following image appears below and the icon changes appearance as well: When the user points with the mouse at the second icon, the following image appears below and the icon changes appearance as well: 10

When the user points with the mouse at the third and final icon, the following image appears below and the icon changes appearance as well: Multiple Images with a Single Rollover Using a Function As

12 When the user points with the mouse at the third and final icon, the following image appears below and the icon changes appearance as well: Multiple Images with a Single Rollover Using a Function As can be seen from the previous two examples, quite a lot of the code is repetitive and therefore can be written by using the means of a function instead. For example, the single rollover example can be redrafted as follows: Example <TITLE>Multiple Images Changing a Rollover</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> myimage = new Image myimage1 = new Image myimage2 = new Image myimage3 = new Image myimage1.src = "links.jpg" myimage2.src = "tables.jpg" myimage3.src = "images.jpg" myimage.src = "invisible.gif" function chgimg (imgfield, newimg) document[imgfield].src=eval(newimg + ".src") 11

13 <BODY BGCOLOR=lime> <A HREF="page1.html" onmouseover="chgimg('textfield','myimage1')" onmouseout="document.textfield.src=myimage.src"> <IMG SRC="right.gif" BORDER=0></A> <A HREF="page2.html" onmouseover="document.textfield.src=myimage2.src" onmouseout="document.textfield.src=myimage.src"> <IMG SRC="right.gif" BORDER=0></A> <A HREF="page3.html" onmouseover="document.textfield.src=myimage3.src" onmouseout="document.textfield.src=myimage.src"> <IMG SRC="right.gif" BORDER=0></A> <IMG SRC="invisible.gif" NAME="textField"> Multiple Rollovers Using a Function Similar to the example shown in the previous section of this handout, a function can be used to simplify the coding of the multiple rollovers example. For example, the multiple rollovers code can be redrafted as follows: Example <TITLE>A Complex Rollover</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers myimage = new Image myimage1 = new Image myimage2 = new Image myimage3 = new Image myimage1.src = "links.jpg" myimage2.src = "tables.jpg" myimage3.src = "images.jpg" 12

14 myimage.src = "invisible.gif" myimage1off = new Image myimage2off = new Image myimage3off = new Image myimage1on= new Image myimage2on= new Image myimage3on= new Image myimage1off.src= "right.gif" myimage2off.src= "right.gif" myimage3off.src= "right.gif" myimage1on.src= "rightdarkblue.gif" myimage2on.src= "rightdarkblue.gif" myimage3on.src= "rightdarkblue.gif" function chgimg (imgfield, newimg) document[imgfield].src=eval(newimg + ".src") else myimage1 = "" myimage2 = "" myimage3 = "" myimage = "" document.textfield = "" document.myimage1 = "" document.myimage2 = "" document.myimage3 = "" // End hiding script from old browsers --> <BODY BGCOLOR=lime> <A HREF="page1.html" onmouseover="chgimg('textfield', 'myimage1'); chgimg('firstimage', 'myimage1on') " onmouseout="chgimg('textfield', 'myimage'); chgimg('firstimage', 'myimage1off')"> <IMG SRC="right.gif" BORDER=0 NAME="firstimage"></A> 13

15 <A HREF="page2.html" onmouseover="chgimg('textfield', 'myimage2'); chgimg('secondimage', 'myimage2on') " onmouseout="chgimg('textfield', 'myimage'); chgimg('secondimage', 'myimage2off')"> <IMG SRC="right.gif" BORDER=0 NAME="secondimage"></A> <A HREF="page3.html" onmouseover="chgimg('textfield', 'myimage3'); chgimg('thirdimage', 'myimage3on') " onmouseout="chgimg('textfield', 'myimage'); chgimg('thirdimage', 'myimage3off')"> <IMG SRC="right.gif" BORDER=0 NAME="thirdimage"></A> <IMG SRC="invisible.gif" NAME="textField"> Creating Cycling Banners As you already know you can create animated GIF banners for your site, which consist of several number of frames playing in succession. JavaScript also allows you to create animated banners by using an array of image elements. Example <TITLE>Rotating Banners</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers myimages = new Array ("images.jpg","links.jpg","tables.jpg") thisbanner = 0 Counter = myimages.length function rotate() thisbanner++ if (thisbanner == Counter) thisbanner = 0 document.adbanner.src=myimages[thisbanner] settimeout("rotate()", 3 * 1000) 14

16 // End hiding script from old browsers --> <BODY BGCOLOR="lime" onload="rotate()"> <CENTER> <IMG SRC="images.jpg" NAME="adBanner" ALT="html4.co.uk s site"> </CENTER> The following line tells the browser to change the GIFs in the banner. settimeout("rotate()", 3 * 1000) The advantages of using JavaScript to create animated banners in comparison to using animated GIFs are two: first of all JavaScript allows you to use JPEG files to create the banners and secondly JavaScript allows you to modify the banner easily without making changes to the image file itself (just changing the image files in the array). Adding Links to Cycling Banners You can adapt the cycling banners, which you have created in order to allow you users to click on separate parts of the banner and go to different URLs depending on which image in the image array they have clicked on. Example <TITLE>Rotating Banners</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers myimages = new Array ("images.jpg","links.jpg","tables.jpg") myurls = new Array ("yahoo.com", "google.com", "dogpile.com") 15

17 thisbanner = 0 Counter = myimages.length function rotate() if(document.adbanner.complete) thisbanner++ if (thisbanner == Counter) thisbanner = 0 document.adbanner.src=myimages[thisbanner] settimeout("rotate()", 3 * 1000) function newlocation() document.location.href=" + myurls[thisbanner] // End hiding script from old browsers --> <BODY BGCOLOR="lime" onload="rotate()"> <CENTER> <A HREF="javascript:newLocation()"> <IMG SRC="images.jpg" NAME="adBanner" ALT="html4.co.uk s site" BORDER=0></A> </CENTER> If we were to click on the Links part of the animated banner then, we should be redirected to 16

18 Building Slide Shows Slide shows are particularly useful, when there is a lack of space on your web site to display a multitude of images. Usually, and instead an image is displayed on a page and the user is allowed to navigate backward and forward through all the available images. Example <TITLE>Building Slide Shows</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers myimages = new Array ("images.jpg","links.jpg","tables.jpg") thisbanner = 0 Counter = myimages.length - 1 function showprevious() if (document.images && thisbanner>0) thisbanner -- document.mypicture.src=myimages[thisbanner] 17

19 function shownext() if (document.images && thisbanner < Counter) thisbanner ++ document.mypicture.src=myimages[thisbanner] // End hiding script from old browsers --> <BODY BGCOLOR="lime"> <CENTER> <IMG SRC="images.jpg" NAME="myPicture" ALT="html4.co.uk s site" BORDER=0> </CENTER> <A HREF="javascript:showPrevious()">Previous</A> <A HREF="javascript:showNext()">Next</A> When the user reaches the end of the slide show in each direction, the script ignores any further clicks. Displaying a Random Image JavaScript allows us to display a random image on our site when the visitor enters the site. In order to achieve this effect, we have to use the Math.random() function. 18

Example <TITLE>Displaying a Random Image</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers myimages = new Array ("images.jpg","links.jpg","tables.

20 Example <TITLE>Displaying a Random Image</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">  <BODY BGCOLOR="lime" onload="chooseimage()"> <CENTER> <IMG SRC="images.jpg" NAME="adPicture" ALT="html4.co.uk s site"> </CENTER> The Math.random function generates a random number between 0 and 1, which is then multiplied by the number of items in the array. The Math.floor function is then used to round the number to an integer (in this case between 0 and 2). 19

Automatically Changing Background Colours JavaScript allows you to change automatically the background of your page, should you wish to do so.

21 Automatically Changing Background Colours JavaScript allows you to change automatically the background of your page, should you wish to do so. Example <TITLE>Rotating Backgrounds</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">  <BODY BGCOLOR="lime" onload="rotatebackground()"> <CENTER> <IMG SRC="images.jpg" NAME="adPicture" ALT="html4.co.uk s site"> </CENTER> 20

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript?

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript? Web Development & Design Foundations with HTML5 Ninth Edition Chapter 14 A Brief Look at JavaScript and jquery Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of