[英]How to change img src link mouse hover?
HTML 的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 所以我在img标签中添加了onmouseover
<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?
但它没有调用
{$image_medium}aaa link what's wrong?
ex) if $image_medium = 111.png $image_medium + aaa = 111aaa.png
例如)
if $image_medium = 111.png $image_medium + aaa = 111aaa.png
You have two links image_medium and image_medium2. 您有两个链接image_medium和image_medium2。
Say image_medium="a.jpg" and image_medium_2="a_2.jpg"; 说出image_medium =“ a.jpg”和image_medium_2 =“ a_2.jpg”;
Using pure JavaScript 使用纯JavaScript
1) You can add listener for the same using mouseenter and mouseleave events if you know values 1)如果知道值,则可以使用mouseenter和mouseleave事件添加相同的侦听器
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. 2)如果您不知道值,即图像的src是动态的,则可以创建一个函数,并在mouseenter和mouseleave事件上都调用它。
<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 3)将直接值分配给src
<img onmouseenter='this.src ={$image_medium}aaa' onmouseleave='this.src ={$image_medium}'/>
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 这个来源可以使用每张照片
This can be done using pure CSS by using two images and changing the display on hover state. 可以使用纯CSS通过使用两个图像并更改悬停状态下的显示来完成此操作。
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
? 不会导致
this.src={$image_medium} + 'aaa'
111.png
从111.png
更改为111.pngaaa
吗?
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. 虽然无法使用CSS更改图像src,但您可以有2张图像(一个隐藏)和一个容器,并且在容器上悬停时隐藏第一张图像并显示第二张图像。 something like this:
像这样的东西:
Html: HTML:
<div>
<span>This could be an image</span>
<span>This could be an image</span>
</div>
CSS: 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/ 看看: http : //jsfiddle.net/mzvaan/fs6mc952/
<img src="sample1.png" id="newimg">
$(document).ready(function(e) {
$("#newimg").hover(function() {
$("#newimg").attr('src', 'sample2.png');
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.