Image links and CSS

[Woobag]

Hey, Im trying to do a CSS rollover border color change for my images (which are links). Problem is, the border only partly covers the image, going about half way up the image on the sides, and not covering the top at all.

Id post some code, but considering the easy nature of what im trying to do i didnt think it would be necessary.

Thanks for your help,
-ryan

[FC Jamison]

...and

a:link img, a:visited img { border: 1px solid #000000 }
a:hover img { border: 1px solid #FF0000 }

didn't work?

[Woobag]

Yes, this works. Thanks for the help.

I saw something reference the "img" part in CSS, but i couldnt apply it to work correctly in my situation.

Sweet, and since i wanted to name it, i came up with this.

#car:link img, #car:visited img { border: 1px solid #000000 }
#car:hover img { border: 1px solid #FF0000 }

[FC Jamison]

You might have some cross-browser compatibility issues with that solution.

[Woobag]

You guessed it. In I.E. the image links are the lighter gray, and do not change colors. The image links at the top of my page (this page is included by a index.php - for example) are showing in the purple "visited" color as the would do so normally. I think i can solve the latter of those two problems, but what do you think about correcting the first?

[FC Jamison]

If you've named the image, try

a:link img#car, a:visited img#car { border: 1px solid #000000 }
a:hover img#car { border: 1px solid #FF0000 }

[Spector]

why dont you just make diffrent images for rollover?

[Woobag]

Rollovers are more complicated, and customizing them on the fly is a bit of a pain. I am going for a style and it can be acheived both ways, and this way is the easiest.

Edit- I still get no "hover" functionality in IE6.

[FC Jamison]

ok...on my photo gallery page (http://www.frankjamison.com/gallery/), I use a combination of css and javascript to achieve this effect.

<img src="image.jpg'" class="rolloverOff"  onMouseOver="this.className='rolloverOn'" onmouseout="this.className='rolloverOff'" /></a>

.rolloverOff {
  border: 1px solid #999999;
}

.rolloverOn {
  border: 1px solid #FFFFFF;
}