...

View Full Version : Access another div from 'this'



rondog
04-09-2009, 01:26 AM
I am trying to make play button appear on top of a thumbnail when you mouse over it. Just like the thumbs on www.hulu.com. The code I have works for the first thumbnail. Any other thumbnail I mouse over, the first thumbnail's play button appears.

I somehow need to use 'this' to get the next element in the div. 'playbtn' is the element I need to get at for each thumbnail. Here is my code:

the JS:


<script type="text/javascript">
function hoveron(item)
{
document.getElementById("playbtn").style.display = 'inline';
}
function hoveroff(item)
{
document.getElementById("playbtn").style.display = 'none';
}
</script>


the HTML:


<table width="800" cellpadding="5" cellspacing="20" border="0">
<tr>
<td class="courseTable" valign="top" width="33%">
<div>
<a href="somesite.com">
<img id="thumb" border="0" src="thumb.jpg" onmouseover="hoveron(this);" onmouseout="hoveroff(this);"/>
<div id="playbtn" style="position:relative; top: -20px; left: -90px; z-index:5; display:none;"><img border="0" src="images/btn-play-big.png" /></div>
</a>
</div>
</td>
<td class="courseTable" valign="top" width="33%">
<div>
<a href="somesite.com">
<img id="thumb" border="0" src="thumb.jpg" onmouseover="hoveron(this);" onmouseout="hoveroff(this);"/>
<div id="playbtn" style="position:relative; top: -20px; left: -90px; z-index:5; display:none;"><img border="0" src="images/btn-play-big.png" /></div>
</a>
</div>
<td class="courseTable" valign="top" width="33%">
<div>
<a href="somesite.com">
<img id="thumb" border="0" src="thumb.jpg" onmouseover="hoveron(this);" onmouseout="hoveroff(this);"/>
<div id="playbtn" style="position:relative; top: -20px; left: -90px; z-index:5; display:none;"><img border="0" src="images/btn-play-big.png" /></div>
</a>
</div>
</td>
</tr>
</table>

Shannon Blonk
04-09-2009, 02:19 AM
An id must be unique -- you can't have a bunch of things with the same id. Anyway you don't need ids.

Give this a whirl
function hoveron(item)
{
item.parentNode.getElementsByTagName('div')[0].style.display = 'inline';
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum