在网页里的图片 如何做到将鼠标放上去后就会变成另一张图片

就好比说拍拍网 或者一些购物网站里店铺上的 【收藏店铺】图标 当把鼠标移到图标上的时候就会变成另一张图片 像商品的正反面效果【鼠标移到图片上去就变成了反面】如果是需要源码 麻烦大神提供一下 或者指导一下怎么才能做出来
之前看了下相关问题也有人问 看到了 这个源码 试了下 好像没用 <img src="images/img1.jpg" onmouseover="this.src='images/img2.jpg'" onmouseout="this.src='images/img1.jpg'" /> 我是直接替换图片地址的 是不是方法错了

需要用Dreamweaver来操作将鼠标放上去一张图片变成另一张图片。

具体的操作方法和步骤如下:

1、第一步,需要打开Dreamweave软件进入,依次单击上方的“插入”-->“图像对象”-->“鼠标经过图像”,如下图所示。

2、其次,完成上述步骤后,弹出对话框,需要插入两辆车,白色车是原始图像,橙色车是经过的图像,如下图所示。

3、接着,完成上述步骤后,可以进行设置了。可以先在网页上预览, 在页面上,有一个类似地球的小浏览器徽标,如下图所示。

4、最后,完成上述步骤后,可以看到单击后将变成另一张图片,因此可以保存设置并完成操作了,如下图所示。这样,问题就解决了。

温馨提示:内容为网友见解,仅供参考
第1个回答  2019-07-05

需要用Dreamweaver来操作将鼠标放上去一张图片变成另一张图片。

1、首先需要打开Dreamweave软件进入,如图所示,然后点击上面的插入里找到图像对象,随后再点击鼠标经过图像。

2、然后弹出的对话框,需要插入两张小汽车,白色小车是原始图像,橙色小汽车是经过的图像。

3、这个时候,就可以设置好了,可以先以在网页中预览一下,在页面上面有个小地球类似浏览器的标识。

4、最后,可以看到点击了之后,就会变成另一张图片了,这样就可以保存设置即可完成操作。

本回答被网友采纳
第2个回答  2017-04-11
这个有很多种方法,你可以在dreamwaver 8里面直接点 插入 ——图像对象——鼠标经过图像 ,然后就出现了一个对话框, 原始图像就是指一开始显示的图片,鼠标经过的图像就是指你要的那个效果, 其他的你都可以看得懂。
另外一种比较流行的方法的话就是写一个CSS 。这个讲起来比较麻烦,如果你真的需要的话,我再写一个给你追问

dreamwaver 8 是什么哦 不能直接在网页编辑的时候 使用源码吗

追答

dreamwaver 8 是一个专门用来设计和制作网站的软件,挺好用的,用她来编辑网页也比较方便。

第3个回答  2013-06-23
源码没错啊,看看路径对不对,再不行贴个图什么的追问

图片的路径吗?是替换掉这个吗 images/img1.jpg

追答

就是看看images下是否有img2.jpg 或 img1.jpg
路径:

|-网页文件夹(文件夹)
|--images(文件夹)
|---img1.jpg
|---img2.jpg
|--index.html(里面写你的代码)
index.html和images文件夹放在同一个位置

追问

源码的什么是图片的路径啊 要将什么位置替换掉哦

追答

直接上面的就行,你用的是相对路径,在index.html中输入<img src="images/img1.jpg" onmouseover="this.src='images/img2.jpg'" onmouseout="this.src='images/img1.jpg'" />的就可以

如何做出鼠标经过图片变成两张的效果
1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。3、如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。4、如图,获取img,转成JS对象,加个[0]就可以转js对象了。5、然后设定经过事件,切换成另一...

...如何做到将鼠标放上去后就会变成另一张图片
需要用Dreamweaver来操作将鼠标放上去一张图片变成另一张图片。1、首先需要打开Dreamweave软件进入,如图所示,然后点击上面的插入里找到图像对象,随后再点击鼠标经过图像。2、然后弹出的对话框,需要插入两张小汽车,白色小车是原始图像,橙色小汽车是经过的图像。3、这个时候,就可以设置好了,可以先以在网...

...如何做到将鼠标放上去后就会变成另一张图片
需要用Dreamweaver来操作将鼠标放上去一张图片变成另一张图片。具体的操作方法和步骤如下:1、第一步,需要打开Dreamweave软件进入,依次单击上方的“插入”-->“图像对象”-->“鼠标经过图像”,如下图所示。2、其次,完成上述步骤后,弹出对话框,需要插入两辆车,白色车是原始图像,橙色车是经过的图像...

html鼠标点击切换图片?
html在表格里的图片用鼠标点击图片时会切换下一张图片,怎么实现?_百...1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。2、原理:使所有的图片隐藏然后...

怎么实现点击图片渐变切换成另一个图片!
在网页设计中,实现点击图片渐变切换成另一个图片的技巧主要是利用JavaScript和HTML的层叠样式表(CSS)。首先,需要在HTML文件中放置两张图片,并设置它们为层叠的关系。接着,通过JavaScript实现鼠标点击事件的触发。当用户点击图片时,程序检测到这一事件并执行相应的代码。关键步骤在于,通过JavaScript改变...

在网页中怎么实现鼠标经过图片切换成另一张图片(不要DW自带的JS代码,具...
var oImg=document.getElementsByTagName('img')[0]; 找到这个图片 oImg.onmouseover=function(){ oImg.src='1.jpg'} 滑过时这个图片变成1.jpg oImg.onmouseout=function(){ oImg.src='2.jpg'} 离开变成2.jpg

怎么把鼠标放在图片上 图片就能自动换? 我用的是SharePoint2007 不...
鼠标放到图片上替换图片,改变样式。方法一:用 onmouseover和 onmouseout 实现 <asp:Imgbutton runat="server" src="drop.gif" onmouseover="this.src='drop.gif'" onmouseout="this.src='tabs2_2.gif'" \/> 方法二:用 css 自带的样式去实现。CSS样式 \/*大按钮*\/ .btn_big { border-...

网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?
}.img1 {top: 199px; left: 153px;}.img2 {top: 369px; left: 552px;}.img3 {top: 411px; left: 632px;}.hotspot:hover + .bigImg {display: block;}

...设计网页时,如何设计当鼠标经过某个图像热点时,显示出新的图片...
首先要把需要的图片都事先放在网页上(一般放在一个div里)。然后用css隐藏第一个以外的图片,然后给第一张图片设置一个鼠标移入事件,当鼠标移动到图片上的时候,第一张图片隐藏,第二张图片显示。这样图片就改变了。另外还可以加入一个鼠标移出事件,让鼠标移出后2个图片的样式恢复最开始的样子。

HTML语言中怎么让鼠标移动到一张图片上时变成另一张图片
需要用到js脚本的onmouseover和onmouseout等。这是非常简单的。但是如果你不了解js可以使用DreamWeaver中的一项功能:插入--图像对象--鼠标经过图像,在弹出的对话框中,选择好“原始图像”和“鼠标经过图像”就行了。

相似回答