PDA

Click to See Complete Forum and Search --> : Image chagne with dropdown selection

Asim
06-29-2003, 01:11 AM
Hi
I want to change images with dropdown selection i.e if I change my combo selction my image on the right of combo box also change with out refreshing the page
Please help me
Thanks Asim
vickers_bits
06-29-2003, 05:54 AM
i'm sure this very question has been posted at least 20 times before

preload your images
use onchange from the select element


d=document;
myImgs=new Array();
function myPreload(){
if(d.images){
for(z=0; z<d.myForm.mySelect.options.length; z++){
myImgs[z]=new Image();
myImgs[z].src=myPreload.arguments[z];
}
}
};

function myChange(){
if(d.images){
d.images["myChangableImage"].src=myImgs[d.myForm.mySelect.options.selectedIndex].src;
}
};

<body onload="myPreload('image1.gif','image2.gif');">
<select name="mySelect" onchange="myChange();">
<img name="myChangableImage" height="20" width="20">
Asim
06-29-2003, 04:09 PM
Thanks
Its working but is there any method to preload image other then body tag. may be in array
Asim
Khalid Ali
06-29-2003, 04:59 PM
essentially it will all be the same.Youwant to make sure that images are preloaded and this you want to happen when page is loaded.

you can use this approach
window.onload = functionName;

define function here(){
......
}

however I don't see what is it you will aquire other then keeping your body tag less populated..:-)
Asim
06-29-2003, 06:36 PM
HI every thing is fine but when page loads the image is empty I want to repalce that empty image by white image i.e when page loads white.jpg (the first iamge)appears.
Please Help Me


<script language="JavaScript">
d=document;
myImgs=new Array();
function myPreload(){
if(d.images){
for(z=0; z<d.myForm.mySelect.options.length; z++){
myImgs[z]=new Image();
myImgs[z].src=myPreload.arguments[z];
}
}
};

function myChange(){

if(d.images){
d.images["myChangableImage"].src=myImgs[d.myForm.mySelect.options.selectedIndex].src;
}
};
</Script>

<body onload="myPreload('white.jpg', '601.jpg', '602.jpg');">
<form name="myForm">
<select name="mySelect" onchange="myChange();">

<option>Select Image</option>

<option>Image1</option>

<option>Image1</option>


</select>
<img name="myChangableImage" height="100" width="100">
</form>
Khalid Ali
06-29-2003, 11:41 PM
here is a working example...

http://68.145.35.86/temp/ImagePreloading_Asim.html
Asim
06-30-2003, 05:38 AM
hi there
Thanks for ur replybut the above link is not working(page not found).will u please send it again
Thanks again
Asim
Khalid Ali
07-01-2003, 01:56 PM
The link is updated..try it now