CODEWITHSUNDEEP
css
sukesh
sukesh

Reputation: 2423

anchor link over image

There is an image which has two anchor links over it. Clicking anywhere on the image will open an overlay to show the full sized image. Clicking on the buttons will open the facebook/twitter share dialogs.

What's happening here is, when the buttons are clicked, both the dialog and the overlay open up. How to stop the overlay from showing up when the anchor link is clicked.

enter image description here

HTML:

<li style="display: block; opacity: 1;">
  <a href="#">
    <div class="thumbPan">
      <img src="#" class="gallThumb">          
    </div>
  </a>
  <div class="share_buttons">
      <a class="fshare" href="#" onclick="window.open(this.href, '',''); return false;"></a>
      <a class="tshare" href="#" onclick="window.open(this.href, '',''); return false;"></a>
  </div>
</li>

CSS:

.share_buttons { position:absolute;}
.fshare, .tshare { float:left; display:block;background-repeat:no-repeat; 
                   background-position:left top; }
.fshare { background-image:url(../images/fshare.png);}
.tshare { background-image:url(../images/tshare.png); }
.thumbPan{ position:relative;}
.gallThumb{ width:100%; max-width:302px; height:auto;}

i tried setting .share_button as block but didnt work.

Upvotes: 0

Views: 1044

Answers (1)

Harsh Joshi
Harsh Joshi

Reputation: 117

Not sure but try anchor tag around img tag insted div like this.

<div class="thumbPan"> <a href="#"> <img src="#" class="gallThumb"/> </a> <span class="gallType video"></span> </div>

Also you havent closed img tag i know that is not the problem but it is good to close it.

Still if it doesnt work then try 

z-index:99; 
z-index:98;

in the small images and

z-index:1;

In main image.

Upvotes: 2

Related Questions