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'));
}

您可以使用指向您的图片的数据属性（如 className 或 id ），

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.

在图片中插入透明的1x1 gif 即可开始使用或者，你可以从没有图像开始写入DOM，如果你想开始没有它。

Sticking a transparent, 1x1 gif in your image to start will let you scale it to the width and height you need. Alternately, you could start with no image and write it into the DOM if you'd like to start out without it.