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.

62 comments

  1. I’m finding it strange that your post is titled “image rollover in wordpress” when its content is a piece of html code that will generally work on any page, WP or no, and then the information that the code does not work on a large subset of WP blogs…

  3. This was really a response to a friend’s Facebook posting. He wanted rollover on his wordpress.com hosted blog, and I wanted to test if it works. It does – but only on self-hosted WordPress blogs.

    There’s a plugin to do this, but it looks rather old and doesn’t work with the auto-install process. Again, wordpress.com blogs can’t use plugins.

    As for the favicon, to /Éš/ is human …

  5. any idea if there’s a way to get this method to preload the rollovers? I’ve used it but with photos brought in from Flickr and the load time is quite slow (at least on my slower connection), so on first mousing over you don’t even realize there’s a rollover that will work if you just hold your mouse over the photo for a little longer…

    thanks for this though, otherwise it works great

  6. No idea, rc. Preload would be great, but my knowledge of such things is limited. This really was a five-minute post to see if I could help out my friend with his blog.

    I suppose you could combine it with some kind of CSS preload, or something more fancy with jQuery.

  7. That’s ok, and just so you know the CSS preload you suggested does work just great in WordPress (at least as of right now on v2.9.1)… just a small line to enter in template’s CSS file and then have to list the specific images you want to preload for that post in code at the bottom of your post (this code will be invisible)… it’s a little more work but not too bad and really your javascript code was the simplest and easiest I could find and seems to work great in all the main browsers.

  8. You did an amazing job with this: I’m currently using this function on our blog site & wanted to thank you.

    Roger Sanchez

  9. Just wanted to give you a BIG HUG THANKS because I am building a new site that is a self hosted WP Woo theme and couldn’t figure out how to do rollovers on images….your code worked beautifully and it was super easy! All the other suggestions from other sites were way too involved and didn’t worked.

    THANK YOU THANK YOU THANK YOU

  12. Hello, I am trying to get this to work but seem to be missing something. Did you need to install the Raw HTML plugin to get this to work or did you add anything else? Thanks

  13. Hello, I actually got this to work in a slightly different manner. Thanks for this information!

  14. It’s great! tanx a lot, i used a plugin and it dit not work! your script is fantastic!

    You can change what you say, IT DOES WORK!!!!!!!!!!!!

  17. Am so tired of 50 million WP plugins, so this worked perfectly instead!
    Thanks a lot! 🙂

  19. Hey there. Thanks for this, I started using it on my blog today but I’m getting some reports that it doesn’t work on internet explorer browsers. Any idea why or how to fix that?

  20. Nope; sorry, James. While it works on the sole computer I have access to that uses IE8, I’ve never intended to develop this further.

  22. OMG! You ARE da man/king/freakin wonderful person!!

    Thank you 🙂 I’ve looking for this solution for freakin MONTHS!!

    Thank you x hug x

  24. hi,

    thanks for the code….

    ……just what i needed to do the rollover in wordpress in our internet marketing directory

  25. Pingback: It’s Always Been the Colonel | idApostle, Logo Designer, Ottawa, Steve Zelle

  28. Thanks scruss.

    Fantastic. Knowing the person responsible for the code I used in this post wrote about the same thing 12 years ago has me smiling—what are the chances? Nice to hear I wasn’t the only one that saw more than a bow tie on Harland David Sanders. I never thought about Cap’n Crunch before but will forever see claws now—thanks to you!

  29. Hi Scruss, I got your template to work if I used this and that but if I try additional jpg images with any other name it is not working and I can’t figure why…. I’m simply replacing your web address/year/month/file.jpg and not working…. if someone can help me out I’d really appreciate it…. Thanks

  30. Thanks a lot! It works almost perfect. The only thing that doesn’t work is that I cannot change the image’s title. If I change it to anything else (for example “fish”), the rollover effect stops working. I also changed the “this” before .src.

    Does anyone have the same problem or know why it occurs or what I should do?

    Thanks again!

  32. And what if i want to make a rollover on another picture or a text?
    like you roll over a text (a number 1 2 3) and a picture appears underneath or besides this text…? tricky?

  33. I have no idea. All this does is what you see here.

    I’m the reluctant provider of rollovery goodness for WordPress. Someone who knows PHP and has time should do something about this.

  34. think i found a solution, could you check if it works on your platfom and navigator?
    no php just javascript (?)


    1     2 3

  39. Dude, seriously, you’ve just made my site 3x cooler! Thanks it works…

  42. I believe I have the same question as kat, how do you make the mouse over image a link to another page?

  43. You can wrap it in an anchor tag, f’rinstance:
    <a href=”http://b3ta.com/”><img title=”this” onmouseover=… /></a>

  49. Thanks for posting this. I was originally looking for a plug in, didn’t think to just use html code. It worked a treat.

Leave a comment

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