使用 jQuery 更改图像？答案

【问题标题】：change images using jQuery?使用 jQuery 更改图像？
【发布时间】：2009-07-09 23:36:22
【问题描述】：

我正在尝试根据您悬停的列表项更改图像。

我有一个包含 ul 的容器。我有三个列表项（一个小的水平导航）。列表项位于容器的底部，在 li 的顶部留下一个空白空间。我希望 li 上方的空白空间根据我将鼠标悬停在哪个列表项上来更改图像。将有 3 个不同的图像，或者可能使用 css sprites。

有什么方法可以用 jQuery 实现这一点吗？

【问题讨论】：

标签： jquery html css image

【解决方案1】：

HTML：

<div id="container">
    <img id="yourImg" src="spacer.gif" width="..." height="...">
    <ul id="yourUL">
        <li data-imageswap="someimg.png">One</li>
        <li data-imageswap="another.png">Two</li>
        <li data-imageswap="andathird.png">Three</li>
    </ul>
 </div>

脚本：

$('li','#yourUL').hover(function(){
    $('#yourImg').attr('src',this.getAttribute('data-imageswap'));
}

您可以使用data 属性以外的其他属性（例如className 或id）来指向您的图像，但这应该是它的要点。

在您的图像中粘贴一个透明的 1x1 gif 开始，您可以将其缩放到所需的宽度和高度。或者，如果您想在没有图像的情况下开始，您可以从无图像开始并将其写入 DOM。

【讨论】：

【解决方案2】：

您可以为此使用jQuery UI Tabs 插件。可能有点矫枉过正，但它会工作。您可以将用于选择选项卡的事件更改为悬停，如下所示：

$('.selector').tabs({ event: 'mouseover' });

这里有一个超级快速的演示，可能会有所帮助（我已经测试过，它可以工作），但显然你会想要使用自己的 CSS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Tabs Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            $('#tabs').tabs({ event: 'mouseover' });
        });
        //]]>
    </script>
</head>
<body>
    <div id="tabs">
        <div id="tabs-1">
            <img src="images/image1.jpg" alt="image1" />
        </div>
        <div id="tabs-2">
            <img src="images/image2.jpg" alt="image2" />
        </div>
        <div id="tabs-3">
            <img src="images/image3.jpg" alt="image3" />
        </div>
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
    </div>
</body>
</html>

【讨论】：

坚果和大锤浮现在脑海中。你为什么要为他想要的东西使用标签？
因为它的功能基本相同（将鼠标悬停在列表项上以隐藏/显示相关内容），如果他不是特别了解这将是一个简单的实现（特别是如果他已经运行了 jQuery UI网站）。当然，鉴于他没有发布任何代码，我真的不知道他的确切情况。他有一百种不同的方法可以做到，这只是其中一种。取决于他实际上想要我的首选方法是纯 CSS 解决方案。