in search of code snipplet... image preview from form field

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

in search of code snipplet... image preview from form field

Post by m3mn0n »

I have a form with a drop down menu that will allow a user to pick from a multitude of images that are no more than 50x50 each. There is about 200 in all. A user of the site requested they be able to preview the image before making a selection.

I tried, with my limited javascript abilities, to create this solution myself, but failed (yeah I need a bit more work with creating JS from scratch ;)). I was searching for a snipplet that would do this but I can't seem to find the right one.

Anyone have one in their code libraries or know of a good link which will help me solve this problem? Thanks!
qads
DevNet Resident
Posts: 1199
Joined: Tue Apr 23, 2002 10:02 am
Location: Brisbane

Post by qads »

i had the same problem, i had to look around for ages and i know VERY little javascript lol :D

have fun


in select field:

Code: Select all

onChange="generateimage(this.optionsїthis.selectedIndex].value)"
put this where u would like the image to show up...i have it after the dropdown so i am not sure if it would above it.

Code: Select all

<ilayer id="dynamic1" width=100% height=178>
<layer id="dynamic2" width=100% height=178><div id="dynamic3">
</div>
</layer>
</ilayer>
<script>
//enter image descriptions ("" for blank)
var description=new Array()
description&#1111;1]=""


var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which)&#123;
if (ie4||ns6)&#123;
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+'</center>'
&#125;
else if (document.layers)&#123;
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+'</center>')
document.dynamic1.document.dynamic2.document.close()
&#125;
else
alert('You need NS 4+ or IE 4+ to view the images!')
&#125;

function generatedefault()&#123;
generateimage(tempobj.options&#1111;tempobj.options.selectedIndex].value)
&#125;

if (ie4||ns6||document.layers)&#123;
if (tempobj.options.selectedIndex!=-1)&#123;
if (ns6)
generatedefault()
else
window.onload=generatedefault
&#125;
&#125;
</script>
this is a cut and paste, so there might be \" in the code, dont forgot to take them out :P
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

Post by m3mn0n »

Thanks a lot, Qads! :)
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

damn. longer than the script function i made, but since it works....
Post Reply