css div and javascript application---------Two methods of image transformation when the mouse passes over_html/css_WEB-ITnose

Whether the mouse passes through a hyperlink or a layer, it can be achieved

javascript method: Familiar with using document.getElementById() to obtain the node object

< 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 method: Reasonably control the style of the layer

< head >
< title > New Document
< style >
.main {
width : 300px ;
height : 250px ;
border : 1px solid gray ;
}
.content {
width : 15 0px ;
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" >