Share this page 

Preload images and change them with a SELECTTag(s): Form

// preload images
var img1 = new Image().src = "../images/jht.gif"
var img2 = new Image().src = "../images/jsht.gif"
var img3 = new Image().src = "../images/pht.gif"

function setImage(imageSelect) {
 theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
 if (document.images)
     document.images[0].src = eval("img" + theImageIndex);
<TABLE><TR><TD>Images: <TD>
<SELECT NAME="items" onChange="setImage(this)">
   <OPTION VALUE="1">Java How-to
   <OPTION VALUE="2">Javascript How-to
   <OPTION VALUE="3">Powerbuilder How-to
 <TD><IMG SRC = "../images/jht.gif" HEIGHT=100 WIDTH=200>
You can try it here

NOTE : Preloading is possible without using Javascript.

<style type="text/css">
preload {display:none;}

<img src="../images/jht.gif" 
   alt="java how to" title="java how to" class="preload">
<img src="../images/jsht.gif" 
   alt="javascript how to" title="javascript how to" class="preload">
<img src="../images/pht.gif" 
   alt="powerbuilder how to" title="powerbuilder how to" class="preload">