Question

<img src="img/image1.png" id="mainimage">

<p><a href="#" id="pet1">Dog</a></p>
<p><a href="#" id="pet2">Cat</a></p>

我正在尝试使用JavaScript / jQuery，以便每当用户将鼠标放在ID为id1＆amp; s的任何链接上时pet2它会改变图像的图像src，其id为mainimage。

var img = document.getElementById('swap');
document.getElementById('pet1').onmouseover = function(){
    // manipulate the image source here.
    img.src = img.src.replace(/\.jpg/, '-on.jpg');
}

上面的JavaScript是我在这里找到的一个脚本，它似乎具有我正在寻找的功能。唯一的问题是，只要我的鼠标在链接上，它就不会显示我想要的图像。好的，我正在寻找的问题是如何使用源（img / pet1.jpg）显示图像？

任何帮助将不胜感激！

Answer 1

更简单地试试

$(function() {
    $("#pet1")
        .mouseover(function() { 
            var src = 'first image path';
            $("#mainimage").attr("src", src);
        })
        .mouseout(function() {
            var src2 ='Default image path';
            $(this).attr("src", src2;
        });
});

Similllar用于第二张图像，为了缩短这个，您可以为所需的每个链接提供一个类，然后使用 $（元素）.each（）函数和＆＃34;数据＆＃34; html5的属性你可以用更酷的方式管理它

Answer 2

这应该让你开始。

对于所有链接，我们设置了一个鼠标悬停处理程序（它获取链接的ID，将其转换为图像的路径并显示它）和一个mouseout处理程序（将图像的src恢复为它原来的形象）。

$(document).ready(function() {
    // To start with, get a reference to the image and its original src
    var $mainImage = $('#mainimage'),
        originalImageSrc = $mainImage.attr('src');

    // Then add mouseover and mouseout handlers to all the links
    $('a')
        .on('mouseover', function() {
            var newImageSrc = 'img/' + $(this).attr('id') + '.jpg';
            $mainImage.attr('src', newImageSrc);
        })
        .on('mouseout', function() {
            $mainImage.attr('src', originalImageSrc);
        });
});

您可以在this JSFiddle中看到它正常工作。所以你可以看到它在没有真实图像的JSFiddle中工作，我使用了div的{{1}}而不是text的{{1}}，但这只是用于演示。

当然你可以随时调整它（也许你想要比所有img标签更具体，也许你并不总是想要使用格式{{1} - 在这种情况下，您可以为所有链接添加src属性，并使用a代替img/<id>.jpg。

Answer 3

希望这就是你要找的东西。

HTML：

<img src="http://placehold.it/300x150" id="theImage">
<p><a href="#" class="yourClass" data-img="http://placehold.it/300x150/f00">Red</a></p>
<p><a href="#" class="yourClass" data-img="http://placehold.it/300x150/00f">Blue</a></p>

JS：

$('.yourClass').hover(function() {
  var newImg = $(this).data('img');
$('#theImage').attr('src',newImg)
}, function() {
  $('#theImage').attr('src','http://placehold.it/300x150')
});

JSFiddle

在鼠标悬停时更改图像源，然后在mouseout上重新获取图像

3 个答案: