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制作圓角矩形的四種方法利用CSS3實現鼠標懸停在圖片上圖片緩慢縮放的兩種方法 CSS+Div圖片橫向滾動代碼 CSS+DIV 圖片垂直居中隱藏和顯示div的兩種方法 css步驟條（兩種方法）設置div背景透明兩種方法 div並排排列的兩種方法淺談。 unity 改變鼠標樣式的兩種方法 unity 改變鼠標樣式的兩種方法