鼠标放在文字链接上，显示图片的效果代码HTML+CSS 鼠标放在文字链接上，弹出一幅图片的效果代码。
实例代码：
<html>
<title>鼠标经过链接文字时，显示图片示例</title>
<body>
<style type="text/css">
<!--
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;background-color:#FFFFE0;left:-1000px;border:1px dashed gray;visibility:hidden;color:#000;text-decoration:none;padding:5px;}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span{visibility:visible;top:10px;left:280px;}
p{margin-top:200px}
-->
</style>
<a class="thumbnail" href="#">
<---- 鼠标经过链接文字时，显示图片示例----><br>
<span><img src="https://img.alicdn.com/imgextra/i4/2210467553974/O1CN01W08Mtc1fE8ckHR30u_!!2210467553974.jpg">
</span></a>
</body>
</html>
帝国CMS，后台应用实例部分代码：
效果展示：
部分代码：
<tr><td height=30 colspan=2 bgcolor='ffffff'><div align=center><STRONG><FONT color=#ff0000>------------ 字体展示图片相关 ------------</FONT></STRONG></div></td></tr>
<!--
<tr><td width='15%' height=30 bgcolor='ffffff' align=center><STRONG>字体展示</STRONG></td><td bgcolor='ffffff'><P align=center><STRONG><FONT color=#ff0000>------------ 字体展示图片相关 ------------</FONT></STRONG></P></td></tr>
-->
<style type="text/css">
<!--
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;background-color:#FFFFE0;left:-1000px;border:1px dashed gray;visibility:hidden;color:#000;text-decoration:none;padding:5px;}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span{visibility:visible;top:10px;left:280px;}
-->
</style>
<tr><td width='15%' height=25 bgcolor='ffffff' align=center><STRONG>展示图片：</STRONG></td>
<td bgcolor='ffffff'>
<FONT color=#ff0000>【图】字体标题：</FONT>[!--titlepic--]【<a class="thumbnail" href="#" title="字体标题图">预览<span><img src="/skin/zitibaike/demo/img/pic-biaoti.png" width="200" height="100%"></span></a>】推荐尺寸比例：【宽W-1000，高H-200】<BR>
<FONT color=#ff0000>【图】字体预览：</FONT>[!--font_pic_yulan--]【<a class="thumbnail" href="#" title="字体预览图">预览<span><img src="/skin/zitibaike/demo/img/pic-yulan.png" width="200" height="100%"></span></a>】推荐尺寸比例：【宽W-1000，高H-450】<BR>
<FONT color=#ff0000>【图】字体应用：</FONT>[!--font_pic_yingyong--]【<a class="thumbnail" href="#" title="字体应用图">预览<span><img src="/skin/zitibaike/demo/img/pic-yingyong.jpg" width="200" height="100%"></span></a>】推荐尺寸比例：【宽W-900，高H-600】<BR>
<FONT color=#ff0000>【图】字符映射：</FONT>[!--font_pic_charmap--]【<a class="thumbnail" href="#" title="字符映射图">预览<span><img src="/skin/zitibaike/demo/img/pic-yingshe.png" width="200" height="100%"></span></a>】<BR>
<p><FONT color=#ff0000>【图】字体示例：</FONT>(文字多个示例，案例)
【<a class="thumbnail" href="#">预览<span><img src="/skin/zitibaike/demo/img/pic-shili.jpg" width="200" height="100%"></span></a>】、
【<a class="thumbnail" href="#">预览2<span><img src="/skin/zitibaike/demo/img/pic-shili2.jpg" width="200" height="100%"></span></a>】、
【<a class="thumbnail" href="#">预览3<span><img src="/skin/zitibaike/demo/img/pic-shili3.jpg" width="200" height="100%"></span></a>】、
【<a class="thumbnail" href="#">预览4<span><img src="/skin/zitibaike/demo/img/pic-shili4.jpg" width="200" height="100%"></span></a>】、
【<a class="thumbnail" href="#">预览（全部）<span><img src="/skin/zitibaike/demo/img/pic-shili-0.jpg" width="200" height="100%"></span></a>】
<BR>[!--font_pic_examples--]</p>
</td>
</tr>
这是评论测试
飞歌导航东方红烦得很
这是新的一条评论
未来一年，中国的移动支付市场会是什么样？