鼠標移動到一個位置彈出相應的一張圖片

     在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> 
  ... ...