Home Top Projects Tutorials Articles Submit Project
 
  • .NET Frameworks
  • Java Frameworks
  • PHP Frameworks
  • Ruby Frameworks
  • Other Frameworks
  • Cool AJAX sites
  • Ajax Resources
  • Ajax Tools
  • JavaScript frameworks
 
     
    • Ajaxed: Ajax for classic ASP
    • Creating Huge Bookmarklets
    • jquery gadget plugin
    • Canceling AJAX Web Service call
    • Web design tutorials :How to Sort table rows using Ajax Javascript
    • JavaScript as a Functional Language
    • jQuery and Google Maps #2: AJAX Storing and Retrieving Points
    • Scriptaculous Lists with PHP
    • Introduction to GWT Remote Procedure Calls
    • Google Translate API in Java
    Home » Tutorials » How To Add The CSS rollover Button

    How To Add The CSS rollover Button

    The CSS rollover button allow you to swap images while still keeping text in our link and it is naturally encourages your keyword(s) to be placed three times within any given link.

    Here is The CSS code:

    .cssnav
    {
    position: relative;
    font-family: arial, helvetica, sans-serif;
    background: url(overbtn.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 211px;
    height: 44px;
    margin: 0;
    padding: 0;
    }

    .cssnav a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 211px;
    height: 44px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    }

    .cssnav img
    {
    width: 211px;
    height: 44px;
    border: 0
    }

    * html a:hover
    {
    visibility:visible
    }

    .cssnav a:hover img
    {
    visibility:hidden
    }

    .cssnav span
    {
    position: absolute;
    left: 35px;
    top: 15px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    } 
    Copyrights Reserved AjaxProjects.com 2006-2013, Powered by Enozom - Mobile Development Company -Privacy Policy