使用jQuery更改图像？
[英]change images using jQuery?
问题描述
I'm trying to make an image change depending on the list-item you hover on. 
我试图根据您悬停的列表项来更改图像。
I have a container containing an ul. 我有一个装有ul的容器。 I have three list-items (a small horizontal navigation). 我有三个列表项（一个小的水平导航）。 The list items are sitting on the bottom of the container which leaves an empty space on top of the li's. 列表项位于容器的底部，在li的顶部留有空白。 I want the empty space above the li's to change images depending on which list-item I hover over. 我希望li上方的空白区域可以根据我悬停在哪个列表项上来更改图像。 There will be 3 different images or maybe using css sprites. 将有3个不同的图像，或者可能使用CSS精灵。
Is there any way I can make this happen with jQuery? 有什么办法可以使jQuery做到这一点？
2 个解决方案
解决方案1
1 2009-07-10 14:48:01
HTML: 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>
Script: 脚本：
$('li','#yourUL').hover(function(){
$('#yourImg').attr('src',this.getAttribute('data-imageswap'));
}
You could use something other than that data attribute (like a className or an id ) to point to your image, but that should be the gist of it. 您可以使用该data属性以外的其他东西（例如className或id ）来指向您的图像，但这应该是它的要旨。
Sticking a transparent, 1x1 gif in your image to start will let you scale it to the width and height you need. 在图像中粘贴一个透明的1x1 gif以开始将其缩放到所需的宽度和高度。 Alternately, you could start with no image and write it into the DOM if you'd like to start out without it. 另外，如果您想在没有图像的情况下开始使用，则可以从没有图像开始并将其写入DOM。
解决方案2
0 2009-07-10 00:40:44
You could use the jQuery UI Tabs plugin for this. 您可以为此使用jQuery UI Tabs插件。 May be a little overkill but it would work. 可能有点矫kill过正，但可以。 You can change the event used for selecting a tab to be on hover instead, like this: 您可以改为将用于选择选项卡的事件更改为悬停，如下所示：
$('.selector').tabs({ event: 'mouseover' });
Here's a super quick demo that might help (I've tested and it works), though obviously you would want to use your own CSS: 这是一个超级快速的演示，可能会有所帮助（我已经测试过并且可以正常工作），尽管显然您希望使用自己的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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.