select element and changing picture next to it

[mellin]

Ok, been posted probably thousands of times, but please need this :D

suppose i have select element such as:


<select name="user_icon" size="1">
<option value="beos-ico.gif">beos-ico</option>
<option value="bluetooth-ico.gif">bluetooth-ico</option>
</select>


I would like the user to be able to select option, then Javascript snippet would display the image next to the element, been named in the "value" attribute. To do this, need to know how :D

[mellin]

I found this, but the *stupid* script tries to find the image from the same folder, as the actual file where Javascript code is embedded.


<script type="text/javascript">
<!--
function showimage(){
if (!document.images)
return
document.images.user_icon.src=
document.publish.picture.options[document.publish.picture.selectedIndex].value
}
//-->
</script>


and the HTML


<select name="picture" size="1"
onchange="showimage()">
<option value="beos-ico.gif">beos-ico</option>
<option value="bluetooth-ico.gif">bluetooth-ico</option>
</select>


image


<img name="user_icon" src="/imgs/news/ico/tft-ico.gif" alt="" />


Which just doesn't work, 'cause the file that generates the Js on the fly, is Perl program, residing in folder where files can only be excuted.

I need to understand how to modify the script, to make browser look from different folder, other than the current parent.

[Graeme Hackston]

change the option values to match the path to the images.

Script is neither stupid or inteligent but it needs correct input.

[cheesebagpipe]

<script type="text/javascript">
<!--
function showimage(oSelect) {
var dirpath = '/imgs/news/ico/';
var file = oSelect.options[oSelect.selectedIndex].value;
document.images.user_icon.src = dirpath + file;
}
//-->
</script>

<select name="picture" size="1" onchange="showimage(this)">
<option value="beos-ico.gif">beos-ico</option>
<option value="bluetooth-ico.gif">bluetooth-ico</option>
</select>