changing the border around an imagelink

[Stijn Goris]

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

 

[David Dorward]

img.borderGray a:link{
img.borderGray a:hover{

You have your selectors backwards.

That would be:

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

 

[Mark Parnell]

hi all,
G'day.

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

Try

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

etc.

HTH

 

[Disco Octopus]

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

 

[Els]

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,

 

[Toby A Inkster]

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;
}

 

[Mark Parnell]

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

 

[Stijn Goris]

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

 

[Els]

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

 

[Stijn Goris]

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

 

[Els]

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

 

[Stijn Goris]

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 :-(

 

[Els]

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

 

[Paul Furman]

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.

 

[Els]

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.

 

[Toby A Inkster]

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; }

 

[Els]

Els wrote:




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.

 

[Stijn Goris]

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.

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

 

[Els]

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.

 

[Stijn Goris]

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.

I tried
background-color:#000000;
background-color:transparent;
but no succes :-(