CODEWITHSUNDEEP
javascriptonmouseoveronmouseout
mcseay
mcseay

Reputation: 43

Trigger onmouseover/onmouseout events from a different element

Any idea how (or if it is possible) to trigger the onmouseover/onmouseout events for an adjacent element. For example...

<div>
     <img src="image.jpg" onmouseover="this.src='image-alt.jpg'" onmouseout="this.src='image.jpg'">
     <span>Title</span>
</div>

How can I trigger the image swap out for the image above the span when I hover on the span. CSS won't work because this is in a Wordpress loop pulling a huge list of images and titles. The solution has to be something that is non-specific to an element so it will work when this is repeated on a page. I read somethings about binding events from one element to another but could not get anything to work. Ideas? Thanks.

Update: actual code from within Wordpress loop...

<li>
<div class="container1">
    <div class="container2">
        <a href="<?php the_permalink(); ?>">
            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onmouseover="this.src='<?php echo $imageover['url']; ?>'" onmouseout="this.src='<?php echo $image['url']; ?>'">
            <span><?php the_title(); ?></span>
        </a>
    </div>
</div>
</li>

Upvotes: 1

Views: 179

Answers (3)

Alex Taker
Alex Taker

Reputation: 203

Try using nextElementSibling. Here it is changing the title in the span next to it:

<div>
   <img src="image.jpg" onmouseover="this.src='image-alt.jpg';this.nextElementSibling.innerHTML = 'New Title'" onmouseout="this.src='image.jpg';this.nextElementSibling.innerHTML = 'Old Title'">
   <span>Title</span>
</div>

Edit: In response to the fact that I got the answer backwards, here is how to change in image while hovering the title:

<div>
   <img height="200" src="image.jpg">
   <span onmouseover="this.previousElementSibling.src='image-alt.jpg'" onmouseout="this.previousElementSibling.src='image.jpg'">Title</span>
</div>

Upvotes: 0

diynevala
diynevala

Reputation: 553

Try 

this.parentNode.querySelectorAll('img')[0].src='new.png'

in the span's onmouseover.

Upvotes: 0

tomysshadow
tomysshadow

Reputation: 932

Give the image an id and use that id to reference the image from the span.

<div>
     <img src="image.jpg" id="myImage">
     <span onmouseover="document.getElementById('myImage').src='image-alt.jpg'" onmouseout="document.getElementById('myImage').src='image.jpg'">Title</span>
</div>

EDIT: Just read it had to be non-specific. You could try getElementsByClassName.

<div>
     <img src="image.jpg" class="myImage">
     <span onmouseover="document.getElementsByClassName('myImage')[document.getElementsByClassName('myImage').length-1].src='image-alt.jpg'" onmouseout="document.getElementsByClassName('myImage')[document.getElementsByClassName('myImage').length-1].src='image-alt.jpg'" .src='image.jpg'">Title</span>
</div>

The number after ('myImage') needs to be the number of the image on the page, so I made it the number of images with the class name (the "length" of the images with the class name) .

Upvotes: 0

Related Questions