[Tarq]

Hi, I have a feedback form on my site. It lets users send a message to me without revealing my email address and also lets me know which are there favourites areas of the site and things like that so I can further improve it. One of the questions is "Who Is Your Favourite Character?" this is in a dropdown box format. I would like to add a feature where when a character is selected in the list an image of them appears next to it. I think I have seen this before on a logo generator site where when you clicked a font in the list a preview of that font appeared. I have all the necessary images and they are all avatar sized (about 50by50 pixels). I think Javascript could help me do this but I have looked on both Dynamic Drive and Javascript Source but couldn't find anything. Does anybody know of a script or knows a link to a page that might, I would be most grateful. Thankyou for any replies

[Rockn]

It can't really be done with straight html. You could do it with ASP and an onChange event for the dropdown. YOu could also do it with flash...I think this is how most web developers do it now.

[Tarq]

Well i posted the exact same message in another vbulliten forum and they said it was possible. If I give you the code do you think you can change my dropdown to use that feature. Do you understand what I mean?

Here's the code I was given:

<form name="whatever">
<SELECT NAME="fav" SIZE="1"
onchange="img.src=document.whatever.fav.value">
<OPTION value="pic1.gif">Pic 1</OPTION>
<OPTION value="pic2.gif">Pic 2</OPTION>
<OPTION value="pic2.gif">Pic 2</OPTION>
<OPTION value="pic2.gif">Pic 2</OPTION>
</SELECT>
<img id="pic" name="pic">
</form>

PHP Code:

<form name="whatever">
<SELECT NAME="fav" SIZE="1" 
onchange="img.src=document.whatever.fav.value">
<OPTION value="pic1.gif">Pic 1</OPTION>
<OPTION value="pic2.gif">Pic 2</OPTION>
<OPTION value="pic2.gif">Pic 2</OPTION>
<OPTION value="pic2.gif">Pic 2</OPTION>
</SELECT>
<img id="pic" name="pic">
</form> 


and heres my dropdown code:

<SELECT name="Favourite_Character" size="1">
<OPTION selected> === Choose one ===
<OPTION> Pride
<OPTION> Salene
<OPTION> Siva
<OPTION> May
<OPTION> Trudy
<OPTION> Ram
<OPTION> Dee
<OPTION> Jay
<OPTION> Lex
<OPTION> Amber
<OPTION> Ved
<OPTION> Ellie
<OPTION> Dee
<OPTION> Mouse
<OPTION> Sammy
<OPTION> Java
<OPTION> Amber
<OPTION> Cloe
<OPTION> Other
</SELECT>

PHP Code:

<SELECT name="Favourite_Character" size="1">
<OPTION selected> === Choose one ===
<OPTION> Pride
<OPTION> Salene
<OPTION> Siva
<OPTION> May
<OPTION> Trudy
<OPTION> Ram
<OPTION> Dee
<OPTION> Jay
<OPTION> Lex
<OPTION> Amber
<OPTION> Ved
<OPTION> Ellie
<OPTION> Dee
<OPTION> Mouse
<OPTION> Sammy
<OPTION> Java
<OPTION> Amber
<OPTION> Cloe
<OPTION> Other
</SELECT> 


[Rockn]

Here ya go...pretty simple really

PHP Code:

<IMG SRC="images/Baseimage.gif" NAME="myImage">
<SCRIPT LANGUAGE="JavaScript"><!--
function change(what) {
value = what.options[what.selectedIndex].value;
    if (value != '')
        if (document.images)
            document.images['myImage'].src = value;
}
//--></SCRIPT>

<FORM>
<SELECT onChange="change(this)">
<OPTION>Select an image:
<OPTION VALUE="images/image1.gif">Image1
<OPTION VALUE="images/image2.gif">Image2
<OPTION VALUE="images/image3.gif">Image3
</SELECT>
</FORM> 


[Tarq]

That didn't work and I needed you to add that code to the code I gave you so that it works, each picture will be optionvalue.jpg

for example jay.jpg
dee.jpg
ebony.jpg

Can ya do that? Thankyou very much for all your help I'm hopeless at Javascript!

[Rockn]

What...you want me to do it for you? Just replace the image names in the option values and that's all you have to do. Works fine with images on my test server. Make sure the path to your images is correct also....if they are in the root of your web site remove the "images" from the image path.

[Tarq]

I tried again it didn't work, i'm slightly confused

[Rockn]

What's so confusing? Just replace the code as follows.....

PHP Code:

<OPTION VALUE="pic1.gif">Pride
<OPTION VALUE="pic2.gif">Salene
<OPTION VALUE="pic3.gif">Siva 


and so on...and so on.....EASY

[Tarq]

and thats all no Javascript like you put at the top before?