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

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