Placez une image sur une image quand une vignette est cliqué

Question

J'ai un code comme

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

D'abord, j'afficher l'image miniature. Quand un utilisateur clique sur la vignette, je veux que la classe orig_image, qui est l'image originale, apparaisse sur l'image du clou du pouce. Comment puis-je faire cela?

Answer 1

ajouter z-index dans votre style:

<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;">