Hover Tables

[Tuck]

<div align="center">
<img src="http://s1.images.proboards.com/smiley.gif" onmouseover="document.getElementById('tablemain').innerHTML = document.getElementById('ID_ONE').innerHTML" href="javascript:void(0)" alt="Smiley" title="Smiley" />

<img src="http://s1.images.proboards.com/grin.gif" onmouseover="document.getElementById('tablemain').innerHTML = document.getElementById('ID_TWO').innerHTML" href="javascript:void(0)" alt="Grin" title="Grin" />

<img src="http://s1.images.proboards.com/cool.gif" onmouseover="document.getElementById('tablemain').innerHTML = document.getElementById('ID_THREE').innerHTML" href="javascript:void(0)" alt="Cool" title="Cool" />


<div id="tablemain">
Main Content Here
</div>

<div id="ID_ONE" style="display:none">
Content One Here
</div>

<div id="ID_TWO" style="display:none">
Content Two Here
</div>

<div id="ID_THREE" style="display:none">
Content Three Here
</div>

</div>



<script type="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</script>

<br />
<br />

Basic
<br />
<select style="font-size:12px;color:#000000;font-family:verdana;background-color:#D6D6D6;" onChange="location=this.options[this.selectedIndex].value;">
<option value=''>CLICK TO OPEN</option>
<option value="URL OF SITE 1">NAME 1</option>
<option value="URL OF SITE 2">NAME 2</option>
<option value="URL OF SITE 3">NAME 3</option>
<option value="URL OF SITE 4">NAME 4</option>
<option value="URL OF SITE 5">NAME 5</option>
</select>

<br />
<br />
Colors
<br />

<style type="text/css">
<!--
.jump {
background-color:#FFFF00;
font-family:arial;
text-align:center;
font-size:10px;
color:#000000;
border:1px solid #FFFFFF;
width:100px;
}
.Option1 {
background-color:#8B3A3A;
}
.Option2 {
background-color:#00FF00;
}
.Option3 {
background-color:#0000CC;
}
.Option4 {
background-color:#0000FF;
}
.Option5 {
background-color:#FFFF00;
}
.Option6 {
background-color:#FF0000;
}
-->
</style>

<form name="jump"><select class="jump" onChange="location=this.options[this.selectedIndex].value;" value="GO">
<option>Click To Open</option>
<option class="Option1" value=''>CLICK TO OPEN</option>
<option class="Option2" value="URL OF SITE 1">NAME 1</option>
<option class="Option3" value="URL OF SITE 2">NAME 2</option>
<option class="Option4" value="URL OF SITE 3">NAME 3</option>
<option class="Option5" value="URL OF SITE 4">NAME 4</option>
<option class="Option6" value="URL OF SITE 5">NAME 5</option>
</select></form>