{"id":113,"date":"2010-08-24T18:45:19","date_gmt":"2010-08-24T22:45:19","guid":{"rendered":"http:\/\/blogs.law.harvard.edu\/djcp\/?p=113"},"modified":"2010-08-24T18:45:19","modified_gmt":"2010-08-24T22:45:19","slug":"pre-loaded-image-rollovers-with-jquery","status":"publish","type":"post","link":"https:\/\/archive.blogs.harvard.edu\/djcp\/2010\/08\/pre-loaded-image-rollovers-with-jquery\/","title":{"rendered":"Pre-loaded Image Rollovers with jQuery"},"content":{"rendered":"

I despise implementing image rollovers, but this makes it almost tolerable. Any <img> tag with a “hover” attribute referring to an image URL will have a rollover behavior attached to it. For bonus points, the rollover image will be pre-loaded, so there’s no momentary delay the first time an on-state image is loaded.<\/p>\n

In your HTML source:<\/p>\n

\r\n<img src="\/images\/button.gif" hover="\/images\/button_on.gif" \/>\r\n<img src="\/images\/another_button.gif" hover="\/images\/another_button_on.gif" \/>\r\n<\/pre>\n
\r\njQuery(document).ready(function(){\r\n  jQuery('img[hover]').each(function(){\r\n    \/\/ Preload rollover\r\n    var imageEl = jQuery("<img alt="" \/>");\r\n    imageEl.attr('src',jQuery(this).attr('hover'));\r\n\r\n    jQuery(this).hover(\r\n      function(){\r\n        \/\/ swap the image.\r\n        var hoverSrc = jQuery(this).attr('hover');\r\n        var regSrc = jQuery(this).attr('src');\r\n        jQuery(this).attr('src',hoverSrc);\r\n        jQuery(this).attr('hover',regSrc);\r\n      }\r\n    );\r\n  });\r\n});\r\n<\/pre>\n
Thanks jQuery for being so awesome.<\/p>\n","protected":false},"excerpt":{"rendered":"
I despise implementing image rollovers, but this makes it almost tolerable. Any <img> tag with a “hover” attribute referring to an image URL will have a rollover behavior attached to it. For bonus points, the rollover image will be pre-loaded, … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1984,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[4,17295,17294],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-code","tag-javascript","tag-jquery"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/users\/1984"}],"replies":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":6,"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/posts\/113\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/djcp\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}