dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: Image borders

  1. #1
    Join Date
    May 2004
    Posts
    442

    Image borders

    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?

  2. #2
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    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>

  3. #3
    Join Date
    May 2004
    Posts
    442

    Unhappy

    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....

  4. #4
    Join Date
    Mar 2004
    Posts
    3,150
    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.
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  5. #5
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    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>
    Last edited by Mr J; 08-13-2004 at 11:16 AM.

  6. #6
    Join Date
    Mar 2004
    Posts
    3,150
    Would that work for both the security hole and browsers?
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  7. #7
    Join Date
    Aug 2004
    Location
    US
    Posts
    544
    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

  8. #8
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Mr Herer

    Would that work for both the security hole and browsers?

    Please explain?

  9. #9
    Join Date
    May 2004
    Posts
    442
    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!

  10. #10
    Join Date
    May 2004
    Posts
    442
    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!!

  11. #11
    Join Date
    Aug 2004
    Location
    US
    Posts
    544
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles