鼠标划过时，预览大图片（浮动层）

来源：互联网发布：php 识别文件类型编辑：程序博客网时间：2024/04/29 18:40

当鼠标划过图片时，用浮动层来预览大图片，虽然不算完美，但够一个网站用即可，有需要再拿来改。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.center_div2{position: absolute;z-index: 1;text-align: center;background-color: #e0e7ef;border:1px solid #F00;}.center_div_tips2{position: relative;color: Red;}</style><mce:script language="javascript"></mce:script></head><body><div id="detailDiv" class="center_div2"><img id="detailImg" src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="200" /></div><div id="textBox"></div><table width="65%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="150"><a href="images/adv-02.jpg" mce_href="images/adv-02.jpg"><img src="images/about.jpg" mce_src="images/about.jpg" width="213" height="325" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> <td><a href="images/about.jpg" mce_href="images/about.jpg"><img src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> </tr> <tr> <td height="100"><a href="images/adv-02.jpg" mce_href="images/adv-02.jpg"><img src="images/adv-06.jpg" mce_src="images/adv-06.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> <td><a href="images/about.jpg" mce_href="images/about.jpg"><img src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> </tr></table></body></html>

#============

参考自：http://www.jb51.net/article/21485.htm