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>