JavaScript mode : familiar with document.getElementById () Get node object
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><style>. Div_n{width:300px;Height:250px;Border:1px solid Gray;}</style><Scripttype= "Text/javascript">functionChangeSrc1 () {document.getElementById ("MyImage"). SRC="/images/2.gif" }functionChangeSrc2 () {document.getElementById ("MyImage"). SRC="/images/1.gif" }</Script></Head><Body><Divclass= "Div_n"><ahref= "Http://www.baidu.com"><imgID= "MyImage"src= "/images/1.gif"onmouseover= "ChangeSrc1 ()"onmouseout= "ChangeSrc2 ()"/></a></Div></Body></HTML>
Css+div Way : The style of reasonable control layer
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "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> <Divclass= "Main"> <ahref= "http://www.baidu.com/"><Divclass= "Content"></Div></a> </Div> </Body></HTML>
Two ways to transform a mouse over a picture--css+div and JavaScript applications