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>

posted on 2012-01-17 09:27 不过是技术阅读(4147) 评论(0) 编辑收藏举报