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
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 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,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Corrporates..people with low self esteem-the list goes on and on lol.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •