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.
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…
BTW that is a beatiful favicon!
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 …
Great! You’re My Savior!
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
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.
You did an amazing job with this: I’m currently using this function on our blog site & wanted to thank you.
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
Yo Thanks! Works like a charm.
Thanks a lot man, I’ve been looking for days for a simple solution to rollovers in wordpress.
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
Hello, I actually got this to work in a slightly different manner. Thanks for this information!
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!!!!!!!!!!!!
can you speed up the picture loading? it takes way to long
Sorry, my mistake. i now use this html code:
Am so tired of 50 million WP plugins, so this worked perfectly instead!
Thanks a lot! 🙂
It worked brilliantly. Thank you so much!
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?
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.
You the man Dawg!! Works beautifully! Thanx!
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
thanks for sharing
thanks for the code….
……just what i needed to do the rollover in wordpress in our internet marketing directory
Many thanks for the code. I used it in a blog post (and added a credit link to you)
Steve, no worries. But clearly great minds think alike: dig this silliness from 2001: http://scruss.com/enterprise.net/colalien.html
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!
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
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?
Thank you! Works great 🙂
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?
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.
think i found a solution, could you check if it works on your platfom and navigator?
1 2 3
Sorry, I don’t have the time, skill or interest to implement this.
Thanks!! Still works for me on WP 3.2.1
I love you. Thank you.
works very well
Dude, seriously, you’ve just made my site 3x cooler! Thanks it works…
how do i add a link to the button?
I believe I have the same question as kat, how do you make the mouse over image a link to another page?
You can wrap it in an anchor tag, f’rinstance:
<a href=”http://b3ta.com/”><img title=”this” onmouseover=… /></a>
That worked perfectly. Thank you!
This rollover code was just what I needed. I used it for the download button on my tutorial:
Thank you so much!
If i do
Then the mouseover effect doesn’t work…
Well, don’t do that, then.
It’s totally okay to link to b3ta if you want to. Just don’t go there.
Great smal of code thank you very much!!
Thanks for posting this. I was originally looking for a plug in, didn’t think to just use html code. It worked a treat.
the best i ever seen in my life thank a million, god bless you always