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. The Modesto Kid Avatar

    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…

  2. The Modesto Kid Avatar

    BTW that is a beatiful favicon!

  3. scruss Avatar

    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 …

  4. Andrea Avatar

    Great! You’re My Savior!

  5. rc Avatar

    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. scruss Avatar

    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. rc Avatar

    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. Roger Sanchez Avatar

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

    Roger Sanchez

  9. Cyndi Avatar

    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

  10. craig Avatar

    Yo Thanks! Works like a charm.

  11. Andrei Ivan Avatar

    Thanks a lot man, I’ve been looking for days for a simple solution to rollovers in wordpress.

  12. Carol Avatar
    Carol

    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. Carol Avatar
    Carol

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

  14. Rene Avatar
    Rene

    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!!!!!!!!!!!!

  15. Rene Avatar
    Rene

    can you speed up the picture loading? it takes way to long

  16. Rene Avatar
    Rene

    Sorry, my mistake. i now use this html code:

  17. Sarah Avatar
    Sarah

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

  18. Jane Avatar
    Jane

    It worked brilliantly. Thank you so much!

  19. James Brandon Avatar

    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. scruss Avatar

    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.

  21. Phil Benson Avatar

    You the man Dawg!! Works beautifully! Thanx!

  22. Jam Avatar
    Jam

    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

  23. gaurav Avatar

    nice code
    thanks for sharing

  24. donn Avatar

    hi,

    thanks for the code….

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

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

  26. Steve Zelle Avatar

    Many thanks for the code. I used it in a blog post (and added a credit link to you)
    http://www.idapostle.com/it’s-always-been-the-colonel/

  27. scruss Avatar

    Steve, no worries. But clearly great minds think alike: dig this silliness from 2001: http://scruss.com/enterprise.net/colalien.html

  28. Steve Zelle Avatar

    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. david Avatar
    david

    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. Josefin Avatar
    Josefin

    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!

  31. Erik Avatar

    Thank you! Works great 🙂

  32. Julia Avatar
    Julia

    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. scruss Avatar

    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. Julia Avatar
    Julia

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


    1
    2 3

  35. scruss Avatar

    Sorry, I don’t have the time, skill or interest to implement this.

  36. Leon Avatar
    Leon

    Thanks!! Still works for me on WP 3.2.1

  37. meltho Avatar
    meltho

    I love you. Thank you.

  38. nir Avatar
    nir

    works very well
    thanks

  39. Fabs Avatar
    Fabs

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

  40. kat Avatar
    kat

    how do i add a link to the button?

  41. scruss Avatar

    what button?

  42. Jim Avatar
    Jim

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

  43. scruss Avatar

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

  44. Jim Avatar
    Jim

    That worked perfectly. Thank you!

  45. Andy Johnston Avatar

    This rollover code was just what I needed. I used it for the download button on my tutorial:
    http://ajdesignco.com/blog/2012/05/29/illustrator-ai-eps-template-desktop-wallpaper-for-typical-monitor-sizes/

    Thank you so much!

  46. Kevin Avatar
    Kevin

    If i do

    Then the mouseover effect doesn’t work…

  47. scruss Avatar

    Well, don’t do that, then.

    It’s totally okay to link to b3ta if you want to. Just don’t go there.

  48. Wais Avatar

    Great smal of code thank you very much!!

  49. Emma Brock Avatar

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

  50. Studio Avatar

    the best i ever seen in my life thank a million, god bless you always

Leave a Reply

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