Access another div from 'this'

programming web dev
1

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>