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

author author     2023-03-09     818

关键词:

您好.我的是一个导航栏,就是“首页”“产品”“关于我们”。。。每一个我都准备了两张图片,平时用一种,当鼠标经过时换成另一张,用html怎么实现呢/谢谢了.

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

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

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

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

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

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

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

参考技术A 楼上的那位回答的很有艺术感...
看这里吧,没有定义的函数是不能使用的.
<img src='a.jpg' onmouseover='src="b.jpg"' onmouseout='src="a.jpg"'>
参考技术B

css~

.a background: url(正常显示的图片.jpg)
.a:hoverbackground: url(鼠标移动上显示的图片.jpg)

html~

<div class="a"></div>

参考技术C 把另一张图片设为隐藏,onmouseover时让图片显示,onmouseout时再设为隐藏 参考技术D onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','JPG',1)"><img src="JPG" name="Image1" border="0" id="Image1"

这个肯定可以
自己琢磨吧 我建议你 去回答别人的问题赚分升级证明你对网友有贡献 那你才有资格提问 本来不想回答的 今天我姐生日 做个好事本回答被提问者采纳

css实现一个效果,当鼠标移上去时,下方出现一张图

参考技术A1、首先在netbenas建立一个html文件。2、引入css文件。3、html文件增加一个显示图片层。4、在1.css文件中增加代码。5、看看浏览器图片层效果。6、层里面加一个图片。7、在win10下调用自带的3d画图软件。8、在win10下画图3d... 查看详情

求一个java图片浏览器的源代码,拜托大家了!!!

基于Java程序开发语言,实现一个能用鼠标实现类似图片翻页功能设计一个程序,能实现图片的显示,放大、缩小功能。1.当鼠标模拟手指在屏幕上划过时,能实现图片的翻页功能2.当按住鼠标向左边划过时,程序实现向后翻,显... 查看详情

鼠标经过图片时,飞入另外一张图片。

html代码:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp- 查看详情

在dreamweaver中,如何实现鼠标经过文字时在鼠标旁边自动出现图片?

...的图片?我查了一下,说是可以用层设置来实现,可是具体怎么做?怎么设置?求助!!您好,关于这个层,我的代码如下:首先给你说说思路,你把鼠标移动到文字上面,这个时候其实你鼠标旁边就有一个隐藏的层,层里面有一个img图... 查看详情

在网页制作中,怎么把图片应用为动态html效果?当鼠标悬停时图片1换成图片2,要怎么设置?

...话,可以在需要设置动态效果的标签中使用伪类:hover具体怎么用,就看你对CSS的掌握程度了。PS:该方法不适用于IE6,其他的可以。再有就是用JavaScript来实现了。对于初学者的话,直接用Dreamweaver来实现比较容易。后面两种方法... 查看详情

css3实现鼠标经过图片时图片放大

在鼠标经过图片时,图片被放大,而且还有个过渡的效果....1<!DOCTYPEhtml>2<html>3<head>4<linkhref="css/prodInfo.css"rel="stylesheet"type="text/css">5</head>6<style>7divimg{8border:1pxsoildred;9 查看详情

html中的<img>的src属性取一张图片,如果取不到这张图片则默认显示另一张,怎么做?

如果src的值取不到图片的话,显示的就是一个红X,有没有办法,把红X替换成一个其他的图片呢?参考技术Asrc="userpic/<%=ciResult[i][22]%>"onerror="this.src='userpic/anonymity_pic.gif'"加上一个onerror属性吧,,然后里面的地... 查看详情

vb中如何实现图片自动缩放

1.可以利用picture.mousemove()事件实现放大效果.即当鼠标经过时,图像的长宽分别加上一个固定值.实现"放大"效果.不过要注意就是,要先设置一个判断标志----放大了一次后就不要再放大了.不然,当鼠标一直在上面时,不断触发这... 查看详情

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)

参考技术A可以用js事件“onmouseover”和“onmouseout”来实现。1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:2、添加“onmouseover”js事件,首先使用“document.getElementB... 查看详情

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)

可以用js事件“onmouseover”和“onmouseout”来实现。1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:2、添加“onmouseover”js事件,首先使用“document.getElementById”获取... 查看详情

网页特效.当鼠标经过某个链接时自动弹出一个表格显示这个链接的内容,当鼠标离开后这个表格消失

...这个链接的内容,当鼠标离开后这个表格消失,请问源码怎么写?用FrontPage2002来做吧,你点点下面的连接:具体是:Web页面可用预定义模板来创建,也可不采用模板而在空白页上自己进行设计。创建新页面的步骤如下:在网页... 查看详情

图片自动切换的js代码

...的图片每隔5秒切换一次图片是本地的不需要多复杂,能实现网页内的图片每隔5秒自动切换下一张就行了越精简越好谁帮忙做一个,发到wulovezhuo@163.com合适的加分,先谢谢了~~试试这个图片切换有12345数字一起切换鼠标点一下数字... 查看详情

在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)

在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸。具体代码实现如下:<imgid="img"onmouseov... 查看详情

求一个js效果页面里可显示多张图片,当鼠标经过哪张图片,那张图片就变大,其余的图片自动缩小

分数太少,我只能讲一下思路如果你有用jquery,可以$('img').live('mouseover',function()$(this).css('width',150);$(this).css('height',150););$('img').live('mouseout',function()$(this).css('width',50);$(this).css('height'... 查看详情

qt做图片缩略显示滚动条下拉怎么实现动态加载下面的图片?

当图片过多时,当前窗口不能全部显示,不显示的图片不加载!随着下拉滚动条,逐步加载显示在屏幕中放置一个QWidget,作为你显示图片的窗口,在这个QWidget放置多个QLabel,每个QLabel就load一张图片,设置QLabel在QWidget中的坐标... 查看详情

Jcrop处理多张图片时,尺寸不正确

】Jcrop处理多张图片时,尺寸不正确【英文标题】:WhenJcrophandlemorethanoneimage,thesizeisincorrect【发布时间】:2016-05-0406:25:40【问题描述】:1,2,问题:我们什么时候动态改变图像?答:当用户异步上传图片时,比如使用ajaxfileupload.js... 查看详情

当鼠标悬停在没有css的标题上时,如何使缩略图消失?

】当鼠标悬停在没有css的标题上时,如何使缩略图消失?【英文标题】:howcanImakethumbnailimagedisappearwhenthemousehoversoverthetitlewithoutcss?【发布时间】:2013-09-2510:07:08【问题描述】:当我将鼠标悬停在图片的div上时,我有一个简单的jQu... 查看详情

鼠标经过图片时向前突出并放大图片

...图片的效果/*.img1:hoverimg{transform:scale(2,2);}*/第二句就是当鼠标经过是图片放大的倍数.img1img{transform:scale(1,1);transition: 查看详情