Forum Moderators: open
I am doing a exercise for self study. the requirement is
a) when user choose a image names from drop down box, the image will shown, then choose another image name will replace previous image.
b) use selected image as links point to differnt URL, when On a MouseOver also have a Status Bar Message appear for each individual Image, on a MouseOut status image will be clared.
My first try is like this:
<body>
<h2 style = "text-align: center; color: #808080"> Choose a Picture and Jump</h2>
<center>
<form>
<select onChange="location.href=options[selectedIndex].value">
<option value="images/me.gif">Picture of me</option>
<option value="images/myaunt.gif">Picture of my aunt</option>
<option value="images/brother.gif">Picture of my brother</option>
</select>
</form>
</center>
</body>
Image get displayed, in the first try, but I don't know how to turn selected images as links.
hence I have my second thought <select onChange="showimage(this.form, this)">
this may need image swampping while user choose different images names in drop down box. Please give me
some advises on how to make this exercise work. I appreciate your help!
Jeff
5-20-06
<style type="text/css">.swappedIn { display:none} </style>
<script type="text/javascript">
swap(theDiv) {
document.getElementById('content').innerHTML = document.getElementById(theDiv).innerHTML;
document.getElementById(theDiv).style.display='block';
}
</script>
<select onchange="swap(...)"></select>
<div id=content></div>
<div id=one class=swappedIn>
<a href=/one.html><img src=one.jpg></a>
</div>
<div id=two class=swappedIn>
<a href=/two.html><img src=two.jpg></a>
</div>
