{"id":108,"date":"2005-06-22T12:42:21","date_gmt":"2005-06-22T10:42:21","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/06\/22\/preload-hover-images-in-css\/"},"modified":"2013-01-15T19:05:42","modified_gmt":"2013-01-15T18:05:42","slug":"preload-hover-images-in-css","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/06\/22\/preload-hover-images-in-css\/","title":{"rendered":"Preload :hover images in CSS"},"content":{"rendered":"<p>Now that  the majority of CSS blogosphere is accessing the Internet with some kind of broadband connection, we kind of forget about Dial-up users. We do all kind of trickery to make our images lighter and faster to download, but even though, sometimes the first time visitor gets the flicker when hovering a link with a background image.<\/p>\n<p>Most of the time, <a href=\"http:\/\/wellstyled.com\/css-nopreload-rollovers.html\">pixy\u2019s workaround<\/a> with a single image, which is positioned accordingly will do, but sometimes for whatever reason, we need completely separate images. Preloading background images with CSS is so cheap trick, that I sometimes laugh at myself how could I forget about it.<\/p>\n<pre><code>a { background: url(image_hover.gif); }\r\na:link { background: url(image_default.gif); }\r\na:hover,\r\na:focus { background: url(image_hover.gif); }<\/code><\/pre>\n<h3>Update<\/h3>\n<p>The code example was rather generic, now it\u2019s altered for those who are in a hurry :&nbsp;) and have no time to read through valuable discussion in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now that the majority of CSS blogosphere is accessing the Internet with some kind of broadband connection, we kind of forget about Dial-up users. We do all kind of trickery to make our images lighter and faster to download, but even though, sometimes the first time visitor gets the flicker when hovering a link with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[25,52],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/108"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}