image rollover in wordpress, no plugins required

I’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’s wordpress.com hosted blog (and no, I couldn’t). This little example doesn’t do preloading, either, and I really don’t have any intention to develop this further. Sorry …

<img 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';" src="http://scruss.com/wordpress/wp-content/uploads/2010/01/this.png" alt="" width="192" height="116" />

This does not work on wordpress.com hosted blogs; it gets stripped out.

Update: You probably want to install the plugin Ultimate TinyMCE, which does the job rather well.

Comments

62 Responses to “image rollover in wordpress, no plugins required”

  1. Brett Torrey Haynes Avatar

    I figured it out. If you use the Pinterest Pin it plugin for Images, you have to turn it off for the individual post.

  2. scruss Avatar

    Yes, this code is very crude, and I can imagine situations where it wouldn’t work.

  3. Yoli Avatar

    How could I link a image of the code href=”” to a link?
    Thanks in advance.

  4. Roll101 Avatar
    Roll101

    @Yoli:
    after placing rollover image with this code, select it and click link button from tool bar.
    Its that simple and it works for me.
    btw , thanks for this code

  5. Jose Avatar
    Jose

    How do you make it link to a page?

  6. scruss Avatar

    It’s explained here.

  7. […] best to retire my ad hoc image rollover in wordpress, as Ultimate TinyMCE has it covered. Sure, it’s a plugin, but it makes it so much easier. […]

  8. […] Rollover code for Colonel Sanders via We Saw a Chicken […]

  9. Enmanuel Avatar

    If your looking for a jquery image hover plugin for WordPress please check this out:

    wpvisualslideboxbuilder.com/jquery-image-slider-for-wordpress/

  10. narges Avatar
    narges

    thanks, it’s fantastic & helpful.

  11. […] Rollover code for Colonel Sanders via We Saw a Chicken […]

  12. Pinkoman Avatar

    Thanks man i was also figuring out that finally gotcha.
    If you permit A want to same post on my WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *