Transparent PNG over link.

  • elektric
  • Graduate
  • Graduate
  • User avatar
  • Posts: 130
  • Loc: Mexico

Post 3+ Months Ago

Hello, thank you in advance for your assistance.

I have this JPG with a link, later I placed a transparent PNG above it using css to make a rounded look, since this is a Slideshow, the look is great, but I noticed that the PNG is blocking the anchor <a>, so seems like if there was no link at all.

Anyone of you knows how to fix it?

whish I could post the link, but try "total green site dot com slash index dot php" http://www.totalgreensite.com/index.php check the slider on top and notice the round corners, thats a PNG of the size if the images.

Thanks.
Moderator Remark: Linkified URL
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I don't understand why you're not using the PNG as a background. Are you talking about these buttons?

Attachments:
green.jpg
  • elektric
  • Graduate
  • Graduate
  • User avatar
  • Posts: 130
  • Loc: Mexico

Post 3+ Months Ago

If I use a rounded graphic to avoig using the transparent png, when the slide moves, the corners look sliding too, this doesnt look nice, the buttons are temporary, please ignore the graphics/buttons.

This is the order of things.

<div>: this div contains a transparent png with the rounded corners, which is placed on top of the others divs below, with a 1001 z-index value.
</div>: end of transparent png

<div>: container
<div>: slider
<ul>
<li>
<a>
<img>
</a>
</li>
</ul>
</div>: end of slider
</div>: end of container


Thanks.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I'm not sure you can have a link come through a layer - like I think you want.

Here's a link to your page, for others. Might make it easier if someone has a solution.

http://www.totalgreensite.com/index.php
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

You could try placing a invisible div on top and linking that. Ugly hack I know but might work.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

why not use an alt tag on the image and link the image? Another option is to set the png as the background of the link and then style the link text over the top of that. Otherwise DM is correct. Layering something on top of a clickable object will not allow the click to pass through to the lower layers.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 56 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.