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