Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Rollover Buttons

    Hi all!

    I am trying to see if it is possible to make a rollover buttons from an external style sheet. The HTML page will contain DIV tag. These buttons will be made from GIF or JPEG images. I know how to make the rollover buttons from Dreamweaver CS3 but inserting these buttons as a rollover into a <TD> tag.

    I am trying something different by using DIV tag and using a external style sheet to control these rollover buttons.

    If you need

    Thanks!!

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Are you looking for something like this:

    Code:
    /* External "style.css" stylesheet */
    div.rollover {
     background-image: url("no-hover-state-image.jpg");
     width: 300px;
     height: 75px;
    }
    div.rollover:hover {
     background-image: url("hover-state-image.jpg");
    }
    
    <!-- HTML -->
    <style type="text/css">
     @import "style.css";
    </style>
    ....
    <div class="rollover">Roll me, baby.</div>
    It uses pseudo-classes, so it won't work in IE6 for sure, and I don't think it will work in IE7 (can't remember though). Should work on all other rendering engines.
    Last edited by BWiz; 05-24-2008 at 03:32 AM.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi BWiz!

    I have attached the 2 buttons to play around with.

    Thanks!
    Attached Files Attached Files

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just recently implemented the exact thing you are after. It works in most browsers including IE6.

    Here is the code for the CSS:

    Code:
    div.linkcont a {
      background-position:*Image position here eg. 'top left'*;
      background-repeat:no-repeat;
      width:*link width's here*;
    }
    
    a.link {
      display:block;
      height:*image height here*;
      background-image:url(images/image.jpg);
    }
    a.link:hover {
      background-image:url(images/imageHover.jpg);
    }
    
    a.link2 {
      display:block;
      height:*image height here*;
      background-image:url(images/image2.jpg);
    }
    a.link2:hover {
      background-image:url(images/image2Hover.jpg);
    }
    And the HTML:

    Code:
    <div class="linkcont"><a href="#" class="link"></a></div>
    <div class="linkcont"><a href="#" class="link2"></a></div>
    EDIT: I would also recommend preloading the hover images to prevent lag on the hover:

    Code:
    <span style="display:none;">
      <img src="images/imageHover.jpg" alt="Preload Image" />
      <img src="images/image2Hover.jpg" alt="Preload Image" />
    </span>
    Last edited by timehAndGod; 05-24-2008 at 05:28 AM.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    40
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi timehAndGod,

    I tried what you did but it didn't show anything. I have attached the HTML page and the external style sheet for you to look at. I also attached new buttons to test on. These buttons you can really tell if it's working or not.

    Thanks!!
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •