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).

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

Tutorial Details

Author birdman View profile
Submitted on Jun 25, 2006
Page views 25,555
Favorites 13
Comments 8

Tutorial Tags