image rollover in wordpress, no plugins required

Comments

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

1. 

   02010-01-16

   The Modesto Kid

   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. 

   02010-01-16

   The Modesto Kid

   BTW that is a beatiful favicon!
3. 

   02010-01-16

   scruss

   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. 

   02010-02-11

   Andrea

   Great! You’re My Savior!
5. 

   02010-02-27

   rc

   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. 

   02010-02-27

   scruss

   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. 

   02010-03-02

   rc

   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. 

   02010-05-11

   Roger Sanchez

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

   Roger Sanchez
9. 

   02010-05-24

   Cyndi

   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. 

    02010-05-25

    craig

    Yo Thanks! Works like a charm.
11. 

    02010-05-30

    Andrei Ivan

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

    02010-08-25

    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. 

    02010-08-25

    Carol

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

    02010-09-01

    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. 

    02010-09-01

    Rene

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

    02010-09-01

    Rene

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

    02010-11-15

    Sarah

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

    02010-12-05

    Jane

    It worked brilliantly. Thank you so much!
19. 

    02011-01-10

    James Brandon

    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. 

    02011-01-10

    scruss

    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. 

    02011-02-08

    Phil Benson

    You the man Dawg!! Works beautifully! Thanx!
22. 

    02011-02-08

    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. 

    02011-03-26

    gaurav

    nice code
    thanks for sharing
24. 

    02011-03-30

    donn

    hi,

    thanks for the code….

    ……just what i needed to do the rollover in wordpress in our internet marketing directory
25. 02011-04-19

    It’s Always Been the Colonel | idApostle, Logo Designer, Ottawa, Steve Zelle

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

    02011-04-19

    Steve Zelle

    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. 

    02011-04-19

    scruss

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

    02011-04-19

    Steve Zelle

    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. 

    02011-06-01

    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. 

    02011-06-13

    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. 

    02011-07-04

    Erik

    Thank you! Works great 🙂
32. 

    02011-07-18

    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. 

    02011-07-18

    scruss

    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. 

    02011-07-18

    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. 

    02011-07-18

    scruss

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

    02011-09-12

    Leon

    Thanks!! Still works for me on WP 3.2.1
37. 

    02011-11-10

    meltho

    I love you. Thank you.
38. 

    02012-01-13

    nir

    works very well
    thanks
39. 

    02012-01-19

    Fabs

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

    02012-03-12

    kat

    how do i add a link to the button?
41. 

    02012-03-12

    scruss

    what button?
42. 

    02012-04-13

    Jim

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

    02012-04-14

    scruss

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

    02012-04-14

    Jim

    That worked perfectly. Thank you!
45. 

    02012-05-29

    Andy Johnston

    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. 

    02012-06-21

    Kevin

    If i do
    

    Then the mouseover effect doesn’t work…
47. 

    02012-06-21

    scruss

    Well, don’t do that, then.

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

    02012-06-22

    Wais

    Great smal of code thank you very much!!
49. 

    02012-07-13

    Emma Brock

    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. 

    02012-07-14

    Studio

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