Helpful Information

Category: CSS Help

Images and CSS..

I'm looking for a simple way to have all images (thumbnails) that are clickable show up with a border-color.
I want the clickable thumbs to have a different border-color than the default link style I'm using.
I want thumbs with a yellow border, and at the same time use blue links as the default link style.

I've managed to do it by using this CSS code:

.thumb { border : thin solid #FFCC00; }

And using:

img class="thumb" src".... but that's a lot of work doing a search and replace for all thumbs everytime.

Is there a simpler way to do it?
Is it possible to write a style that displays a clickable image with a set border width and color automatically in CSS, so I don't have to have image classes? Preferably something that's NS4/IE4 compatible.

Any help greatly appreciated, thanks :)

Jon

I'm not following you:

but that's a lot of work doing a search and replace for all thumbs everytime.

When, why, and for what are you doing a search and replace?

Would something like this work?

IMG {border : thin solid #FFCC00; }

Something like this: http://www.dynamicdrive.com/dynamicindex4/highlight2.htm maybe?

When, why, and for what are you doing a search and replace?

What I mean is that I've set up a class for images, and for my thumbnail pages I then have to add "class="thumb" for all the images I want borders on.

Originally posted by borntorun
Would something like this work?

IMG {border : thin solid #FFCC00; }

Yes it will, but that will display a border on ALL images, including banners, nav buttons etc and not just the thumbs :(

I was originally hoping this would work, but I can't NOT have borders on the images I don't want them on, even when I set img border="0"

Hmmm. I guess the only possible suggestion I can come up with is to create a class that uses the IMG {border : thin solid #FFCC00; } style. And then, if you've got large chunks of your code that just have thumbnails without other images, you could use the DIV tag before and after those chunks to define everything in there as in that class, using DIV class=classname . Could save a little search and replace time.

But if you've got navigation buttons or other images scattered within the code that has the thumbnails, I guess I've run out of ideas, sorry!

What I mean is that I've set up a class for images, and for my thumbnail pages I then have to add "class="thumb" for all the images I want borders on.

If that's too much work for you, I suggest you look into alternative methods of document formatting...magic?

Originally posted by JMM

If that's too much work for you, I suggest you look into alternative methods of document formatting...magic?

LOL, I'll have to call Microsoft to hear how their new magic wand is coming along, hope it works on WIN2K :D

I'll give the Div class a go, thanks I didn't think about that :o

Jon