changing the border around an imagelink

Discussion in 'HTML' started by Stijn Goris, Feb 9, 2004.

  1. Stijn Goris

    Stijn Goris Guest

    hi all,

    I want to change the bordercolor when a mouse floats above the imagelink.

    img.borderGray{
    border: 1px solid #999999;
    }

    img.borderGray a:link{
    }

    img.borderGray a:hover{
    border: 1px solid #9DDD99;
    }

    with

    <a href="takkenLeider.php">
    <img class="borderGray" src="Leiding/fotos/klein.jpg">
    </a>

    but that doesn't work. Someone can help me out?

    Regards
    Stijn
     
    Stijn Goris, Feb 9, 2004
    #1
    1. Advertising

  2. Stijn Goris wrote:
    > img.borderGray a:link{
    > img.borderGray a:hover{


    You have your selectors backwards.

    That would be:

    <img class="borderGray"><a></a></img>

    --
    David Dorward <http://dorward.me.uk/>
     
    David Dorward, Feb 9, 2004
    #2
    1. Advertising

  3. Stijn Goris

    Mark Parnell Guest

    On Mon, 09 Feb 2004 21:52:26 GMT, "Stijn Goris" <>
    declared in alt.html:

    > hi all,


    G'day.

    > img.borderGray a:hover{
    > border: 1px solid #9DDD99;
    > }


    Try

    a img.borderGray:hover {
    border: 1px solid #9DDD99;
    }

    etc.

    HTH

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Feb 9, 2004
    #3
  4. David Dorward wrote:
    > Stijn Goris wrote:
    >> img.borderGray a:link{
    >> img.borderGray a:hover{

    >
    > You have your selectors backwards.
    >
    > That would be:
    >
    > <img class="borderGray"><a></a></img>


    wow. instead of that, try this....
    a:link img.borderGray{
    a:hover img.borderGray{

    maybe????
     
    Disco Octopus, Feb 9, 2004
    #4
  5. Stijn Goris

    Els Guest

    Stijn Goris wrote:

    > hi all,
    >
    > I want to change the bordercolor when a mouse floats above the imagelink.
    >
    > img.borderGray{
    > border: 1px solid #999999;
    > }
    >
    > img.borderGray a:link{
    > }
    >
    > img.borderGray a:hover{
    > border: 1px solid #9DDD99;
    > }
    >
    > with
    >
    > <a href="takkenLeider.php">
    > <img class="borderGray" src="Leiding/fotos/klein.jpg">
    > </a>
    >
    > but that doesn't work. Someone can help me out?



    I was just writing all of this here:

    img.borderGray a:link means: the link inside the img
    That can't be right.

    Here's what it should be:
    a:link img.borderGray {border:1px solid #999999;}
    a:visited img.borderGray {border:1px solid #9D99DD;}
    a:hover img.borderGray {border:1px solid #9DDD99;}

    a:visited avoids that links who have been visited, will show
    the default color.

    img.borderGray{border: 1px solid #999999;} is superfluous,
    or you even _should_ not put it there, I'm not sure about that.

    To be sure of the meaning of css stuff, you could use the
    SelectORacle, http://gallery.theopalgroup.com/selectoracle/

    (Css is niet moeilijk, je moet alleen ff weten hoe het werkt
    en dan nog de bugs in de browsers omzeilen.... ;-) )

    ----

    And before I could send it, Mark Parnell wrote:

    a img.borderGray:hover {
    border: 1px solid #9DDD99;
    }

    This selects any img element with a class attribute that
    contains the word borderGray and which is in a hover state
    that is a descendant of an a element.

    Mark, can you tell me the actual difference between a img in
    hover state or an img in a link in hover state?
    Which of the two is actually correct?

    Sincerley,

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Feb 9, 2004
    #5
  6. Stijn Goris wrote:

    > img.borderGray a:hover{
    > border: 1px solid #9DDD99;
    > }
    >
    > <a href="takkenLeider.php">
    > <img class="borderGray" src="Leiding/fotos/klein.jpg">
    > </a>


    "img.borderGray a:hover" means hovered links inside an image of class
    borderGray. You want the opposite: images of class borderGray inside a
    link that's being hovered.

    That is:
    a:hover img.borderGray {
    border: 1px solid #9DDD99;
    }


    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Feb 9, 2004
    #6
  7. Stijn Goris

    Mark Parnell Guest

    On Mon, 09 Feb 2004 23:15:23 +0100, Els
    <> declared in alt.html:

    > Mark, can you tell me the actual difference between a img in
    > hover state or an img in a link in hover state?
    > Which of the two is actually correct?
    >


    Offhand, the only difference would be that if there was anything else in
    the anchor, hovering over that would change the border as well. Whether
    this is desired or not depends on the application.

    Both are correct, but will give slightly different results.

    Browser support in my version may not be quite as good either (though I
    haven't tested).

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Feb 9, 2004
    #7
  8. Stijn Goris

    Stijn Goris Guest

    "Stijn Goris" <> wrote in message
    news:uiTVb.5052$-ops.be...
    > hi all,
    >
    > I want to change the bordercolor when a mouse floats above the imagelink.
    >
    > img.borderGray{
    > border: 1px solid #999999;
    > }
    >
    > img.borderGray a:link{
    > }
    >
    > img.borderGray a:hover{
    > border: 1px solid #9DDD99;
    > }
    >
    > with
    >
    > <a href="takkenLeider.php">
    > <img class="borderGray" src="Leiding/fotos/klein.jpg">
    > </a>
    >
    > but that doesn't work. Someone can help me out?
    >
    > Regards
    > Stijn
    >
    >

    thanks all,

    it works now...
     
    Stijn Goris, Feb 9, 2004
    #8
  9. Stijn Goris

    Els Guest

    Mark Parnell wrote:

    > On Mon, 09 Feb 2004 23:15:23 +0100, Els
    > <> declared in alt.html:
    >
    >
    >>Mark, can you tell me the actual difference between a img in
    >>hover state or an img in a link in hover state?
    >>Which of the two is actually correct?

    >
    > Offhand, the only difference would be that if there was anything else in
    > the anchor, hovering over that would change the border as well. Whether
    > this is desired or not depends on the application.
    >
    > Both are correct, but will give slightly different results.
    >
    > Browser support in my version may not be quite as good either (though I
    > haven't tested).


    Thanks :)

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Feb 9, 2004
    #9
  10. Stijn Goris

    Stijn Goris Guest

    "Stijn Goris" <> wrote in message
    news:uiTVb.5052$-ops.be...
    > hi all,
    >
    > I want to change the bordercolor when a mouse floats above the imagelink.
    >
    > img.borderGray{
    > border: 1px solid #999999;
    > }
    >
    > img.borderGray a:link{
    > }
    >
    > img.borderGray a:hover{
    > border: 1px solid #9DDD99;
    > }
    >
    > with
    >
    > <a href="takkenLeider.php">
    > <img class="borderGray" src="Leiding/fotos/klein.jpg">
    > </a>
    >
    > but that doesn't work. Someone can help me out?
    >
    > Regards
    > Stijn
    >
    >


    I have managed to solve my problem (changing the color) but the default link
    settings still show up. When you take a look at
    http://28edegem.be/takken.php?tak=6 . You will see that a box appears behind
    the picture. I used a boxed link for the rest of the site.

    Someone knows how I can get rid of it?

    regards
    Stijn
     
    Stijn Goris, Feb 10, 2004
    #10
  11. Stijn Goris

    Els Guest

    Stijn Goris wrote:
    >
    > I have managed to solve my problem (changing the color) but the default link
    > settings still show up. When you take a look at
    > http://28edegem.be/takken.php?tak=6 . You will see that a box appears behind
    > the picture. I used a boxed link for the rest of the site.
    >
    > Someone knows how I can get rid of it?


    yes,
    a:link img.borderGray {border:1px solid #999999;}
    a:visited img.borderGray {border:1px solid #999999;}
    a:hover img.borderGray {border:1px solid #9DDD99;}
    doesn't aplly to links inside table cells.

    make it
    td a:link img.borderGray {border:1px solid #999999;}
    td a:visited img.borderGray {border:1px solid #999999;}
    td a:hover img.borderGray {border:1px solid #9DDD99;}

    and i think it'll be solved :)

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Feb 10, 2004
    #11
  12. Stijn Goris

    Stijn Goris Guest

    "Els" <> wrote in message
    news:4028a906$0$41746$...
    >
    >
    > Stijn Goris wrote:
    > >
    > > I have managed to solve my problem (changing the color) but the default

    link
    > > settings still show up. When you take a look at
    > > http://28edegem.be/takken.php?tak=6 . You will see that a box appears

    behind
    > > the picture. I used a boxed link for the rest of the site.
    > >
    > > Someone knows how I can get rid of it?

    >
    > yes,
    > a:link img.borderGray {border:1px solid #999999;}
    > a:visited img.borderGray {border:1px solid #999999;}
    > a:hover img.borderGray {border:1px solid #9DDD99;}
    > doesn't aplly to links inside table cells.
    >
    > make it
    > td a:link img.borderGray {border:1px solid #999999;}
    > td a:visited img.borderGray {border:1px solid #999999;}
    > td a:hover img.borderGray {border:1px solid #9DDD99;}
    >
    > and i think it'll be solved :)
    >


    No sorry,

    The box still appears :-(
     
    Stijn Goris, Feb 13, 2004
    #12
  13. Stijn Goris

    Els Guest

    Stijn Goris wrote:

    > "Els" <> wrote in message
    > news:4028a906$0$41746$...
    >
    >>
    >>Stijn Goris wrote:
    >>
    >>>I have managed to solve my problem (changing the color) but the default

    >
    > link
    >
    >>>settings still show up. When you take a look at
    >>>http://28edegem.be/takken.php?tak=6 . You will see that a box appears

    >
    > behind
    >
    >>>the picture. I used a boxed link for the rest of the site.
    >>>
    >>>Someone knows how I can get rid of it?

    >>
    >>yes,
    >>a:link img.borderGray {border:1px solid #999999;}
    >>a:visited img.borderGray {border:1px solid #999999;}
    >>a:hover img.borderGray {border:1px solid #9DDD99;}
    >>doesn't aplly to links inside table cells.
    >>
    >>make it
    >>td a:link img.borderGray {border:1px solid #999999;}
    >>td a:visited img.borderGray {border:1px solid #999999;}
    >>td a:hover img.borderGray {border:1px solid #9DDD99;}
    >>
    >>and i think it'll be solved :)

    >
    > No sorry,
    >
    > The box still appears :-(


    What do you mean by 'box'?
    The border around the imagelink is rectangular, is that what
    you call a box? I don't see any other box, actually...


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Feb 13, 2004
    #13
  14. Stijn Goris

    Paul Furman Guest

    Els wrote:
    >
    >
    > Stijn Goris wrote:
    >
    >>>> http://28edegem.be/takken.php?tak=6 . You will see that a box appears
    >>>> behind the picture. I used a boxed link for the rest of the site.
    >>>>
    >>>> Someone knows how I can get rid of it?
    >>>

    >>
    >> The box still appears :-(

    >
    >
    > What do you mean by 'box'?
    > The border around the imagelink is rectangular, is that what you call a
    > box? I don't see any other box, actually...


    Stijn,
    do you mean that you want no border except when hovering? That would be
    nice but doesn't seem possible.


    This gives everything border:0
    a:link img {border:0px;}
    a:visited img {border:0px;}
    a:hover img {border:4px solid red;}
    a:active img {border:4px solid red}


    here's an interesting experiment:
    a:link img {border:1px solid green;}
    a:visited img {border:8px solid blue;}
    a:hover img {border:4px solid red;}
    a:active img {border:4px solid red}
    the widest border sets the precedent and narrower borders shrink out
    from the center!

    This site:
    http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php
    sets border on & off depending on if it's the selected thumb by setting
    it with html in php:

    <?
    if (($pic_num - 1) == $thumb_num){
    ?>
    border=3 >
    <?php } else { ?>
    border=0>
    <?php }?>

    but somehow that html border assignment conflicts with the css & I still
    get the awful blue for unvisited links.
     
    Paul Furman, Feb 13, 2004
    #14
  15. Stijn Goris

    Els Guest

    Paul Furman wrote:

    > Els wrote:
    > >
    > > Stijn Goris wrote:
    > >
    >>>>> http://28edegem.be/takken.php?tak=6 . You will see that a box appears
    >>>>> behind the picture. I used a boxed link for the rest of the site.
    >>>>>
    >>>>> Someone knows how I can get rid of it?
    >>>
    >>> The box still appears :-(

    >>
    >> What do you mean by 'box'?
    >> The border around the imagelink is rectangular, is that what you call
    >> a box? I don't see any other box, actually...

    >
    > Stijn,
    > do you mean that you want no border except when hovering? That would be
    > nice but doesn't seem possible.


    If that is what he means, he can 'fake it':
    Set the color of the border on a:link img to whatever the
    background color is, same for a:visited.
    This way, it _looks_ like there is no border until the image
    is hovered.

    > This gives everything border:0
    > a:link img {border:0px;}
    > a:visited img {border:0px;}
    > a:hover img {border:4px solid red;}
    > a:active img {border:4px solid red}


    This way I tried to use before, but it broke in at least one
    browser, even though I don't remember exactly how. It was a
    year ago, almost.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Feb 13, 2004
    #15
  16. Els wrote:

    > If that is what he means, he can 'fake it':
    > Set the color of the border on a:link img to whatever the
    > background color is, same for a:visited.
    > This way, it _looks_ like there is no border until the image
    > is hovered.


    Or better:

    a:visited img, a:link img { border: 1px solid transparent; }
    a:hover img { border: 1px solid lime; }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Feb 14, 2004
    #16
  17. Stijn Goris

    Els Guest

    Toby A Inkster wrote:

    > Els wrote:
    >
    >
    >>If that is what he means, he can 'fake it':
    >>Set the color of the border on a:link img to whatever the
    >>background color is, same for a:visited.
    >>This way, it _looks_ like there is no border until the image
    >>is hovered.

    >
    >
    > Or better:
    >
    > a:visited img, a:link img { border: 1px solid transparent; }
    > a:hover img { border: 1px solid lime; }


    That's what I thought, but in IE, transparent isn't rendered
    as transparent. I get a visible border (purple, cause I've
    been on the page), even with the color set to transparent.
    That's why I switched to using the background-color instead.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Feb 14, 2004
    #17
  18. Stijn Goris

    Stijn Goris Guest

    "Els" <> wrote in message
    news:402df4da$0$41750$...
    >
    >
    > Toby A Inkster wrote:
    >
    > > Els wrote:
    > >
    > >
    > >>If that is what he means, he can 'fake it':
    > >>Set the color of the border on a:link img to whatever the
    > >>background color is, same for a:visited.
    > >>This way, it _looks_ like there is no border until the image
    > >>is hovered.

    > >
    > >
    > > Or better:
    > >
    > > a:visited img, a:link img { border: 1px solid transparent; }
    > > a:hover img { border: 1px solid lime; }

    >
    > That's what I thought, but in IE, transparent isn't rendered
    > as transparent. I get a visible border (purple, cause I've
    > been on the page), even with the color set to transparent.
    > That's why I switched to using the background-color instead.
    >
    > --
    > Els
    >
    > Mente humana é como pára-quedas; funciona melhor aberta.
    >


    Hi all,

    Sorry for my late reply but could get a computer in the weekend.
    When I hover above the picture the border of the image changes color
    correctly but I also see a box appear behind the picture. I think the box is
    caused by the default hover setting (a:hover { background-color: #CCCCCC;}).
    The box is most clear behind the 3th link picture (Nina) on page
    http://28edegem.be/takken.php?tak=6

    I use IE 6.0 and Maybee others browsers will handle this differently?

    with kind regards
    Stijn
     
    Stijn Goris, Feb 16, 2004
    #18
  19. Stijn Goris

    Els Guest

    Stijn Goris wrote:

    > Hi all,
    >
    > Sorry for my late reply but could get a computer in the weekend.
    > When I hover above the picture the border of the image changes color
    > correctly but I also see a box appear behind the picture. I think the box is
    > caused by the default hover setting (a:hover { background-color: #CCCCCC;}).
    > The box is most clear behind the 3th link picture (Nina) on page
    > http://28edegem.be/takken.php?tak=6
    >
    > I use IE 6.0 and Maybee others browsers will handle this differently?



    Yes, I see what you mean now.
    And other browsers do show that grey background-color, but
    only underneath the picture.
    The reason I think that on Nina's picture it's best visible,
    is that her name is longer, and therefore the td is wider,
    and IE gives more padding on the <a> element it seems.
    Just add background-color:transparent to
    td a:hover img.borderGray {border:1px solid #9DDD99;}
    in takken.css, and I think the 'box' will be gone.


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
     
    Els, Feb 16, 2004
    #19
  20. Stijn Goris

    Stijn Goris Guest

    "Els" <> wrote in message
    news:4030b008$0$41760$...
    >
    >
    > Stijn Goris wrote:
    >
    > > Hi all,
    > >
    > > Sorry for my late reply but could get a computer in the weekend.
    > > When I hover above the picture the border of the image changes color
    > > correctly but I also see a box appear behind the picture. I think the

    box is
    > > caused by the default hover setting (a:hover { background-color:

    #CCCCCC;}).
    > > The box is most clear behind the 3th link picture (Nina) on page
    > > http://28edegem.be/takken.php?tak=6
    > >
    > > I use IE 6.0 and Maybee others browsers will handle this differently?

    >
    >
    > Yes, I see what you mean now.
    > And other browsers do show that grey background-color, but
    > only underneath the picture.
    > The reason I think that on Nina's picture it's best visible,
    > is that her name is longer, and therefore the td is wider,
    > and IE gives more padding on the <a> element it seems.
    > Just add background-color:transparent to
    > td a:hover img.borderGray {border:1px solid #9DDD99;}
    > in takken.css, and I think the 'box' will be gone.
    >
    >
    > --
    > Els
    >
    > Mente humana é como pára-quedas; funciona melhor aberta.
    >


    I tried
    background-color:#000000;
    background-color:transparent;
    but no succes :-(
     
    Stijn Goris, Feb 16, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,291
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,385
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    716
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,591
    Adrienne Boswell
    Jul 30, 2006
  5. Guldo K

    Radiobutton + Imagelink

    Guldo K, Nov 7, 2005, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    129
    Guldo K
    Nov 7, 2005
Loading...

Share This Page