Image borders

[SuzanneB]

How do I define link scheme for images?
Using the "a {blah blah}" commands, I can happily achieve what I want for text, but this does not seem to change the borders on images.
I have this document that defaults all the link colors to grey so that the url images are always bordered in grey. Whats the best way using css to set a url image border to one, color?

[Mr J]

There are a few ways depending on which result you are wanting.

You could put

style="border:2px solid red"

in the opening A tag or in the image tag

<a href="#null"><img src="logo.gif" style="border:2px solid red"></a>

<a href="#null" style="border:2px solid red"><img src="logo.gif"></a>

[SuzanneB]

That works but...the original code set the link colors all to be grey then just set border="2". This gave each picture a 2 pixel grey border, because each picture was also a url.

The problem is there are MILLIONS of pictures and I was kinda hoping there may be a global way of doing this rather than me having to edit every single picture and add the color to the border.

I suppose if I have to add anything, I can just add a class and define that in my .css?????? Not that I want to do that, but then I suppose I should....

[Stephen Philbin]

If you're lucky, you don't have any other images on the page and you can just say img {stylings of: whatever you like;}
this will cause every image on the page to have the desired effect without you having to go into every single tag to add a class or style definition.

A work around for any logo images though if you have any would be to set them as backgrounds to divs, rather than actual <img> elements themselves.

Hope that helps ya out and save you a lot if time.

I know how mind numbing and spirit crushing manually editing the same elements with practically the same changes for hours on end can be.

[Mr J]

You could try

<style>

a img{border:10px solid red}

</style>


<a href="#null"><img src="logo.gif"></a>
<a href="#null"><img src="logo.gif"></a>
<a href="#null"><img src="logo.gif"></a>
<a href="#null"><img src="logo.gif"></a>
<a href="#null"><img src="logo.gif"></a>
<a href="#null"><img src="logo.gif"></a>

[Stephen Philbin]

Would that work for both the security hole and browsers?

[pawky]

if you are trying to change the style of the link images what Mr J said is good. If there are a few link images that u dont want to have that same style give them a new class. so:

img.newclass { styles }

<img src="" class="newclass">

and that will fix that.

Also, i have seen your site so i imagine you are talkign about the images on the right column that are links to the product. If these are what u are talking about, if you have the whole right column in a <div> and give it an id="right" or something then u can identify all those images by
#right a img { style } and then only those images would have that style. i hope i made sense :P

[Mr J]

Mr Herer

Would that work for both the security hole and browsers?

Please explain?

[SuzanneB]

Thanks!
I managed to do a global replace of the text 'border="2"' from the old style with 'class="ppic"' then by defining the class in the .css file - PRESTO, nice grey borders, without hours of effort!

[SuzanneB]

Pawky's blown my mind, by the way ( You are right, I am talking about the right column of pictures. I am trying to sort out all those product descriptions and pictures!). I had no idea you could do that. My book has been dispatched - soon I will be able to read about all this stuff!!

[pawky]

when u say i have blown your mind, do u mean that u couldnt understand? or that u were just shocked u could do that type of thing? :P