图片的切换效果

chaoyi

浏览: 309716 次
性别:
来自: 广州

最近访客更多访客>>

hjz

loginboot

szluckboy

1357冬天哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 32)
2014-11 ( 42)
更多存档...

博客分类：

JS 粗浅

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>图片的切换效果</TITLE>
<STYLE  type="text/css">
td{ font-size:12px}
</STYLE>
<SCRIPT language="javascript">
function init(){
	document.getElementById("game1").style.display='none';
	document.getElementById("mobile2").style.display='none';
	document.getElementById("mobile").style.display='none';
	
}
function change1(){
	document.getElementById("game1").style.display='block';
	document.getElementById("mobile2").style.display='block';
	document.getElementById("mobile").style.display='block';
	document.getElementById("game2").style.display='none';
	document.getElementById("mobile1").style.display='none';
	document.getElementById("game").style.display='none';
}
function change2(){
	document.getElementById("game1").style.display='none';
	document.getElementById("mobile2").style.display='none';
	document.getElementById("mobile").style.display='none';
	document.getElementById("game2").style.display='block';
	document.getElementById("mobile1").style.display='block';
	document.getElementById("game").style.display='block';
}

</SCRIPT>
</HEAD>

<BODY onLoad="init()">
<TABLE border="0" align="center" cellpadding="0" cellspacing="0">
  <TR>
    <TD>
        <IMG src="images/game1.jpg"id="game1" onMouseOver="change2()" />
        <IMG src="images/game2.jpg"  id="game2"/>
    </TD>
    <TD>
        <IMG src="images/mobile1.jpg" name="mobile1" id="mobile1"onMouseOver="change1()" />
        <IMG src="images/mobile2.jpg" width="98" id="mobile2"/>
    </TD>
  </TR>
<TR>
    <TD colspan="2">
    	<IMG id="game" src="images/card1.jpg" >
        <IMG id="mobile" src="images/phone.jpg" >
    </TD>
  </TR>
</TABLE>
</BODY>
</HTML>

效果图：