Javascript (Images)
The first thing we're going to learn about images is how to create a rollover. A rollover is a picture or clipart image
or any image for that matter, that can be changed when the mouse is moved over it. Here is the script:
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
if (document.images){
buttonGrey = new Image
buttonBlue = new Image
buttonGrey.src = "images/button.jpg"
buttonBlue.src = "images/button1.jpg"
}
else {
buttonGrey = ""
buttonBlue = ""
document.button = ""
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="(whatever webpage you want to link to).html" onMouseover="document.button.src=buttonGrey.src" onMouseout="document.button.src=buttonBlue.src">
<IMG SRC="images/button1.jpg" NAME="button"></A>
</BODY>
This script preloads the images so they load immediatly when the mouse moves over them. First, we the code tells
the browser to check and see if it understands the image objects. If it does then the code two variables, buttonGrey and buttonBlue
the image objects. The .src fills the objects with the .jpg images. The next variables are just used if the browser is old
and can't understand the script, that way no error messages will come up on the screen. The rest of the script is the link
code for the images so they show up on the screen.
Next we're going to learn how to change an image using a link. Here is the script:
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
if (document.images){
buttonGrey = new Image
buttonBlue = new Image
buttonGrey.src = "images/button.jpg"
buttonBlue.src = "images/button1.jpg"
}
else {
buttonGrey = ""
buttonBlue = ""
document.button = ""
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="(whatever webpage you want to link to).html" onMouseover="document.button.src=buttonGrey.src" onMouseout="document.button.src=buttonBlue.src">Next page</A>
<IMG SRC="images/button1.jpg" NAME="button">
</BODY>
The script is almost identical to the rollover script, except the </A> tag is now in front of the <IMG SRC> tag
instead of behind it and the word next page was added as a link. Pretty simple, huh? (**If this script doesn't work
when you put into you HTML, take away the "images/" parts of the code**)
Click here for a working example.
Next were going to learn how to create cycling banners with multiple GIF images. Here is the script:
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
adImages = new Array("banner1.gif","banner2.gif","banner3.gif")
thisAd = 0
imgCt = adImages.length
function rotate() {
if (document.images){
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
document.adBanner.src=adImages[thisAd]
setTimeout("rotate()",3 * 1000)
}
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODYonLoad="rotate()">
<CENTER>
<IMG SRC="banner1.gif" NAME="adBanner">
</CENTER>
</BODY>
First you create an array of three variables. Then you set the value of imgCt and thisAd. Then you create a function
called rotate() which will carry out the task of defining how the banner will work. The script checks if the browser understands
the image. Then the value of one is added to thisAd. The next if-statement sets thisAd and imgCt equal to each other.
The document.adBanner.src statement=... says that the source of the images is in the array, and thisAd holds the different
images. The onLoad statement loads the banner when the page is being viewed. The final part of the code, IMG SRC..., loads
the images on the webpage.
Here is a working example(it's nothing special):
If you want to create a banner that has to load large GIF files, the above will not work unless the user has a fairly fast
internet connection. In this script we're going to make the banner wait for the user. I will highlight the new code in
red. Here is the script:
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
adImages = new Array("banner1.gif","banner2.gif","banner3.gif")
thisAd = 0
imgCt = adImages.length
function rotate() {
if (document.images){
if (document.adBanner.complete){
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
document.adBanner.src=adImages[thisAd]
}
setTimeout("rotate()",3 * 1000)
}
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY onLoad="rotate()">
<CENTER>
<IMG SRC="banner1.gif" NAME="adBanner">
</CENTER>
</BODY>
If you want to create a banner that has different links on each banner(i.e. banner1, banner2, banner3) you'll need to create a new array.
In this script we're going to make the banner contain different links. I will highlight the new code in
red. Here is the script:
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
adImages = new Array("banner1.gif","banner2.gif","banner3.gif")
adURL = new Array("cmjwebpub.com","sciimaging.com","oocities.com/miyuki4911")
thisAd = 0
imgCt = adImages.length
function rotate() {
if (document.images){
if (document.adBanner.complete){
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
document.adBanner.src=adImages[thisAd]
}
setTimeout("rotate()",3 * 1000)
}
}
function newLocation(){
document.location.href = "http://www." + adURL[thisAd]
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY onLoad="rotate()">
<CENTER>
<A HREF="javascript:newLocation()">
<IMG SRC="banner1.gif" NAME="adBanner"></A>
</CENTER>
</BODY>
Next we're going to learn how to display a random image using an array. Here is the script:
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
myPix = newArray("redBanner.gif","blueBanner.gif","blackbanner.gif")
imgCt = myPix.length
function choosePic(){
if (document.images){
randomNum = Math.floor((Math.random() * imgCt))
document.myPicture.src = myPix[randomNum]
}
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY onLoad="choosePic()">
<CENTER>
<IMG SRC="spacer.gif" WIDTH=400 HEIGHT=60 NAME="myPicture">
</CENTER>
</BODY>
First we build an array of three pictures and then set the variable imgCt equal to the number of pictures. After the function
choosePic() is defined we use Math.random to generate a random number between 0 & 2. The document.myPicture.src= sets the source
of the pictures equal to the value of random. Finally, the onLoad command loads the random image when the webpage is being viewed
and the IMG tag gets the name myPicture so the script can change the image.
Click here for a working example.
The final thing we're going to look at concerning images will be random background colors. Here is the script:
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
bGrounds = new Array("red","white","blue")
thisBG = 0
bgColorCount = bGrounds.length
function rotateBG() {
if (document.images) {
thisBG++
if (thisBG == bgColorCount){
thisBG = 0
}
document.bgColor=bGrounds[thisBG]
setTimeout("rotateBG()", 3 * 1000)
}
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY onLoad="rotateBG()">
<CENTER>
<A HREF="javascript5.html">BACK</A>
</CENTER>
</BODY>
The first three variables define the Array of colors, thisBG gets set to zero, and bgColorCount gets set to three, the
number of random colors. Next we define a function, and increment the value of thisBG by one if time the loop is performed.
Then we set thisBG equal to bgColorCount so the script won't go through the loop again. Finally, we tell the document to
set it's background color property to the same value as bGrounds, which is determined by thisBG and set the timeout to call
the rotateBG() every 3000 milliseconds.
Click here for a working example.
MORE