鼠标移动到一个位置弹出相应的一张图片

     在web开发中，有时候我们不方便把一张图片展示给用户，或者单单以图片不能标识精确信息时，常常将图片的标识(id)展示出来，而在鼠标移动到标识上时弹出相应的图片，两全其美。下面是我使用过的一种实现方法(使用样式表) ：

... ...
< style  type ="text/css" > 
.thumbnail { 
  display: block; 
  margin-bottom: 60px; 
} 

.thumbnail span { 
  position: relative; 
  z-index: 0; 
} 

.thumbnail:hover { 
  background-color: transparent; 
  z-index: 50; 
} 

.thumbnail span { 
    
} 

.thumbnail span img { 
  border-width: 0; 
  padding: 2px; 
  position: absolute; 
  background-color: #FFFFE0; 
  left: -1000px; 
  border: 1px dashed gray; 
  visibility: hidden; 
  color: #000; 
  text-decoration: none; 
  padding: 5px; 
} 

.thumbnail:hover img { 
  visibility: visible; 
  top: -30px; 
  left: 0px; 
} 

p { 
  margin-top: 200px 
} 
</style> 

... ...

     < div  id ="mainCon" > 
       < table > 
         < tr > 
           < td > 
            位置: 
           </td> 
         </tr> 
         < tr > 
           < td > 
             < a  class ="thumbnail"  href ="#" >1111111111111111111111 < span ><img 
                  src="http://221.179.221.223/MmsKooRMS/source/20100722/409/2010072216093985244.gif" /> 
             </span>  </a> 
           </td> 
         </tr> 
         < tr > 
           < td > 
             < a  class ="thumbnail"  href ="#" >2222222222222222222222 < span ><img 
                  src="http://221.179.221.223/MmsKooRMS/source/20100721/1134/2010072111342818377.gif" /> 
             </span>  </a> 
           </td> 
         </tr> 
         < tr > 
           < td > 
             < a  class ="thumbnail"  href ="#" >3333333333333333333333 < span ><img 
                  src="http://221.179.221.223/MmsKooRMS/source/20100428/912/2010042809120058431.gif" /> 
             </span>  </a> 
           </td> 
         </tr> 
       </table> 
     </div> 
  ... ...

     本文转自NightWolves 51CTO博客，原文链接： http://blog.51cto.com/yangfei520/372139 ，如需转载请自行联系原作者