SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submit button with preloaded images?!?

    I have a submit button styled with images like this:
    Code:
    <input type="submit" class="submit" value="" />
    
    .submit
    {
        background: url(./images/submit_button.jpg) no-repeat;
        height: 42px;
        width: 130px;
        border: none;
    }
    .submit:hover
    {
        background: url(./images/submit_button_over.jpg) no-repeat;
        height: 42px;
        width: 130px;
        border: none;
    }
    This works allmost perfect, but... When moving mouse over the button there is a little loadtime on the submit_button_over.jpg image.

    My question is then how to preload this image when page loads?!?!

    Any help is apriciated ;-)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Stitch both images into one image that is 130px x 84px high and use just the one image.

    On hover you shift the background position to reveal the new part of the image which means that the image is always preloaded on page load.

    Code:
    .submit {
        background: url(./images/submit_button.jpg) no-repeat 0 0;
        height: 42px;
        width: 130px;
        border: none;
    }
    .submit:hover { background-position: 0 -42px;}
    BTW The above won't work in IE6 as you can only hover anchors in IE6.

  3. #3
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks... Works like a charm... By the way... Who needs IE6?!?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Corrporates..people with low self esteem-the list goes on and on lol.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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