Access another div from 'this'

[rondog]

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>

[Kieran Menor]

If you are loading it from a database, just append the row ID (assuming there is one) to the element ID. Like so:

 

<img id="thumb_123" border="0" src="thumb.jpg" onmouseover="hoveron(123);" onmouseout="hoveroff(123);"/>
<div id="playbtn_123" style="position:relative; top: -20px; left: -90px; z-index:5; display:none;"><img border="0" src="images/btn-play-big.png" /></div>

 

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

 

The rule is that element IDs must be unique. So if you're not loading from a database, just make sure they are. If you wish to use this from the <img> tag, you would need something like this.nextSibling in order to refer to the <div>. It may however, just refer to the space between the two elements. I recommend that you have no line breaks, tabs, spaces or anything else between them.

[rondog]

Well its coming from an XML file and I am using ASP. I just learned ASP today to get the damn XML loaded. Haha..I think I can figure out how to append a unique id to it in my loop using ASP.

[Kieran Menor]

Could you post the code?

[rondog]

alright man I did what you said and it works great..Appreciate it!