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

本文转载自查看原文 2012-01-17 09:27 3870 前端

不管是鼠标经过超链接还是经过层，都可以实现

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 >

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 鼠标经过时显示样式的两种方法 css+div制作圆角矩形的四种方法 Java 将鼠标改为图片的两种方法鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法 CSS+Div图片横向滚动代码 CSS+DIV 图片垂直居中隐藏和显示div的两种方法 CSS+DIV布局（一） css步骤条（两种方法）