Hey,
So I'm experimenting with Javascript and I am making a simple site that features a grid of images and when you mouseover (I'll probably change this to mousedown) a pop-up box appears to the right with some info.
This works fine when not bound within a table, but as soon as the content is in a table it refuses to move to where the link is. At the bottom of the code is an example of it outside of a table which works fine. I just would really like it to work in a table because of the more rigid structure I get from that, the content is always evenly distributed across the page, no big empty spaces. I also am deliberately trying to make the grid work for all different resolutions which is why every width/height is a %, and am hoping it can work this way too. Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Music</title>
<style type="text/css" media="screen">
body {
background: #1b1b1b;
}
#wrapper {
width:100%;
height:1000px;
}
table#main {
width:100%;
height:100%;
}
table#main td {
width:16.667%;
height:14.29%;
}
table#main img {
width:90%;
color:#333;
}
#messageBox{
position: absolute;
padding-left:7px;
margin-left:1%;
width: 217px;
height:auto;
z-index: 1;
display:none;
background:url(images/arrow.png) left no-repeat;
}
#closeButt{
width: 100%;
padding-right:10px;
height: 12px;
font-size:10px;
font-family:Calibri, Modern, Blackletter, Minion, Roman;
z-index: 1;
left: 0px;
color:#CCC;
top: 0px;
background-color: #660000;
}
#contents{
width: 100%;
padding:10px;
color:#FFF;
background-color: #8d1001;
font-family: Georgia, Palatino, Roman, Calibri, serif;
font-size:12px;
height: auto;
z-index: 2;
}
#notable {
width:100%;
}
#dude {
width:15%;
color:#333;
margin:left;
margin:right;
}
</style>
<script language="javascript">
function show(obj,msg){
messageBox.style.top=obj.offsetTop
messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5
contents.innerHTML=msg+"<p>"+obj.href
messageBox.style.display="block"
//alert(obj.offsetWidth);
}
</script>
</head>
<body>
<div id="wrapper">
<a onMouseOver="show(this,'Demon Days')" onMouseOut="messageBox.style.display='none'">HELLO</a>
<table id="main" cellspacing="10px">
<tr>
<td>
<a onMouseOver="show(this,'Demon Days')" onmouseout="messageBox.style.display='none'"><img src="images/artwork/demondays.jpg" border="6%" /></a>
</td>
<td>
<a onMouseOver="show(this,'Its Blitz')" onMouseOut="messageBox.style.display='none'"><img src="images/artwork/itsblitz.jpg" border="6%" /></a>
</td>
<td>
<a onMouseOver="show(this,'Mellon Collie and the Infinite Sadness')" onMouseOut="messageBox.style.display='none'"><img src="images/artwork/melloncollie.jpg" border="6%" /></a>
</td>
<td>
<a onMouseOver="show(this,'Kid A')" onMouseOut="messageBox.style.display='none'"><img src="images/artwork/kida.jpg" border="6%" /></a>
</td>
<td>
<a onMouseOver="show(this,'White Blood Cells')" onMouseOut="messageBox.style.display='none'"><img src="images/artwork/whitebloodcells.jpg" border="6%" /></a>
</td>
<td>
<a onMouseOver="show(this,'Ten')" onMouseOut="messageBox.style.display='none'"><img src="images/artwork/ten.jpg" border="6%" /></a>
</td>
</tr>
<tr>
<td>
<a onMouseOver="show(this,'IV')" onMouseOut="messageBox.style.display='none'">
<img id="thumb" src="images/artwork/iv.jpg" border="6%" /></a>
</td>
<td>
<img src="images/artwork/renegades.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/foodandliquor.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/showyourbones.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/watchout.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/sgtpeppers.jpg" border="6%" />
</td>
</tr>
<tr>
<td>
<img id="thumb" src="images/artwork/inrainbows.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/oracularspectacular.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/rushofbloodtothehead.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/thewall.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/housesoftheholy.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/blackstar.jpg" border="6%" />
</td>
</tr>
<tr>
<td>
<img id="thumb" src="images/artwork/discovery.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/thecool.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/theblueprint.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/blackholesandrevalations.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/endtroducing.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/whitealbum.jpg" border="6%" />
</td>
</tr>
<tr>
<td>
<img id="thumb" src="images/artwork/fevertotell.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/madvillainy.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/darksideofthemoon.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/psyencefiction.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/manners.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/blackalbum.jpg" border="6%" />
</td>
</tr>
<tr>
<td>
<img id="thumb" src="images/artwork/alive2007.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/mmfood.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/stadiumarcadium.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/blackonbothsides.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/wolfgangamadeusphoenix.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/parachutes.jpg" border="6%" />
</td>
</tr>
<tr>
<td>
<img id="thumb" src="images/artwork/funeral.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/xx.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/nevermind.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/vivalavida.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/revolver.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/okcomputer.jpg" border="6%" />
</td>
</tr>
<tr>
<td>
<img id="thumb" src="images/artwork/darknight.jpg" border="6%" />
</td>
<td>
<img src="images/artwork/plasticbeach.jpg" border="6%" />
</td>
</tr>
</table>
<a onMouseOver="show(this,'Demon Days')" onmouseout="messageBox.style.display='none'"><img id="dude" src="images/artwork/demondays.jpg" border="6%" /></a>
<a onMouseOver="show(this,'Its Blitz')" onMouseOut="messageBox.style.display='none'"><img id="dude" src="images/artwork/itsblitz.jpg" border="6%" /></a>
<a onMouseOver="show(this,'Mellon Collie and the Infinite Sadness')" onMouseOut="messageBox.style.display='none'"><img id="dude" src="images/artwork/melloncollie.jpg" border="6%" /></a>
<a onMouseOver="show(this,'Kid A')" onMouseOut="messageBox.style.display='none'"><img id="dude" src="images/artwork/kida.jpg" border="6%" /></a>
<a onMouseOver="show(this,'White Blood Cells')" onMouseOut="messageBox.style.display='none'"><img id="dude" src="images/artwork/whitebloodcells.jpg" border="6%" /></a>
<a onMouseOver="show(this,'Ten')" onMouseOut="messageBox.style.display='none'"><img id="dude" src="images/artwork/ten.jpg" border="6%" /></a>
</div>
<div id="messageBox">
<div id="closeButt"></div>
<div id="contents"></div>
</div>
</body>
</html>
