返回JavaScr......登陆

JavaScript改变Div样式-chageDivstyle

刘静2019-07-26 15:55:1125

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>chageDivstyle</title>

<style>

*{margin:0px;padding:0px;}

.box{width:366px;height:400px;margin:220px 120px;float:left;border:0px;}

/*.main{width:100%;height:1080px;margin:0px auto;background:url(images/主菜单背景.png);}*/

.main{width:100%;height:1080px;margin:0px auto;background-color:#000915;}

</style>

</head>

<body>

<div>

<div id="study"><input type="image" id="ima1" src="images/学习模式(正常).png" onclick=" myfovus1(this)" onmouseover="myfovus2(this)"  onmouseout="myfovus7(this)"></div>

<div id="train"><input type="image" id="ima2"  src="images/训练模式(正常).png" onclick=" myfovus3(this)"  onmouseover="myfovus4(this)"  onmouseout="myfovus8(this)"></div>

<div id="examine"><input type="image" id="ima3"  src="images/考核模式(正常).png" onclick=" myfovus5(this)"  onmouseover="myfovus6(this)"  onmouseout="myfovus9(this)"></div>

</div>


<script type="text/javascript">

function myfovus1(x){

document.getElementById("ima1").src="images/学习模式(划过).png";

}

function myfovus2(y){

document.getElementById("ima1").src="images/学习模式(点击).png";

}


function myfovus3(m){

document.getElementById("ima2").src="images/训练模式(划过).png";

}

function myfovus4(n){

document.getElementById("ima2").src="images/训练模式(点击).png";

}


function myfovus5(a){

document.getElementById("ima3").src="images/考核模式(划过).png";

}

function myfovus6(b){

document.getElementById("ima3").src="images/考核模式(点击).png";

}



function myfovus7(c){

document.getElementById("ima1").src="images/学习模式(正常).png";

}

function myfovus8(d){

document.getElementById("ima2").src="images/训练模式(正常).png";

}

function myfovus9(e){

document.getElementById("ima3").src="images/考核模式(正常).png";

}

</script>

</body>

</html>

效果图如下:[object Object]

最新手记推荐

• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade• 创建一个验证器, 用来对模型对应的表中字段进行验证处理

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网