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

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

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

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

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



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

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

< head >
< title > New Document
< 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 ;
}



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