单击缩略图时在图像上放置图像

时间:2010-08-07 08:25:53

标签: css

我有像

这样的代码
<a href='javascript:showImage()'><img src='/public/visit_images/img1.jpg' width=100 height=100></img></a>

<div class='orig_image' style="position:absolute; width:200px; height:181px; border:1px solid gray; margin-right: 1em; margin-bottom: 10px;display:none;">
  <div style="width:200px; height:181px; background: url(/public/shift-images/indicator.gif) 50% 50% no-repeat;">
    <img id="caribbean" class="shiftzoom" onLoad="shiftzoom.add(this,{showcoords:true,relativecoords:true});" src="/public/visit_images/img1.jpg" width="200" height="181" alt="large image" border="0" />
  </div>
</div>

首先,我显示缩略图图像。当用户点击缩略图时,我希望作为原始图像的班级orig_image出现在缩略图图像上。我该怎么做?

1 个答案:

答案 0 :(得分:1)

在你的风格中添加z-index:

<div class='orig_image' style="position:absolute; width:200px; height:181px; border:1px solid gray; margin-right: 1em; margin-bottom: 10px;display:none;z-index:999;">