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

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

 

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

 

.div_n {
width : 300px ;
height : 250px ;
border : 1px solid gray ;
}
style >

function  changeSrc1()
  {
  document.getElementById( " myImage " ).src = " /images/2.gif "
  }
function  changeSrc2()
  {
  document.getElementById( " myImage " ).src = " /images/1.gif "
  }
script >
head >





a >
div >
body >

html >

 

 

 

 

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

 

 
    New Document  title >
  
    .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 >

 
  
     div > a >
   div >
  body >
html >