{"id":5066,"date":"2010-01-16T11:37:17","date_gmt":"2010-01-16T16:37:17","guid":{"rendered":"http:\/\/scruss.com\/blog\/?p=5066"},"modified":"2013-03-31T15:47:54","modified_gmt":"2013-03-31T19:47:54","slug":"image-rollover-in-wordpress-no-plugins-required","status":"publish","type":"post","link":"https:\/\/scruss.com\/blog\/2010\/01\/16\/image-rollover-in-wordpress-no-plugins-required\/","title":{"rendered":"image rollover in wordpress, no plugins required"},"content":{"rendered":"<p><em>I&#8217;m seeing quite a bit of traffic to this post. I suppose I should explain that this was a quick hack to see if I could get image rollover to work on a friend&#8217;s wordpress.com hosted blog (and no, I couldn&#8217;t). This little example doesn&#8217;t do preloading, either, and I really don&#8217;t have any intention to develop this further. Sorry &#8230;<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5065\" title=\"this\" onmouseover=\"this.src='http:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/that.png';\" onmouseout=\"this.src='http:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/this.png';\" alt=\"\" src=\"http:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/this.png\" width=\"192\" height=\"116\" srcset=\"https:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/this.png 192w, https:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/this-160x96.png 160w\" sizes=\"auto, (max-width: 192px) 100vw, 192px\" \/><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;img title=&quot;this&quot; onmouseover=&quot;this.src='http:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/that.png';&quot; onmouseout=&quot;this.src='http:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/this.png';&quot; src=&quot;http:\/\/scruss.com\/wordpress\/wp-content\/uploads\/2010\/01\/this.png&quot; alt=&quot;&quot; width=&quot;192&quot; height=&quot;116&quot; \/&gt;<\/pre>\n<p>This does <strong>not <\/strong>work on <a href=\"http:\/\/wordpress.com\/\">wordpress.com<\/a> hosted blogs; it gets stripped out.<\/p>\n<p><span style=\"font-family: verdana,geneva;\"><strong>Update<\/strong>: You probably want to install the plugin <a href=\"https:\/\/wordpress.org\/extend\/plugins\/ultimate-tinymce\/\">Ultimate TinyMCE<\/a>, which does the job <a href=\"http:\/\/scruss.com\/blog\/2013\/03\/31\/a-better-image-rollover-with-ultimate-tinymce\/\">rather well<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m seeing quite a bit of traffic to this post. I suppose I should explain that this was a quick hack to see if I could get image rollover to work on a friend&#8217;s wordpress.com hosted blog (and no, I couldn&#8217;t). This little example doesn&#8217;t do preloading, either, and I really don&#8217;t have any intention [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[2058,1558,49],"class_list":["post-5066","post","type-post","status-publish","format-standard","hentry","category-computers-suck","tag-image","tag-rollover","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pQNZZ-1jI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/posts\/5066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/comments?post=5066"}],"version-history":[{"count":8,"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/posts\/5066\/revisions"}],"predecessor-version":[{"id":5295,"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/posts\/5066\/revisions\/5295"}],"wp:attachment":[{"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/media?parent=5066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/categories?post=5066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scruss.com\/blog\/wp-json\/wp\/v2\/tags?post=5066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}