IMAGE SLIDE SHOW
-
Accessing
images using JavaScript
In order to create rollover effects, we have
to first understand how to access images in general using JavaScript. All
images in a web page are treated as an "image object" to JavaScript.
The image object is created for you whenever you insert images onto your
webpage. It does so automatically, even if there's not one line of JavaScript
code on your page.
The first order of business is to learn how to access
images in general using JavaScript. Assuming you have three images on your
webpage, as follows:
Pic1:
Pic2:
Pic3:
If you want to refer to the three images using
JavaScript, here's how:
document.images[0]
//first image
document.images[1]
//second image
document.images[2]
//third image
As can be seen, images to JavaScript are an array
of images, so you use "[ ]"
to access each image, "[0]" being the first
one. There's an alternative to using integers to access the images, and
that is using the name of each image. The name is something you can choose
if you want to add to an image, which makes referring to them a lot
easier. The name is inserted in the html tag.
Lets use the first image as an example:
<html>
<body>
<img
name="image1" src="Pic1.gif" width="50" height="50">
</body>
</html>
Now, to access this image, this is what you'd do
instead:
document.images["image1"]
//first image
Once you can access images, you can create animations
or mouse
over/out, even mouse down/up effects.
This can be done with the onmouseover/onmouseout event handlers-along with
the help of
preloading images. Let us first talk about images
being preloaded.
It is basically loading an image into cache before
being used, so whenever we want to use it, let it be read to appears instantaneously.
Usually, when we load a page, all image are not preloaded- that's why we
see these image becoming visible bit by bit.
Why would we want to preload an image?
- Because it is the solution to avoiding having
delays in between switches of images when using the onmouseover/onmousedown
effect- among other things.
How do we preload an image?
- By creating an instance of the image object,
and inserting it in the <head></head> tags.
Let us preload two images to be used for the onmouseover/onmouseout
effect. These are the two images we shall preload:
"Pic1.gif"
"Pic3.gif"
<head>
<script>
<!--
image1= new Image(30,30)
image1.src="Pic1.gif"
image2= new Image(30,30)
image2.src="Pic3.gif"
//-->
</script>
</head>
Notice that the preloading of the image takes place
within in <head></head> section of your webpage!
-
onMouseover/onMouseout
effects script
<html>
<head>
<script language="JavaScript">
<!--
image1= new Image(30,30)
image1.src="Pic1.gif"
image2= new Image(30,30)
image2.src="Pic3.gif"
//-->
</script>
</head>
<body>
<a href="some_file.htm"
onmouseover=
"document.images['example'].src=image2.src" onmouseout=
"document.images['example'].src=image1.src">
<img src="Pic1.gif"
name="example"></a>
</body>
</html>
Now you can try the OnMouseOver-OnMouseOut effect:
One very important point: the "onmouseover, onmouseout
handler is placed inside the link tag, not the image tag, although
we are changing the image.
Why?
- First of all, the image object does not support
the onmouseover/onmouseout handler! Instead, we place it in the link tag,
which will do the trick, because the link tag and the image tag are "connected."
-
Creating
an image slide show (unclickable)
Step 1:
Get some images!
"Pic1.gif"
"Pic2.gif"
"Pic3.gif"
Step 2:
Preload the images using
JavaScript.
The term "preload" in JavaScript refers to the
loading of images into cache prior to displaying them. Preloading images
is "necessary" in a slide show, since the switching between images have
to be instantaneous, without any delay:
<head>
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="Pic1.gif"
var image2=new Image()
image2.src="Pic2.gif"
var image3=new Image()
image3.src="Pic3.gif"
//-->
</script>
</head>
We've created three instances of the image object,
each referring to one of the images that make up the slide show. By doing
so, the images are loaded into cache, standing by for us to display at
anytime. Notice that the entire code is inserted in the <head> section
of the page.
Step 3:
Add in the html codes
necessary to display the first image of the slide show.
<body>
<img src="Pic1.gif" name="slide" width=50 height=50>
</body>
All we've done above is insert the first image
of the slide show using HTML. Notice how we gave the image a "name" attribute.
By naming the image with an arbitrary name, it enables JavaScript to access
and manipulate the image, which we will see next.
Step 4:
Preparing the script
With everything in place, all we need now is a script
that accesses the above image and changes the src of the image periodically,
creating a slide show.
<script>
<!--
//variable that will increment through the images
var step=1
function slideit()
{
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
The left handside accesses the path of image
"slide" using the image object, then the name of the image, then the keyword
"src". The path of any image in a html document can be accessed this way.
The right handside dynamically assigns a new src (path) to the image, thus
changing the image.
The three possible paths the image may receive
are:
image1.src //"Pic1.gif"
image2.src //"Pic2.gif"
image3.src //"Pic3.gif"
in that order.
Step 5:
Putting it all together.
We've preloaded the images, inserted the first
image of the slideshow, and created the function necessary to change the
path associated with the image. All we have to do now is put it all together
into one page, and we've got ourselves a slideshow:
<html>
<head>
<script
language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="Pic1.gif"
var image2=new Image()
image2.src="Pic2.gif"
var image3=new Image()
image3.src="Pic3.gif"
//-->
</script>
</head>
<body>
<img
src="1.gif" name="slide" width=50 height=50>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit()
{
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 1.5 seconds
setTimeout("slideit()",1500)
}
slideit()
//-->
</script>
</body>
</html>
-
A
slideshow with a link to a file (clickable)
Step 1:
Surround the existing
<img> tag with a <a> tag.
<a href="javascript:slidelink()"><img src="Pic1.gif"
name="slide"
width=50 height=50></a>
The above is called a JavaScript URL, and when
clicked on, will call and execute a JavaScript function, instead of load
a document. By throwing out the standard link and replacing it with a JavaScript
url, a url turns dynamic. Now, there really is nothing mysterious about
a JavaScript url- it simply executes a JavaScript function in place of
loading a html document. In the above case, the function that will be executed
is slidelink(), which we will actually implement in our next step
Step 2:
Declare & implement
function slidelink() inside the original slideshow script.
slidelink() is the function that will dynamically
change the url of the slideshow to match the image that's currently being
displayed in the slideshow. The below lists the original slideshow script:
<script>
<!--
var
step=1
//a
variable that will keep track of the image currently being displayed.
var
whichimage=1
function
slideit()
{
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function
slidelink()
{
if (whichimage==1)
window.location="first_file_link.htm"
else if (whichimage==2)
window.location="second_file_link.htm"
else if (whichimage==3)
window.location="third_file_link.htm"
}
//-->
</script>
We declared a new variable called "whichimage", which will be used to keep
track of the image currently in display. In other words, variable "whichimage"
keeps track of whether the image currently in display is the first, second,
or third image in the slideshow.
How does this variable achieve that? By retrieving the number stored inside
variable "step" just before it gets incremented during each image
rotation. Once we are able to keep track of this information, we can write
code that loads a different url, depending on the image displayed. This
is realized through function slidelink().
Step 3:
Throw everything together.
<html>
<head>
<script language="JavaScript1.1">
<!--
//preload images
var image1=new Image()
image1.src="Pic1.gif"
var image2=new Image()
image2.src="Pic2.gif"
var image3=new Image()
image3.src="Pic3.gif"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()"><img
src="1.gif" name="slide" border=0 width=40 height=40></a>
<script>
<!--
var step=1
var whichimage=1
function slideit()
{
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",2000)
}
slideit()
functionslidelink()
{
if (whichimage==1)
window.location="Ball1.htm"
else if (whichimage==2)
window.location="Ball2.htm"
else if (whichimage==3)
window.location="Ball3.htm"
}
//-->
</script>
</body>
</html>
The files Ball1.htm(Ball2.htm,
Ball3.htm) look like this one:
<html>
<head>
<title>Ball1</title>
</head>
<body>
<img src="Pic1.gif"
width="74" height="76" border="0">
</body>
</html>
Now choose which ball do you want to see bigger
in the new window.
|