Tutorial
Click on thumbnailed images to enlarge
<script type="text/javascript">
<!-- INSERT YOUR IMAGE URLS HERE -->
imgList = new Array(
"img1.gif","img2.jpg","img3.bmp"
);
<!-- THE MAIN FUNCTION, NEEDS NO CHANGES -->
function changeImage(){
imgFetch = document.canvasForm.canvasSelect.value;
if(imgFetch == ""){
false;
}else{
document.write("<div><img border='0' src='"+imgFetch+"' /></div>");
document.write("<a href='javascript:history.go(-1);'>go back</a>");
}
}
<!-- THIS IS THE SELECT FORM -->
document.write("<form name='canvasForm'>");
document.write("<select name='canvasSelect' size='1' onchange='changeImage()'>");
document.write("<option value=''>select image...</option>");
for(imgC=0;imgC<imgList.length;imgC++){
document.write("<option value='"+imgList[imgC]+"'>"+imgList[imgC]+"</option>");
}
document.write("</select>");
document.write("</form>");
document.write("<div id='theCanvas'></div>");
</script>
1) First you have an array that keeps all of your image URLs.
2) Then the function that loads up the value from the select box.
3) And writes the <img> tag with the loaded image value (URL).
<!-- INSERT YOUR IMAGE URLS HERE -->
imgList = new Array(
"img1.gif","img2.jpg","img3.bmp"
);
<!-- THE MAIN FUNCTION, NEEDS NO CHANGES -->
function changeImage(){
imgFetch = document.canvasForm.canvasSelect.value;
if(imgFetch == ""){
false;
}else{
document.write("<div><img border='0' src='"+imgFetch+"' /></div>");
document.write("<a href='javascript:history.go(-1);'>go back</a>");
}
}
<!-- THIS IS THE SELECT FORM -->
document.write("<form name='canvasForm'>");
document.write("<select name='canvasSelect' size='1' onchange='changeImage()'>");
document.write("<option value=''>select image...</option>");
for(imgC=0;imgC<imgList.length;imgC++){
document.write("<option value='"+imgList[imgC]+"'>"+imgList[imgC]+"</option>");
}
document.write("</select>");
document.write("</form>");
document.write("<div id='theCanvas'></div>");
</script>
1) First you have an array that keeps all of your image URLs.
2) Then the function that loads up the value from the select box.
3) And writes the <img> tag with the loaded image value (URL).
Tutorial Comments
Showing latest 8 of 8 comments
wicked cool thx
By emmasawr on Jan 19, 2009 1:05 pm
why, thank u :)
By birdman on Sep 2, 2008 7:27 pm
good tutorial.
By shortcake on Aug 24, 2008 8:48 pm
You people are idiots!
LOL. They think everything is for myspace.
By IBangBaby on Nov 16, 2007 6:49 pm
what is?
By birdman on Oct 30, 2007 5:58 am
HUH????
By Natsuru on Oct 17, 2007 8:03 pm
really weird.
By acidqueen on Oct 7, 2007 10:40 pm
WEiiRD
By NNACONA on Sep 9, 2007 7:00 pm
