Web Design - Web Applications - Internet Marketing
  FAQHome   FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister    ProfileProfile   Private messagesPrivate messages   Log inLog in

JavaScrip type rollover effects with CSS

 
Post new topic   Reply to topic    SharkZone Design Forum Index -> HTML, XHTML, CSS and JavaScript
View previous topic :: View next topic  
Author Message
Amanda Carter



Joined: 23 Mar 2007
Posts: 1
PostPosted: Sat May 19, 2007 5:56 pm    Post subject: JavaScrip type rollover effects with CSS Reply with quote
How do I use CSS to create JavaScript type rollover effects? I have read that it can be done, but no details where given.
Back to top
View user's profile Send private message
SharkZoneDesign



Joined: 17 Mar 2007
Posts: 15
Location: Phoenix, Arizona
PostPosted: Tue May 22, 2007 3:10 pm    Post subject: Reply with quote
Hello Amanda,

There are four different selectors that apply to links. You can specify separate styles for each of these selectors including color background color and background image. In the example below the link color will vary according to the state.

Code:

<html>
<head>
<style type="text/css">
   a.alink:link     {color: red;}
   a.alink:visited {color: green;}
   a.alink:active  {color: blue;}
   a.alink:hover  {color: orange;}
</style>
</head>

<body>
<a href="http://digg.com" class="alink">This is a link</a>
</body>
</html>


In your case you are probably going to only work with the hover selector. You don't give specifics of what effect you are trying to archive. So I will give an example of a row of menu boxes that change colors with a mouse over.

Code:

<html>
<head>
<style type="text/css">
   .nav
   {
      border-top: 1px solid black;
      width: 150px;
      margin: 0;
      padding: 0;
   }
   .nav li
   {
      list-style: none;
      margin: 0;
      padding: 0;
   }
   .nav a
   {
      display: block;
      padding: 2px 5px 2px 25px;
      margin: 0;
      border-left: 1px solid black;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      text-decoration: none;
   }
   .nav a:link     
   {
      background-color: yellow;
      color: red;
   }
   .nav a:hover 
   {
      background-color: blue;
      color: white;
   }
</style>
</head>

<body>
<ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>
</body>
</html>





Some key points:

Unordered lists are commonly used for menus in CSS based designs,
The list-style attribute is used to block the default bulleted list.
The ”display: block” allows for specifying the size.
The “text-decoration: none” removes the default behavior of an underlined link.

Hope This Helps
Tom Whitney
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    SharkZone Design Forum Index -> HTML, XHTML, CSS and JavaScript All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group