鼠标移入移出事件图片更换

最新推荐文章于 2023-11-02 17:55:38 发布
最新推荐文章于 2023-11-02 17:55:38 发布
阅读量6.9k 收藏 2
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjingjing1014/article/details/17412119
版权
 function mouseOver()
    {    
    document.image1.src="../../Content/themes/login/image/jiben-001.png"   
    }   
    function mouseOut(){               
     document.image1.src="../../Content/themes/login/image/Jiben.png"  

     }

<body>

<img name="image1" src="../../Content/themes/login/image/Jiben.png" width="210px" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()" />

</body>

这样就实现了鼠标移动到图片时，换一张图片，鼠标离开时，换回原来的图片

wangjingjing1014
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现一个鼠标移入后图片变为另一张图片的效果
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 546
JavaScript实现一个鼠标移入后图片变为另一张图片的效果
消除mouseover或mouseout重复触发事件
PigBiBiX的博客
03-19 4583
通常会在商品的展示图，设置一些鼠标悬浮事件。当鼠标悬浮在商品图片时，会触发一些时间，出现商品信息框或则商品图片发生变化，当鼠标离开商品图片时，图片恢复原状。最近在做类似的事情，由于不能使用就Query，（不能用jQuery，我也很无奈。。）于是自己写了原生的JS来实现一些mouseover和mouseout事件，但是，测试时发现了一些问题。 商品的展示图的HTM代码如下所示：
jQuery实现鼠标滑过切换图片效果
Gray_Amber
08-02 2565
样式如下，鼠标滑过对应图片会进行切换。 jQueryhover(inFunction,outFunction) hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。 outFunction可选，如果只指定一个函数，那么鼠标移入移出都执行它。 1.引入jQuery <script src="../../static/js/jquery-3.1.1.min.js"></script> 2.jQuery代码 <script> $(.
jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 （css控制span标签）...
dhvn939935的博客
07-09 426
<script> 　　$(function(){ 　　　　var text ; 　　$(".pos span").each(function(){ 　　　　text = $(this).text().trim(); 　　if(text=="设为默认"){ 　　　　...
Vue iView实现鼠标滑过变更图片
wenqaq的博客
06-10 986
Vue iView实现鼠标滑过变更图片 用的是@mouseover和 @mouseout来变更的 还有iview的Card 卡片组件 <template> <Row class="rowItem"> <Col span="8" v-for="(item,k) in gard1List" :key="k"> <div @mouseover="ImgchangeOn(k)" @mouseout="ImgchangeOut(k)" class
jQuery鼠标移入切换背景图并且点击时跳转页面
七七的博客
03-07 515
鼠标移入切换背景图
onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法
wwf1225的博客
04-10 1127
https://www.cnblogs.com/eyed/p/7993590.html
简单的三种实现鼠标经过切换图片的方法
weixin_30292843的博客
03-18 4817
本次用到的两张图片，一张是正常显示的图片，另一张是替换图片。 1.jpg1.png 第一种：主要用了onMouseOver和onMouseOut事件 html代码： <img alt="" src="images/1.jpg" onMouseOver="this.src='images/1.png'" onMouseOut="this.src='images/1.jpg'"...
vue 鼠标移入移出（hover）切换显示图片
PrimaryColor
08-06 8238
代码： <div @mouseenter="isExitHover=true" @mouseout="isExitHover=false" @click="copyAddr()" class="menus"> <img v-show="!isExitHover" :src="exit" style="width:16px;height:16px;" class="mr10" /> <img v-show="isExitHover" :src="e
在一张图片上添加鼠标移入和移出事件，并定位图片中的内容
最新发布
m0_74359467的博客
11-02 305
通过上述代码，当鼠标悬停在图片上时，会在图片上方显示一个半透明的区域（id为"imageHover"），其中包含了由鼠标位置计算得到的内容定位信息。当鼠标移出图片时，该区域将隐藏起来。要在一张图片上添加鼠标移入和移出事件，并定位图片中的内容，您可以使用HTML和JavaScript来实现。请注意，上述代码需要您将您的图片替换为"your-image.jpg"，并且您可能需要自定义CSS样式来适应您的需求。您可以根据您的实际需求进一步修改和扩展上述代码。
鼠标移动到图片上后切换为另一个图片
06-11
鼠标移动到图片上后，图片自动切换为另外一个图片，图片的小巧切换效果，可以用作两个相似图片的对比效果，很不错哦
vue+esri 山东天地图加载、标注、鼠标移入移除浮层显示隐藏
03-14
VUE+ ESRI 实现山东天地图...鼠标移入移除标注点，浮层显示隐藏功能； 点击标注点方法实现； 地图放大缩小、平移事件； 天地图样式 <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css"/>
echarts实现自定义工具栏图标方法，通过点击自定义图标实现datazoom的滚动与停止,代替鼠标移入停止移出恢复滚动 实例
09-03
在网上查看了很多的代码，本来想通过鼠标移入移出来控制滚动，但是发现即使在echarts图范围内进行鼠标移动也会触发到鼠标移入移出，所以自行通过增加工具栏的自定义图标方法来实现功能。为了方便理解，通过echarts...
2020易语言模块大全持续更新3.zip
07-02
置鼠标移入移出事件.ec 自创加解密数据.ec 自动升级模块.ec 自动填表.ec 自动更新模块 1.3.ec 自动更新模块.ec 自动编号模块.ec 自定义鼠标.ec 自定延时模块.ec 自用万能模块1.71.ec 自解压制作.ec 色彩转换_模块.ec...
1350多个精品易语言模块
07-26
保存图片(1.0).EC 保存图片1.0.ec 保存扩展界面设置.ec 保护.ec 保证显示.ec 信 息提示框控件(Tip).ec 修改菜单1.0.ec 修改菜单1.0版.ec 光驱控制模块.ec 全局事件模块.ec 全 程API模块.ec 全面操作SQL Server 2000....
高仿QQ2014，MDI，主题换肤
08-02
1.优化SkinTabControl标签移入移出效果。 2.将SkinTextBox改为容器边框，其他控件可放进其里面。 3.设置SkinTextBox中的TextBox为不可点击，详细参数在属性栏里设置。 4.SkinPanel添加属性（BorderColor：边框颜色）...
js实现相册
wangjingjing1014的专栏
04-15 1771
Image     {         width:100px;         height:100px;         }                 function createimgs() {             var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg',             '36
鼠标移入移出事件改变图片的分辨率
wangjingjing1014的专栏
12-17 1717
最近在做一个鼠标移入移出图片事件，有几种方法大家可以试一下 首先是改变分辨率的两种方法，鼠标移入图片和移出图片的分辨率不同 方法一 http://www.w3.org/1999/xhtml"> 图片列表：鼠标移入/移出改变图片透明度 ul,li{margin:0;padding:0;list-style-type:none;} #imgList{width:700px;ov
vue鼠标移入移出事件
07-28
在Vue中，可以使用`@mouseover`和`@mouseout`指令来处理鼠标移入和移出事件。 下面是一个示例： ```html <template> <div> <div @mouseover="handleMouseOver" @mouseout="handleMouseOut"> <!-- 内容 --> </div> <p v-if="isMouseOver">鼠标已移入</p> <p v-else>鼠标已移出</p> </div> </template> <script> export default { data() { return { isMouseOver: false }; }, methods: { handleMouseOver() { this.isMouseOver = true; }, handleMouseOut() { this.isMouseOver = false; } } }; </script> ``` 在上述示例中，我们在`<div>`元素上绑定了`@mouseover`和`@mouseout`事件，分别调用了`handleMouseOver`和`handleMouseOut`方法。这两个方法分别将`isMouseOver`属性设置为`true`和`false`。然后根据`isMouseOver`的值来显示不同的文本。 这样，当鼠标移入时，会显示"鼠标已移入"，当鼠标移出时，会显示"鼠标已移出"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值