944,173 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Image links and CSS
Ad:
Permalink
Sep 9th, 2006
0

Image links and CSS

Expand Post »
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Sep 9th, 2006
0

Re: Image links and CSS

...and

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. a:link img, a:visited img { border: 1px solid #000000 }
  3. a:hover img { border: 1px solid #FF0000 }

didn't work?
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Sep 11th, 2006
0

Re: Image links and CSS

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.

HTML and CSS Syntax (Toggle Plain Text)
  1. #car:link img, #car:visited img { border: 1px solid #000000 }
  2. #car:hover img { border: 1px solid #FF0000 }
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Sep 11th, 2006
0

Re: Image links and CSS

You might have some cross-browser compatibility issues with that solution.
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Sep 12th, 2006
0

Re: Image links and CSS

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?
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Sep 13th, 2006
0

Re: Image links and CSS

If you've named the image, try

HTML and CSS Syntax (Toggle Plain Text)
  1. a:link img#car, a:visited img#car { border: 1px solid #000000 }
  2. a:hover img#car { border: 1px solid #FF0000 }
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Sep 13th, 2006
0

Re: Image links and CSS

why dont you just make diffrent images for rollover?
Reputation Points: 11
Solved Threads: 0
Newbie Poster
Spector is offline Offline
2 posts
since Jul 2006
Permalink
Sep 14th, 2006
0

Re: Image links and CSS

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.
Last edited by Woobag; Sep 14th, 2006 at 7:36 pm.
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Sep 14th, 2006
0

Re: Image links and CSS

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

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

HTML and CSS Syntax (Toggle Plain Text)
  1. .rolloverOff {
  2.   border: 1px solid #999999;
  3. }
  4.  
  5. .rolloverOn {
  6.   border: 1px solid #FFFFFF;
  7. }
Last edited by FC Jamison; Sep 14th, 2006 at 9:58 pm.
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Need help with IE6 (simple?) problem
Next Thread in HTML and CSS Forum Timeline: A strange problem...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC