html怎么实现当鼠标经过一个图片时显示另一张图片

1、准备切换图片素材，一般是两张，如图，放入img文件夹，跟HTML同级。

2、然后用img嵌入到网页，嵌入其中的一张，另外一张待会切换。

3、如图，现在是静态的，鼠标放上去也不会产生切换反应，因为没有用JS。

4、如图，获取img，转成JS对象，加个[0]就可以转js对象了。

5、然后设定经过事件，切换成另一张图片，这样就产生鼠标经过切换图片的效果了。

6、但是一旦鼠标离开了，就要切换回原来的图片素材，所以再加一个离开事件，这样离开后就变换成原来的图片。

7、如图，现在我的鼠标在图片上，就变成twopicture了。

这个原理其实很简单的。知道html5只是html+css3+js的全程，所以控制图片的定位都是有css的一个position属性来做的，图片无非就是去改变定位中的left值。知道这个之后就可以接下来的实现步骤：当然，这些只是实现逻辑。具体细化功能这个自己去调整。原理知道其他的都简单的很。

第一步：将N张图片去排版定位。

第二步：现在已经知道了这3张图片的位置，接下来就是去点击它，改变他的位置，这个点击其实用js就很容易实现。onclick点击事件，可以搜下；

第三步:图片就这样切换了。假设手机屏幕宽是50像素的，现实不是这样，所以需要加个遮照。就是在这个滚动的图片上再加一层div去遮住不去显示的图片（当然这是一种蔗照方法）。

你好 这种效果很简单的 采用jquery 然后 假设 另一张图片名叫 a.gif 并且和 depart_info_close.gif存放在同一个文件夹下给a标签新加一个属性 id="a" 然后按照你提供的 html结构 代码如下

$(function(){

$("#a").click(function(){

$(this).prev().attr({"src":"a.gif"})

})

})

这样子就好了

代码的意思是 当点击a标签时 寻找与他同级的 并且在他之前的那一个元素 也就是img标签

并且改变 img标签中的 src属性 为 a.gif

希望能帮到你 谢谢

---