Share this page 

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


<HTML><HEAD><SCRIPT>
// 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);
  }
</SCRIPT></HEAD><BODY>
<FORM NAME="theForm" METHOD="POST">
<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
 </SELECT>
 <TD><IMG SRC = "../images/jht.gif" HEIGHT=100 WIDTH=200>
 </TABLE></FORM></BODY></HTML>
You can try it here

NOTE : Preloading is possible without using Javascript. 

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

<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">