SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Sep 9, 2009, 07:02 #1
- 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; }
My question is then how to preload this image when page loads?!?!
Any help is apriciated ;-)
-
Sep 9, 2009, 07:15 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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;}
-
Sep 9, 2009, 07:49 #3
- 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?!?
-
Sep 9, 2009, 08:08 #4
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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