Reply
Text with html CSS roll over effects
Old 09-22-2006, 11:28 AM Text with html CSS roll over effects
3rdShiftStudios's Avatar
Ultra Talker

Posts: 252
Name: Jaison Tortorea
Location: cincinnati, oh
I want to make text links that have almost a java behavior to them: When you mouse over, the background color changes. I'm working in DWmx and have figured a few things out, all except the changing of the color. I DO NOT WANT JAVA SCRIPT as this is an optimization thing.

this is an example of what i'm talking about: http://www.bwf-america.com/filter-bags.html

you can see the navigation on the left are all made of text blocks, and when you roll over them, the back ground changes color. I like the little lines that seperate them too.
__________________
graphic | multimedia design
jaison tortorea
3rdShiftStudios is offline
Reply With Quote
View Public Profile Visit 3rdShiftStudios's homepage!
 
When You Register, These Ads Go Away!
Old 09-22-2006, 11:31 AM Re: Text with html CSS roll over effects
LadynRed's Avatar
Super Moderator

Posts: 6,699
Location: Tennessee
What you want can be easily done with CSS and absolutely no javascript.
There are many examples here:
http://www.alvit.de/css-showcase/
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 09-22-2006, 12:13 PM Re: Text with html CSS roll over effects
3rdShiftStudios's Avatar
Ultra Talker

Posts: 252
Name: Jaison Tortorea
Location: cincinnati, oh
very cool, thanks so much! For anyone looking for a quick copy/paste, here's the code I used. You just stuff it into the CSS file

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #FFFFFF;
margin: 0;
}

#button li a {
display: block;

background-color: 666666;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
background-color: #FF00FF;
color: #fff;
}
3rdShiftStudios is offline
Reply With Quote
View Public Profile Visit 3rdShiftStudios's homepage!
 
Reply     « Reply to Text with html CSS roll over effects
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.12281 seconds with 12 queries