How to change img src link mouse hover?

Question

HTML

<div module="product_listnormal">
        <ul>
            <li>
                <input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
                <div id="prdImgWrapper">
                     <a href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" alt="" class="prdImgImg"/></a>
                </div>
.....

So i Add onmouseover in img tag

<a href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" onmouseover="this.src={$image_medium} + 'aaa'" alt="" class="prdImgImg"/></a>

but it doesn't call {$image_medium}aaa link what's wrong?

ex) if $image_medium = 111.png $image_medium + aaa = 111aaa.png

Answer 1

You have two links image_medium and image_medium2.

Say image_medium="a.jpg" and image_medium_2="a_2.jpg";

Using pure JavaScript

1) You can add listener for the same using mouseenter and mouseleave events if you know values

var divToBeHovered=document.getElementById("prdImgWrapper");
//add listener

divToBeHovered.addEventListener("mouseenter",function(){

      var imgEle=document.querySelector("#"+this.id+" img");
      imgEle.src="a_2.jpg"; //image_medium_2

},false);

divToBeHovered.addEventListener("mouseleave",function(){

      var imgEle=document.querySelector("#"+this.id+" img");
      imgEle.src="a.jpg"; //image_medium

},false);

2)If you don't know values ie src of image is dynamic then you can create one function and call it both on mouseenter and mouseleave event.

<a href="/product/detail.html{$param}" class="prdImg">
<img src="{$image_medium}" 
onmouseenter="changeURLOfImage(this,'{$image_medium}aaa')" 
onmouseleave="changeURLOfImage(this,'{$image_medium}')"
mouseralt="" class="prdImgImg"/></a>

function changeURLOfImage(imageElem,url){

    imageElem.src="url"

}

3)Assign direct values to src

<img onmouseenter='this.src ={$image_medium}aaa' onmouseleave='this.src ={$image_medium}'/>

Answer 2

I use on mouse over and on mouse leave function like this

onmouseover='this.src = this.src.replace(".jpg","_2.jpg")' onmouseleave='this.src = this.src.replate("_2.jpg", ".jpg")'

this source can use every picture

Answer 3

This can be done using pure CSS by using two images and changing the display on hover state.

 a.prdImg > img { display: inline-block; } a.prdImg > img + img { display: none; } a.prdImg:hover > img { display: none; } a.prdImg:hover > img + img { display: inline-block; } 

 <div module="product_listnormal"> <ul> <li> <input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}"> <div id="prdImgWrapper"> <a href="/product/detail.html{$param}" class="prdImg"><img src="http://media-cache-ak0.pinimg.com/736x/65/7e/a2/657ea254eb522135fbd59e0656a2e1dd.jpg" alt="" class="prdImgImg"/><img src="http://baconmockup.com/400/300" alt="" class="prdImgImg"/></a> </div> ..... 

By the way; wouldn't cause this.src={$image_medium} + 'aaa' the src to change from 111.png to 111.pngaaa ?

Answer 4

While changing image src is not possible with css you can have 2 images(one hidden) and a container and on container mouse hover hide first image and show the second image. something like this:

Html:

<div>
    <span>This could be an image</span>
    <span>This could be an image</span>
</div>

CSS:

div{
    float:left;
    width:200px;
    height:200px;
 }
div span{
    width:100%;
    height:100%;
    display:none;
    background-color:red;
 }
div span:first-child{
    display:block;
    background-color:lime;

}
div:hover span:first-child{
    display:none;
 }
div:hover span:nth-child(2){
     display:block;
}

have a look: http://jsfiddle.net/mzvaan/fs6mc952/

Answer 5

html code like

 <img src="sample1.png" id="newimg">

script like this

$(document).ready(function(e) {
    $("#newimg").hover(function() {
        $("#newimg").attr('src', 'sample2.png');
        })
});