------------------------------NO 1???
<style>
.spiderpic{position: relative;z-index: 0;}
.spiderpic:hover{background-color: transparent;z-index: 50;}
.spiderpic span{position: absolute;background-color: white;padding: 5px;left: -1000px;border: 1px solid black;visibility: hidden;color: black;text-decoration: none;}
.spiderpic span img{border-width: 0;padding: 2px;}
.spiderpic:hover span{visibility: visible;top:-110;left:60px;}
</style>
<a class="spiderpic" href="http://webdesigninfo.wordpress.com"><img src="http://a.wordpress.com/avatar/settysantu-48.jpg?1180110315" width="48px" height="48px" border="0" /><span><img src="http://www.stumbleupon.com/mainpics/2725502.jpg" /></span></a>
<script type="text/javascript">
function ShowPopup(hoveritem)
{hp =eval("hoverpopup");
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;
hp.style.visibility = "Visible";}
function HidePopup(){hp =eval("hoverpopup");hp.style.visibility="Hidden";}
function HidePopupz(){myimagename.style.visibility="Hidden";}
function HidePopupon(){myimagename.style.visibility="visible";}
</script>
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me 1!</a>
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me 2!</a>
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me 3!zzz</a>
<br>This is somezzzzzzzz<br><a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me 3!zzz</a>
incidental<br>
Text.
<div id="hoverpopup" style="visibility:visible; position:absolute; top:0; left:220;z-index:311;">
<table bgcolor="#0000FF">
<tr><td><font color="#FFFFFF">This is my popup</font></td></tr>
<tr><td bgcolor="#8888FF">Hello I am a popup table</td></tr>
</table></div>
__________________________________________________ ___________________
Where the text says hover over me! I am placing images instead of text.
Maybe I am asking the wrong question.
How do SE's like hidden tables? Since it is a js I figured bots will not like it but so what. The page is for humans. :)
The code I posted below works fine. To add more boxes just ad more lines like below and increment the red numbers
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(3);" onMouseOut="HidePopup(3);">Hover over me!</a>
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(4);" onMouseOut="HidePopup(4);">Hover over me!</a>
And the boxes are<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(4);" onMouseOut="HidePopup(4);">Hover over me!</a>
<div id=3 style="visibility:hidden; position:absolute; top:100; left:100;">
<table bgcolor="#00FFFF">
<tr><td><font color="#FFFFFF">This is my popup</font></td></tr>
<tr><td bgcolor="#888DFF">Hello I am a popup table</td></tr>
</table></div>
<div id=4 style="visibility:hidden; position:absolute; top:100; left:100;">
<table bgcolor="#00FFFF">
<tr><td><font color="#FFFFFF">This is my popup</font></td></tr>
<tr><td bgcolor="#888DFF">Hello I am a popup table</td></tr>
</table></div>
<a href=# id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(4);" onMouseOut="HidePopup(4);">Hover over me!</a>
<a href=# id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(3);" onMouseOut="HidePopup(4);">Hover over me!</a>
<a href=# id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(2);" onMouseOut="HidePopup(4);">Hover over me!</a>
-----------------------------NO 2???
<script type="text/javascript">
<!--
function outputLAYER(layName,html){
if(document.layers)
{
with(document.layers[layName].document)
{open()
write(html)
close()}}else
document.getElementById(layName).innerHTML=html}
var img0= new Image()
img0.src = './htm1.gif'
var htm0 = '<div id="divMenu"><a href="javascript://" onclick="moveMenu()">innMENU</a>-<a href="javascript://">Link1</a>-<a href="javascript://">Link2</a>-<a href="javascript://">Link3</a>-<a href="javascript://">Link4</a><b>‚‚‚•ϐ”htm0‚“—e‚‚</b></div>'
var htm1 = '<a href="javascript://" onclick="moveMenu()">MENU</a><img src="'+img0.src+'">'
var htm2 = '<form><input type="button"'
+ ' style="background-color:pink;width:250px;height:30px"'
+ ' value="‚‚‚‚‚‚ƒtƒH[ƒ€‚‘‚o‚‚‚"'
+ ' onclick="alert(\'htm2\')"><br>'
+ ' <input type="text" value="html2">'
+ '</form>'
var htm3 = '<a href="javascript://" onclick="moveMenu()">MENU</a>-<a href="javascript://">Link1</a>-<a href="javascript://">Link2</a>-<a href="javascript://">Link3</a>-<a href="javascript://">Link4</a><a href="javascript://" onclick="moveMenu()">MENU</a>-<a href="javascript://">Link1</a>-<a href="javascript://">Link2</a>-<a href="javascript://">Link3</a>-<a href="javascript://">Link4</a><b>‚‚‚•ϐ”htm0‚“—e‚‚</b>'
var htm4 = '<a href="javascript://" onclick="moveMenu()">44444MENU</a>'
//--></script>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup',htm0)">test0htm0</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup',htm1)">test0htm1</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup',htm2)">test0htm2</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup','divMenuCont','htm0')">divMenuhtm2mmm</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup','divMenuCont','htm2')">divMenuhtm2mmm</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup',htm0)">divMenuConthtm0??</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup',htm3)">divMenuConthtm3??</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('hoverpopup',htm2)">divMenuConthtm2??</a>
<a href="javascript:void(0)"
onmouseover="outputLAYER('divMenuCont',htm1)">divMenuConthtm1?</a>
<a href="javascript:void(0)"onmouseover="outputLAYER('divMenu',htm1)">htm2</a>
<a href="javascript:void(0)"onmouseover="divMenuCont('divMenu',htm0)">htm0</a>
<a href="javascript:void(0)"onmouseover="outputLAYER('divMenu',htm1)">htm1</a>
<a href="javascript:void(0)"onmouseover="outputLAYER('divMenu',htm2)">htm2</a>
<a href="javascript:void(0)"onmouseover="outputLAYER('divMenu',htm3)">htm3</a>
<a href="javascript:void(0)"onmouseover="outputLAYER('divMenu','htm4')">htm4</a>
<STYLE>
//#divMenu{position:absolute; left:0; top:315; width:300; height:130; clip:rect(0,300,90,0); z-index:111;background-color:green; layer-background-color:#9797FF;}</STYLE>
<div id="divMenu">
<a href="javascript://" onclick="moveMenu()">MENU</a>-<a href="javascript://">Link1</a>-<a href="javascript://">Link2</a>-<a href="javascript://">Link3</a>-<a href="javascript://">Link4</a>
</div>
--------------------N0I 3???
<SCRIPT LANGUAGE="JavaScript"><!--
var position = -1;
for (var i=0;i<document.images.length;i++)
if (document.images[i].name == 'thisone')
position = i;
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!--
function show(name,src) {
if (document.images)
document.images[name].src = src;}
//--></SCRIPT>
<TABLE><TR><TD>
<A HREF="javascript:show('myimagename','1.gif');" onMouseOver="show('myimagename','1.gif');HidePopupon()" onMouseOut="HidePopupz();"><IMG SRC="1c.gif" WIDTH="50" HEIGHT="50" BORDER="0"></A>
<A HREF="javascript:show('myimagename','2.gif')" onMouseOver="show('myimagename','2.gif');HidePopupon()" onMouseOut="HidePopupz();"><IMG SRC="2c.gif" WIDTH="50" HEIGHT="50" BORDER="0"></A>
<A HREF="javascript:show('myimagename','3.gif')"onMouseOver="show('myimagename','3.gif');HidePopupon()" onMouseOut="HidePopupz();"><IMG SRC="2c.gif" WIDTH="50" HEIGHT="50" BORDER="0"></A>
</TD></TR><TR><TD>
<IMG SRC="1.gif" NAME="myimagename" HEIGHT="200" WIDTH="200"style="position:absolute; left:110; top:1; visibility:visible">
</TD></TR></TABLE>