You are here: irt.org | Articles | JavaScript | Image | Controlling Images [ previous next ]
Published on: Sunday 10th August 1997 By: Martin Webb
This article will describe how to show different images within the same document, how to show different background images within the same document, how to control images within frames, and how to present an image slide show.
If you don't know by now, you should be aware that Microsoft Internet Explorer does not support the use of the search property whilst offline. Therefore if you are using or testing the following scripts offline with MSIE then they'll not work.
By passing a search string to a document, e.g. document.htm?string, the document can retrieve this information and use it to alter the documents display. The following example takes the search string and uses it to display an image, e.g. image1.jpg. The search string is retrieved from the search property of the location object. As this returns the '?' character it is necessary to strip this using the substring(1) method which returns the string minus the first character. If a search string is not passed then a default blank image, image.jpg, is displayed:
<HTML><BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
document.write('<IMG SRC="image' + window.location.search.substring(1) + '.jpg" WIDTH=320 HEIGHT=240>');
//--></SCRIPT>
</BODY></HTML>Try these examples, which all use the same document, image.htm, but pass a different search string: Image 1, Image 2, Image 3, Image 4, Image 5 or No image
We can now use the principle from the previous example to dictate which background image is displayed, but, instead of displaying an image using the IMG tag, we use the BODY tag:
<HTML>
<SCRIPT LANGUAGE="JavaScript"><!--
document.write('<BODY BACKGROUND="image' + window.location.search.substring(1) + '.jpg">');
//--></SCRIPT>
</BODY></HTML>Try these examples, which all use the same document, back.htm, but pass a different search string: Background image 1, Background image 2, Background image 3, Background image 4, Background image 5 or No background image
We can use the last two examples within frames. First the framset definition document, which defines two frames frameA and frameb, which contain menu.htm and image.htm (i.e. the document from the first example, without a search string):
<FRAMESET COLS="50%,50%">
<FRAME SRC="menu.htm" NAME="frameA" FRAMEBORDER=0 BORDER=0>
<FRAME SRC="image.htm" NAME="frameB" FRAMEBORDER=0 BORDER=0>
</FRAMESET>The contents of menu.htm then contain links to load either the background image example (i.e. back.htm?1) or the image example (i.e. image.htm?1), both with search strings. The only extra bit is the TARGET property used to target frameB:
<HTML><BODY> <P><A HREF="back.htm?1" TARGET="frameB">Background image 1</A> <P><A HREF="image.htm?1" TARGET="frameB" >Image 1</A> </BODY></HTML>
Why not try this example out: Frame?
This next example, slides.htm, shows how to create a simple slide show. It again uses only one document, slides.htm, to control the process, which allows 5 images, image1.jpg through to image5.jpg to be displayed. It also uses a simple image based navigation bar to control which slide is to be shwon next, and also shows the current position within the slide show. It uses the search string which it is passed and passes to itself to control the image displayed.
It stores the search string into the number variable, and at the same time converts it from a string to an integer by subtracting -0. It then checks the value of number to display either the on.gif or the off.gif in the navigation bar. The off.gif images are wrapped in A and /A tags to enable them to change the images displayed. They each load the slides.htm document with the relevant search string.
Finally it preloads the next image in the slide show, unless its already showing the last image, in preparation. This gives the illusion of instantaneous image loading (may or may not work depending on the network load).
<HTML><BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
var number = window.location.search.substring(1) -0;
document.write('<IMG SRC="image' + number + '.jpg" WIDTH=640 HEIGHT=480><P>');
if (number == 1) document.write('<IMG SRC="on.gif" WIDTH=35 HEIGHT=35>');
else document.write('<A HREF="slides.htm?1"><IMG SRC="off.gif" WIDTH=35 HEIGHT=35 BORDER=0></A>');
if (number) document.write('<IMG SRC="on.gif" WIDTH=35 HEIGHT=35>');
else document.write('<A HREF="slides.htm?2"><IMG SRC="off.gif" WIDTH=35 HEIGHT=35 BORDER=0></A>');
if (number) document.write('<IMG SRC="on.gif" WIDTH=35 HEIGHT=35>');
else document.write('<A HREF="slides.htm?3"><IMG SRC="off.gif" WIDTH=35 HEIGHT=35 BORDER=0></A>');
if (number) document.write('<IMG SRC="on.gif" WIDTH=35 HEIGHT=35>');
else document.write('<A HREF="slides.htm?4"><IMG SRC="off.gif" WIDTH=35 HEIGHT=35 BORDER=0></A>');
if (number) document.write('<IMG SRC="on.gif" WIDTH=35 HEIGHT=35>');
else document.write('<A HREF="slides.htm?5"><IMG SRC="off.gif" WIDTH=35 HEIGHT=35 BORDER=0></A>');
if ((number >= 1) && (number < 5))
document.write('<IMG SRC="image' + (number + 1) + '.jpg" WIDTH=1 HEIGHT=1>');
//--></SCRIPT>
</BODY></HTML>The next example, slide.htm, uses the onLoad event to trigger the loading of the next slide after five seconds, by using the setTimeout() method. It uses the href property of the location object to set the location of the current window to the value stored in the slideName variable.
It captures the first search string passed and stores this in the number variable. The next slide will then be the slide controlled by the search string number + 1. The value of the nextSlide variable is then set to either be the slide.htm document with a new search string (i.e. next) or the index.htm document (i.e. this document).
It then finally loads the image, and if needed preloads the next image.
When the document is fully loaded, the onLoad event invokes the setNextSlide() function. Which uses the setTimeout() function to invoke the loadNextSlide() function after 5000 milliseconds (i.e. 5 seconds).
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function setNextSlide() { setTimeout("loadNextSlide()",5000); }
function loadNextSlide() { window.location.href = slideName; }
var number = window.location.search.substring(1) -0;
var next = number + 1;
if ((number >= 1) && (number < 5)) var slideName = 'slide.htm?' + next;
else var slideName = 'index.htm';
//--></SCRIPT>
</HEAD>
<BODY onLoad="setNextSlide()">
<SCRIPT LANGUAGE="JavaScript"><!--
document.write('<IMG SRC="image' + number + '.jpg" WIDTH=640 HEIGHT=480>');
if ((number >= 1) && (number < 5))
document.write('<IMG SRC="image' + next + '.jpg" WIDTH=1 HEIGHT=1>');
//--></SCRIPT>
</BODY></HTML>Why not try out the slides.htm example or the slide.htm example?.
Macromedia Fireworks Image Map Tutorial