鼠标移入a标签更换图片，移出图片复原。

多个带图片的a标签用js一个方法实现鼠标移入移出换图片

首先是jsp
JS代码

具体实现的功能就是：a标签包括图片和文字，然后鼠标移到整个a标签（不论是移到图片还是移到文字）图片都会改变，移出后图片复原。

首先是jsp

<a onmouseover="toggle(this,'图片名字1')" onmouseout="toggle(this,'图片名字1')" href="#" onclick="#"><img src="${contextPath}/static/common/img/header-help/图片名字1.png"/>收藏本站
</a><a onmouseover="toggle(this,'图片名字2')" onmouseout="toggle(this,'图片名字2')" href="#" onclick="#"><img src="${contextPath}/static/common/img/header-help/图片名字2.png" />设为首页
</a>

JS代码

//获取项目路径
var ContextPath = getContextPath();
function getContextPath() {var pathName = document.location.pathname;var index = pathName.substr(1).indexOf("/");var result = pathName.substr(0,index+1);return result;
}//鼠标移入换图片，移出换回来
function toggle(_this,imgName){var img = _this.getElementsByTagName("img")[0];if (_this.state && _this.state == 'out') {img.src = ContextPath+"/static/common/img/header-help/"+imgName+".png";_this.state = 'over'} else {img.src = ContextPath+"/static/common/img/header-help/"+imgName+"over.png";_this.state = 'out'}
}

这里注意的就是，每个a标签里，改变的图片必须和原图片相同的路径，然后名字后面多个‘over’，当然你也可以换成其他的。

其实这个原理还是很简单，但是如果有多个a标签，一个js的方法就可以复用，自己感觉还是挺方便的。然后我是小白，方法都是网上查到的，自己组装了一点改了一点，这里就是做个记号，以后要用的时候有地方找。大神勿喷哈。

鼠标移入a标签更换图片，移出图片复原。相关推荐

vue+element实现鼠标移入出现按钮,并点击图片可跳转页面
实现效果点击图片后跳转页面实现代码 html <template><div class="course-container"><el-row :g ...
html轮播图鼠标可以暂停,原装js轮播图，鼠标移入停止轮播，移出继续轮播
要求:1.点击按钮,切换图片: 2.图片能够自动轮播: 3.鼠标移入,轮播停止:移出继续轮播: 知识点:1.定时器:setInterval(): 2.鼠标移入事件:onmouseenter/onmou ...
vue 移入显示_vue鼠标移入显示点赞图标，移出隐藏点赞图标，现在我想点击点赞图标，鼠标移出不会隐藏图标，怎么做？...
@mouseover="showLike(i)" @mouseleave="hideLike(i)"> @click="likePoint(i) ...
2020/09/29 鼠标移入显示二维码或图片移出隐藏
要模仿的效果代码 -js -css -js函数 -最终效果代码块 js let showImg = function (e) {// console.log("show")e. ...
Vue鼠标移入（悬停）显示-移出隐藏
需求:详情页面显示多张图片,当鼠标悬停在某张图片上时,图片上显示下载按钮:鼠标移出后,下载按钮隐藏. 最终效果如下: ①鼠标悬停 ②鼠标移出实现 ①布局 <div v-if="det ...
鼠标移入图片高亮，其余颜色变暗
鼠标移入图片高亮,其余颜色变暗效果如下主要的布局代码如下: 1.设置一个大的盒子[wrap],通过css样式将盒子居中显示 2.给li标签设置一个浮动排成一排显示 3.大盒子的宽度设置630,二每 ...
axure 图片切换图片的交互_Axure 交互案例：放大缩小图片
产品经理在进行原型设计的时候,时常会遇到这样一种动态效果:鼠标移入到页面中的某个图片或者图标上,图标会进行放大,提醒用户现在鼠标所在的位置为当前的图片.移出该图片时,图片的尺寸回复为原本大小. 通常我 ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...
在vue中鼠标移入切换背景图片移出时再次切换图片
在Vue中,当鼠标移入元素时,可以通过绑定@mouseover事件来触发相应的方法,该方法可以通过修改数据来改变元素的背景图片.同样地,当鼠标移出元素时,可以绑定@mouseout事件触发另一个方法, ...
html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果
在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换.于是想要动手实践一下,并且添加上自己的想法.于是就有了下面的图片和代码. ...

鼠标移入a标签更换图片，移出图片复原。

多个带图片的a标签用js一个方法实现鼠标移入移出换图片

首先是jsp

JS代码

鼠标移入a标签更换图片，移出图片复原。相关推荐

最新文章

热门文章