多个带图片的a标签用js一个方法实现鼠标移入移出换图片
首先是jspJS代码具体实现的功能就是: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的方法就可以复用,自己感觉还是挺方便的。然后我是小白,方法都是网上查到的,自己组装了一点改了一点,这里就是做个记号,以后要用的时候有地方找。大神勿喷哈。