鼠标经过图片时变换的两种方法--css+div及javascript应用

javascript方式：熟悉使用document.getElementById()取得节点对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.div_n{
width:300px;
height:250px;
border:1px solid gray;
}
</style>
<script type="text/javascript">
function changeSrc1()
  {
  document.getElementById("myImage").src="/images/2.gif"
  }
function changeSrc2()
  {
  document.getElementById("myImage").src="/images/1.gif"
  }
</script>
</head>

<body>
<div class="div_n">
<a href="http://www.baidu.com">
<img id="myImage" src="/images/1.gif"  onmouseover="changeSrc1()" onmouseout="changeSrc2()"/>
</a>
</div>
</body>

</html>

css+div方式：合理控制层的样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> New Document </title>
  <style>
    .main{
        width:300px;
        height:250px;
        border:1px solid gray;
    }
    .content{
        width:150px;
        height:160px;
        border:1px solid gray;
        background-image:url(images/2.gif);
        background-repeat: no-repeat;
    }
    .content:hover{
        background-image:url(images/3.jpg);
    }
    a{
        text-decoration:none;
    }
  </style>
 </head>

 <body>
  <div class="main">
    <a href="http://www.baidu.com/"><div class="content"></div></a>
  </div>
 </body>
</html>