•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,616 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,638 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1542 | Replies: 8
 |
•
•
Join Date: Jun 2006
Posts: 29
Reputation: 
Rep Power: 3
Solved Threads: 0
Light Poster
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
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
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
...and
didn't work?
a:link img, a:visited img { border: 1px solid #000000 }
a:hover img { border: 1px solid #FF0000 }
didn't work?
•
•
Join Date: Jun 2006
Posts: 29
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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.
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 } •
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
You might have some cross-browser compatibility issues with that solution.
•
•
Join Date: Jun 2006
Posts: 29
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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?
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
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 } •
•
Join Date: Jul 2006
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
why dont you just make diffrent images for rollover?
•
•
Join Date: Jun 2006
Posts: 29
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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.
Edit- I still get no "hover" functionality in IE6.
Last edited by Woobag : Sep 14th, 2006 at 6:36 pm.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation:
Rep Power: 5
Solved Threads: 17
Posting Pro in Training
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]
<img src="image.jpg'" class="rolloverOff" onMouseOver="this.className='rolloverOn'" onmouseout="this.className='rolloverOff'" /></a>
[/html]
.rolloverOff {
border: 1px solid #999999;
}
.rolloverOn {
border: 1px solid #FFFFFF;
}
Last edited by FC Jamison : Sep 14th, 2006 at 8:58 pm.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- CSS hover on individual link (li) ??? (HTML and CSS)
- CSS scrollbar ??? (JavaScript / DHTML / AJAX)
- CSS help with image links (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Need help with IE6 (simple?) problem
- Next Thread: A strange problem...
