On-the-fly Image Changing

The JavaScript functions on this page allow the images below to be replaced without reloading the page.

Select the image position to change (numbers 0 through 4), and select the image to place there (numbers 1 through 5). Then press the GO button to replace the image. (Notice that since all 5 images were loaded and cached when you loaded this page, the change happens VERY quickly.)

Position: New Image:

 

  • Source 
    <HTML>
<HEAD><TITLE>Image Changing Example</TITLE>
<SCRIPT>
//function to change an image's URL
//done "the long way" for clarity
function ChangeImg() {
// current position
   x = parseInt(document.form1.pos.selectedIndex);
   p = parseInt(document.form1.pos.options[x].value);
// new image value
   x = document.form1.newimg.selectedIndex;
   i = document.form1.newimg[x].value
// change the image URL
   document.images[p].src = i + ".gif";
}
</SCRIPT>
</HEAD>
<BODY>
<H1>On-the-fly Image Changing</H1>
<hr>
The JavaScript functions on this page allow the images below to be replaced
without reloading the page.
<P>
Select the image position to change (numbers 0 through 4), and select the image
to place there (numbers 1 through 5). Then press the GO button to
replace the image. (Notice that since all 5 images were loaded and cached
when you loaded this page, the change happens VERY quickly.)
<HR>
<IMG SRC="1.gif" HEIGHT="80" WIDTH="80">
<IMG SRC="2.gif" HEIGHT="80" WIDTH="80">
<IMG SRC="3.gif" HEIGHT="80" WIDTH="80">
<IMG SRC="4.gif" HEIGHT="80" WIDTH="80">
<IMG SRC="5.gif" HEIGHT="80" WIDTH="80">
<HR>
<FORM name="form1">
<b>Position:</b>
<SELECT NAME="pos">
<OPTION VALUE="0">0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
</SELECT>
<b>New Image:</b>
<SELECT NAME="newimg">
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
</SELECT>
<INPUT TYPE="button" VALUE="GO" onClick="ChangeImg();">
</FORM>
<HR>
</BODY>
</HTML>