Mutt

i want to make my thumbnails with rounded corners - using a transparent png overlay on top of the thumbnail in a <DIV> like this http://host.sonspring.com/png_overlay/

the question is how do you make the actual thumbnail underneath the overlay clickable?

__________________

fris

style the a href

__________________
Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence.


WP Stuff

Mutt

i don't know what you mean. there's a <DIV> absolutely postioned on top of the <DIV> that has the a href in it.

__________________

Serge Litehead

CSS allows to transform almost any tag to any other tag.. for instance you can make A act like P

in your case, instead of that absolute DIV there can be an absolute A with same css properties of that DIV
OR
that absolute DIV to have A tag inside of it with 98-100% for width and height of that DIV

both cases may ruin current css hierarchy tho if css rules are addressed in hierarchical way and not adjusted to current change.
example of hierarchical rule:
div.internal div.absolute {...}


edit: i maybe off a bit, haven't toyed with css/html long time, principally it's correct.

__________________

FlexxAeon

would have to apply the href to the top image, or the div that contains them both

__________________
flexx [dot] aeon [at] gmail

gimme-website

This has worked for me in the past, just copied and pasted from source code and css file of a live site so it will have some unnecessary code:

HTML:
<div class="model"><img src="images/model_01.jpg"><div class="overlay"></div>
<a href="#"></a></div>

CSS:

.model {
display:inline;
float:left;
height:150px;
margin:0 0 0 25px;
position:relative;
width:120px;
}
.model img {
height:150px;
width:120px;
}
.model .overlay {
background:url(images/overlay.png) no-repeat;
display:block;
height:150px;
left:0;
position:absolute;
top:0;
width:120px;
z-index:2;
}
.model a {
display:block;
left:0;
height:150px;
position:absolute;
top:0;
width:120px;
z-index:4;
}

__________________
www.gimme-website.com

MetaMan

you cant just apply it to the image underneath.

you can float div on top as the "3rd layer" and positioning it the width and height of the thumbnail. then link that div.

that is the best way,

if you mean let me clarify:

bottom layer: thumbnails
2nd layer (on top): border layer
then the 3rd layer would be a block with a link on it

or just have the border layer a bg with the linked div inside it.

im hopping on a flight but thats the best way i can think of.

Bird

I like the using Javascript for that..

try corner.js or glossy.js
http://www.netzgesta.de/corner/
http://www.netzgesta.de/glossy/

http://www.netzgesta.de/index.php

__________________
ICQ:268731675

harvey

step 1: get a rounded corner image and the image you want to use and use it like this:

then the css

of course you'll need different classes for each image (like .whatever, .whatever1, .whatever2 and such)

the same could be accomplished this way:

therefore, you'll need 1 class per image. Using php, you can do it automatically

__________________
This post is endorsed by CIA, KGB, MI6, the Mafia, Illuminati, Kim Jong Il, Worldwide Ninjas Association, Klingon Empire and lolcats. Don't mess around with it, just accept it and embrace the truth

ProG

If you are using JavaScript just throw an event listener on the DIV

__________________
History will be kind to me for I intend to write it.

grumpy

use css 3
http://www.webdesignerwall.com/trend...est-practices/

__________________
Don't let greediness blur your vision | You gotta let some shit slide
icq - 441-456-888

czarina

the problem with using javascript is that lots of surfers have it disabled now, so it wont work for them

ProG

Anyone not running JavaScript in 2010 might as well unplug their computer.

I could only find some old stats on w3schools

Source

__________________
History will be kind to me for I intend to write it.

harvey

yes, that would be the real solution on real browsers, sadly MSIE crap doesn't recognize CSS3 and much less rounded corners

__________________
This post is endorsed by CIA, KGB, MI6, the Mafia, Illuminati, Kim Jong Il, Worldwide Ninjas Association, Klingon Empire and lolcats. Don't mess around with it, just accept it and embrace the truth