演示：http://www.chinahtml.com/lib/pic/ 下载：http://www.chinahtml.com/lib/pic/pic.rar 在IE 6，IE 7，firefox，opera下都无错显示 HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- 作者：laogui | www.laogui.com 联系：[email protected] 本页内容无任何版权，你可以任意修改，在任何地方使用 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>切换图片效果</title> <style type="text/css"> body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #project { width: 340px; margin-top: 26px; padding: 5px 20px 0 0; } #screenshot { background: #fff url(screenshotladen.gif) no-repeat; width: 310px; height: 150px; float: right; padding: 4px; border: 1px solid #DED5B3; } #project a img { border: 1px solid #DED5B3; } #project a:hover img, #project a:active img { border: 1px solid #D96B11; } #screen { color: #fff; font-weight: bold; margin: 170px 0 0 20px; } #screen div { color: #fff; background: #DED5B3; float: left; margin-right: 5px; } #screen div a { color: #fff; background: #DED5B3 url(screen.gif) no-repeat; text-decoration: none; height: 20px; width: 20px; display: block; text-align: center; vertical-align: middle; line-height: 20px; } #screen div a:hover, #screen div a:active { background: #D96B11 url(screen.gif) no-repeat 0px -20px; } #screen div.breed a { color: #fff; background: #DED5B3 url(screenbreed.gif) no-repeat; text-decoration: none; height: 20px; width: 110px; display: block; text-align: center; vertical-align: middle; line-height: 20px; } #screen div.breed a:hover, #screen div.breed a:active { background: #D96B11 url(screenbreed.gif) no-repeat 0px -20px; } </style> <script type="text/javascript"> <!-- function foto (welke) { if (document.getElementById) { document.getElementById('screenshot').src = welke.href; return false; } } --> </script> </head> <body> <div id="project"> <a href="/" title=""><img id="screenshot" src="gal_1.jpg" alt="" /></a> <div id="screen"> <div><a onclick="return foto(this)" href="gal_1.jpg" title="Screenshot 1">1</a></div> <div><a onclick="return foto(this)" href="gal_2.jpg" title="Screenshot 2">2</a></div> <div><a onclick="return foto(this)" href="gal_3.jpg" title="Screenshot 3">3</a></div> <div><a onclick="return foto(this)" href="gal_4.jpg" title="Screenshot 4">4</a></div> <div><a onclick="return foto(this)" href="gal_5.jpg" title="Screenshot 5">5</a></div> <div class="breed"><a href="/" title="">more photo</a></div> </div> </div> </body> </html>