处理图像2

].parentNode',document.images[i].parentNode.tagName)
if (document.images[i].parentNode.tagName=="A"){
setupRollover(document.images[i]);
}
}
}

function setupRollover(thisImage) {
// console.log('setupRollover',thisImage)
var defaultUrl = thisImage.src;
thisImage.onmouseover=function () {
//console.log('vghgg')
thisImage.src="../img/"+thisImage.id+"arrow.jpg";
}

thisImage.onmouseout=function () {
    thisImage.src=defaultUrl;
}

thisImage.onclick=function() {
    thisImage.src="../img/"+thisImage.id+"three.gif";
}

}




 ###4.由链接触发翻转器
html:



<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<link type="text/css" rel="stylesheet" href="../css/simple Rollover.css">
<script type="text/javascript" src="../js/link rollover.js"></script>
<title>link Rollover</title>
</head>
<body>
<h1>
<a href="http://hicc.me/" id="arrow">Next page</a>
</h1>
<img src="../img/bluearrow.jpg" id="arrowImg" alt="arrow">
</body>
</html>




js:




window.onload=rolloverInit;
function rolloverInit() {
for(var i=0;i<document.links.length;i++){
var defaultlink=document.links[i];
if (defaultlink) {
var defaultimg=document.getElementById(defaultlink.id+"Img");
if(defaultimg){
setupRollover(defaultlink,defaultimg);
}
}
}
}

function setupRollover(thisLink,thisImg){
var defaultUrl=thisImg.src;
thisLink.onmouseover=function(){
thisImg.src="../img/red"+thisLink.id+".jpg";
}

thisImg.onmouseout=function(){
    thisImg.src=defaultUrl;
}

thisImg.onclick=function(){
    thisImg.src="../img/green"+thisLink.id+".jpg";
}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,120评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,932评论 2 17
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 926评论 0 0
  • document.write(''); } if ( (document.cookie && document.c...
    一副怂样阅读 738评论 0 1
  • 前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向...
    思梦PHP阅读 233评论 1 3