鼠标上去提示的HTML

效果图：

源码：

<html>
   <head>
       <title>浮动窗口DEMO</title>
      <style>
         .thdrcell {
            background:#F3F0E7;
            font-family:arial;
            font-size:12px;
            font-weight:bold;
            padding:5px;
            border-bottom:1px solid #C8BA92;
         }

         .tdatacell {
            font-family:arial;
            font-size:12px;
            padding:5px;
            background:#FFFFFF
         }

         .dvhdr1 {
            background:#F3F0E7;
            font-family:arial;
            font-size:12px;
            font-weight:bold;
            border:1px solid #C8BA92;
            padding:5px;
            width:150px;
         }

         .dvbdy1 {
            background:#FFFFFF;
            font-family:arial;
            font-size:12px;
            border-left:1px solid #C8BA92;
            border-right:1px solid #C8BA92;
            border-bottom:1px solid #C8BA92;
            padding:5px;
            width:150px;
         }

         p {
         margin-top:20px;
         }

         h1 {
         font-size:13px;
         }

         .dogvdvhdr {
            width:300;
            background:#C4D5E3;
            border:1px solid #C4D5E3;
            font-weight:bold;
            padding:10px;
         }

         .dogvdvbdy {
            width:300;
            background:#FFFFFF;
            border-left:1px solid #C4D5E3;
            border-right:1px solid #C4D5E3;
            border-bottom:1px solid #C4D5E3;
            padding:10px;
         }

         .pgdiv {
         width:320;
         height:250;
         background:#E9EFF4;
         border:1px solid #C4D5E3;
         padding:10px;
         margin-bottom:20;
         font-family:arial;
         font-size:12px;
         }
      </style>
   </head>
   <body style="font-family:arial;font-size:12px">
      <div class=pgdiv> <b>On Images</b>

          <table width=100% style="font-family:arial;font-size:12px">
            <tr>
              <td><p><i>Plain description</i></p>
                  <img src="http://www.jzxue.com/Files/Remoteupfile/2007-4/8/doghat1.jpg" title="header=[我是提示框] body=[这个提示框的效果不错<p>可以跟随鼠

标移动</p>]"> </td>
              <td><p><i>Image maps</i></p>
                  <img src="http://www.jzxue.com/Files/Remoteupfile/2007-4/8/doghat1.jpg" usemap=#ant_map border=0>
                  <MAP NAME="ant_map">

                    <AREA SHAPE="circle" href="#" title="header=[我的左眼] body=[点这里进入更多网页特效]" COORDS="65,55,8">
                    <AREA SHAPE="circle" href="#" title="header=[我的鼻子!] body=[点这儿 - 点这里进入建站学]" COORDS="110,90,12">
                  </MAP>
              </td>
            </tr>
          </table>
      </div>
      <script src="https://files.cnblogs.com/EasyData/boxover.js"></script>
   </body>
</html>

posted on 2009-07-06 12:51 迷你软件阅读(527) 评论(0) 编辑收藏举报