效果图:

鼠标上去提示的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>

 

 


 

 

相关文章:

  • 2022-12-23
  • 2021-07-23
  • 2021-08-24
  • 2021-08-29
  • 2021-08-22
  • 2022-01-23
  • 2021-08-15
  • 2021-05-18
猜你喜欢
  • 2021-10-19
  • 2022-01-22
  • 2022-01-01
  • 2021-08-16
  • 2022-12-23
  • 2022-12-23
  • 2021-05-22
相关资源
相似解决方案