Question

我有5张小图片和1张图片，尺寸是小图片的两倍。我要做的是，无论何时将鼠标悬停在小图像上，大图像都会改变为您正在悬停的图像。我很难找到方法和功能但是还没有好运。这就是我所拥有的

<div class="bigImg">
    <img id="image0" src="images/image1.png">
</div>
<img id="image1" src="images/image1.png">
<img id="image2" src="images/image2.png">
<img id="image3" src="images/image3.png">
<img id="image4" src="images/image4.png">
<img id="image5" src="images/image5.png">

我试图添加我在其他地方看到的这个功能

function mouseOver() {
    document.getElementById("image0").innerHTML = '<"image2.png"/>';
}


function mouseOut() {
    document.getElementById("image0").innerHTML = '<img src="image1.png" />';
}

我将img标签写为

<img id="image1" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/image1.png">

所有图片但不起作用。有人可以引导我朝着正确的方向前进吗？

Answer 1

我就这样做了：

function mouseOut() {
    document.getElementById("image0").src = 'http://lorempixel.com/g/600/600/';
}

function changePic(elem) {
    document.getElementById("image0").src = elem.src;
}

Here is the JSFiddle demo

Answer 2

如果你想使用Jquery这样做，你可以试试这个。

<div class="bigImg"></div>
<img class="imgLink" src="http://dummyimage.com/100x100/eb00eb/fff" target="http://dummyimage.com/100x100/eb00eb/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/000/fff"  target="http://dummyimage.com/100x100/000/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/999/fff"  target="http://dummyimage.com/100x100/999/fff">

<强> JS

$('.imgLink').hover(function(){
    $('.bigImg').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
    $('.bigImg').css({'background':''});
});

Demo here

Answer 3

这背后的基本概念是我们必须捕捉mouseover和mouseout事件。现在，在鼠标悬停时，我们必须更改该特定Image的src属性，反之亦然，以获取原始图像。

试试这个：

function mouseOver(element) {
document.getElementById(element).src = 'https://www.google.co.in/images/google_favicon_128.png';
}

function mouseOut(element) {
document.getElementById(element).src = 'https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png';
}

<div class="bigImg"><img id="image0" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"></div>
<img id="image1" onmouseover="mouseOver('image1')" onmouseout="mouseOut('image1')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image2" onmouseover="mouseOver('image2')" onmouseout="mouseOut('image2')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image3" onmouseover="mouseOver('image3')" onmouseout="mouseOut('image3')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image4" onmouseover="mouseOver('image4')" onmouseout="mouseOut('image4')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image5" onmouseover="mouseOver('image5')" onmouseout="mouseOut('image5')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">

当悬停在另一个图像上时如何将图像与另一个图像交换？

3 个答案: