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\';"