Change Image onmouseover and onmouseout

Question

I'm coding with php, I want to make a simple image change when hovering on it. I'm using this code:

echo '<li class="'.$icon['footer_social_icon'].'">
        <img src="../wp-content/uploads/img1.png"
        onmouseover="this.src="../wp-content/uploads/img2.png";"
        onmouseout="this.src="../wp-content/uploads/img1.png";"/>
    </li></ul>';

I don't know why it doesn't work!

Answer 1

Look at the quotes

onmouseover="this.src="../wp-content/uploads/img2.png";"

That is why it fails. You need to use escaped single quotes since you are using php to output the HTML

onmouseover="this.src=\'../wp-content/uploads/img2.png\';"

Answer 2

A better approach might be to just use CSS because you don't have to worry too much about coding.

in CSS do the following:

.icon {
      background-image: url('/the-name-of-your-image.png');
      width: 100px; /* width of your image */
      height: 100px; /* height of your image */
}
.icon:hover {
      background-image: url('/the-image-when-you=hover.png');
}

Your HTML would look something like this:

<li class="icon"></li>

When someone moves their mouse over the LI element CSS will change the image to the one in the icon:hover, and then when you move the mouse off the LI element it will revert back to it's original.

Answer 3

epascarello's answer will probably do the trick.

You can also place both images as separate images in the li, and change them with CSS.

echo '<li class="'.$icon['footer_social_icon'].'">
    <img src="../wp-content/uploads/img1.png" class="img1" />
    <img src="../wp-content/uploads/img2.png" class="img2" />
</li></ul>';

CSS:

.img2 {
    display: none;
}

li:hover .img1 {
    display:none;
}

li:hover .img2 {
    display: inline; /* Or block, whichever you prefer */
}

This way will also work on computers without javascript.