Question

For example I want to do something like this:

<td class="repeats">     
    <img src="a.png"/>
    <span onmouseover="this.parentNode.info.src='images/b.png'" 
          onmouseout ="this.parentNode.info.src='images/a.png'">
          text here
    </span>
</td> 

Without using an ID or JQuery (ideally) I need a way of selecting the image in the current cell. How can this be achieved?

I only want to change the current cell, as opposed to all cells with the same class.

Answer 1

Use previousSibling:

<td class="repeats">     
    <img src="a.png"/>
    <span onmouseover="this.previousSibling.src='images/b.png'" 
          onmouseout ="this.previousSibling.src='images/a.png'">
          text here
    </span>
</td> 

Docs: https://developer.mozilla.org/en-US/docs/DOM/Node.previousSibling

---

Or you can use parentNode.childNodes[0]:

<span onmouseover="this.parentNode.childNodes[0].src='images/b.png'" 
    onmouseout ="this.parentNode.childNodes[0].src='images/a.png'">
    text here
</span>