HTML and CSS RSS HTML and CSS RSS

Image links and CSS

Reply

•
•
Join Date: Jun 2006
Posts: 33
Reputation: Woobag is an unknown quantity at this point 
Solved Threads: 0
Woobag Woobag is offline Offline
Light Poster

Image links and CSS

 
0
  #1
Sep 9th, 2006
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: Image links and CSS

 
0
  #2
Sep 9th, 2006
...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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 33
Reputation: Woobag is an unknown quantity at this point 
Solved Threads: 0
Woobag Woobag is offline Offline
Light Poster

Re: Image links and CSS

 
0
  #3
Sep 11th, 2006
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 }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: Image links and CSS

 
0
  #4
Sep 11th, 2006
You might have some cross-browser compatibility issues with that solution.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 33
Reputation: Woobag is an unknown quantity at this point 
Solved Threads: 0
Woobag Woobag is offline Offline
Light Poster

Re: Image links and CSS

 
0
  #5
Sep 12th, 2006
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: Image links and CSS

 
0
  #6
Sep 13th, 2006
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 }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 2
Reputation: Spector is an unknown quantity at this point 
Solved Threads: 0
Spector Spector is offline Offline
Newbie Poster

Re: Image links and CSS

 
0
  #7
Sep 13th, 2006
why dont you just make diffrent images for rollover?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 33
Reputation: Woobag is an unknown quantity at this point 
Solved Threads: 0
Woobag Woobag is offline Offline
Light Poster

Re: Image links and CSS

 
0
  #8
Sep 14th, 2006
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: Image links and CSS

 
0
  #9
Sep 14th, 2006
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.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC