logo
Copyright 2019 TwentyEleven Web Design
Image rollover in wordpress, no plugins required | TwentyEleven Web Design
1353
post-template-default,single,single-post,postid-1353,single-format-aside,bridge-core-1.0.7,ajax_fade,page_not_loaded,,qode_grid_1300,side_area_uncovered_from_content,footer_responsive_adv,qode-content-sidebar-responsive,qode-theme-ver-18.2.1,qode-theme-bridge,wpb-js-composer js-comp-ver-6.0.5,vc_responsive
 

Image rollover in wordpress, no plugins required

Quite an annoying aspect of WordPress is that its not very easy to use an image rollover from within posts. This is a simple hack that lets you use an image rollover in WordPress without the use of a plugin.

[raw]

<img title="this" onmouseover="this.src='https://twentyeleven.co.uk/wp-content/uploads/2012/05/that.png';" onmouseout="this.src='https://twentyeleven.co.uk/wp-content/uploads/2012/05/this.png';" src="https://twentyeleven.co.uk/wp-content/uploads/2012/05/this.png" alt="" width="192" height="116" />

[/raw]

19 Comments
  • Luciana Amaral
    Posted at 21:56h, 02 August Reply

    thank you very much, this was so helpful 🙂

  • evan
    Posted at 03:09h, 23 September Reply

    Thanks for this, but how do I implement this code? Where do I add it?

    I want to use an image rollover for the image thumbs on my blog.

    Thanks!

    • admin
      Posted at 10:49h, 23 September Reply

      Hi, it depends on how your theme is structured. If you send me a link showing which thumbs you want changing I can help you. This method uses the normal WordPress post.

  • brian glenn truex
    Posted at 00:39h, 25 September Reply

    OMG – I’ve been searching for over an hour for a simple image rollover solution – this looks like the BEST by far. I REALLY want to learn how to do this… but I am still a WordPress Newbie and could use a little help… please :>)

    I’m setting up my Artist website and working with a theme… I love it but the creator is NOT very helpful when I want to make changes or ask about something new. I have three images on my Gallery home page, just placed right now – but I want to link them to my three galleries – EZ – and have an image rollover.

    Here’s the URL if you can help…
    http://www.briantruex.com/gallery/
    Would I be right in the order of things by saying – 1st: Upload desired rollover image to media library and copy URLs, 2nd: Insert your static image on desired page in page editor, 3rd: link the image to desired page, 4th: Insert your code in the HTML view of the page editor? Update.

    If my ordering is correct??? I need help with #4 please!

    If there’s anything else I can do, like a snapshot of my Edit Page HTML or something just let me know….

    Thanks a TON if you can help…

    Sincerely,

    brian glenn truex

    chicago

    • admin
      Posted at 10:31h, 25 September Reply

      Hi brian,

      I noticed that you are using nextgen gallery which I assume you are using a shortcode to call the gallery links in your homepage. As nextgen gallery is quite restricive in some ways you are best off coding the links to the galleries on your homepage as follows. Here is an example for your painting gallery.

      <a href="http://www.briantruex.com/gallery/painting/" rel="nofollow"><img title="this" onmouseover="this.src='https://www.briantruex.com/wp-content/gallery/painting/thumbs/thumbs_2010-brian-glenn-truex-fine-art-hope-over.jpg';" onmouseout="this.src='https://www.briantruex.com/wp-content/gallery/painting/thumbs/thumbs_2010-brian-glenn-truex-fine-art-hope.jpg';" src="https://www.briantruex.com/wp-content/gallery/painting/thumbs/thumbs_2010-brian-glenn-truex-fine-art-hope.jpg" alt="" width="192" height="116" />
      
      Just replace the onmouseover link with your rollover state file url
      
      Then space all three out accordingly by using css.
  • brian glenn truex
    Posted at 04:50h, 25 September Reply

    Yahooooo!!!! Got it :>) :>) :>) Super Useful for ARTISTS :>)

    Thank you soooo much!!!

    brian glenn truex

  • brian glenn truex
    Posted at 03:00h, 30 September Reply

    Dear 2011 – thanks for the reply – a bit over my head I’m afraid. I used your original code and it works fine on my computer and different browsers… but NOT on an ipad??? This might be beyond my skill level. The links work but no rollever image when I pull it up on my wife’s ipad.

    It was worth a try… maybe some day there will be a simpler way.

    b

  • brian glenn truex
    Posted at 03:18h, 30 September Reply

    Dear 2011, I was VERY happy with finally figuring out how to insert your code into the html view of my page editor…. and it worked fine – is there any simple amendment I could make so it would function on an ipad as well?? Your last missive was a bit beyond my ability. As I mentioned before I am working with a theme and it’s been very difficult trying to customize it. It would suck if I couldn’t keep this rollover… it’s one of the FEW successes I’ve had.

    Thanks

    b

  • jon messing
    Posted at 19:03h, 27 February Reply

    Hey man, Brilliant piece of work here, this helps A LOT! I’ve been wanting to add rollovers to WP for a while…this was great!

    • admin
      Posted at 19:12h, 01 March Reply

      No problem. Glad I could help.

  • FHP
    Posted at 11:26h, 15 April Reply

    Hello,
    thank you for the code.
    When I enter it in in wordpress in the html window then it appears like it should in the visual window. But when I publish it then wordpress automatically changes the code from

    “”

    into

    “”

    Then there is just one picture.
    What could be the problem?

    Thank you for your help.

    FHP

    • admin
      Posted at 11:34h, 15 April Reply

      Hi I couldn’t see your images in your comment, but if you provide me a link to your website I can take a look for you or alternatively send me the code you are using to studio@twentyeleven.co.uk.

  • Andrew
    Posted at 21:07h, 25 April Reply

    THANK YOU SO MUCH IT WORKS !!!!!

  • leo
    Posted at 09:38h, 30 May Reply

    thank you!!! It was so simple! great man!! 🙂

  • dan
    Posted at 14:07h, 30 May Reply

    Thanks a lot

  • Sam
    Posted at 08:55h, 19 June Reply

    Hi,

    this is amazing, thanks for taking the time to post it.

    If i wanted the rollover image to be a link, how would i do that?

    Ive tried adding an link as standard and it does link, BUT, the image does not revert back to the 1st state when you remove the cursor, it just stays on the rollover.

    Many thanks

    Sam.

  • Renu
    Posted at 06:38h, 08 August Reply

    Thanks a ton for posting this.

    Regards
    Renu

  • Enmanuel
    Posted at 20:03h, 05 July Reply

    This short post explains how to create a slide up animation for your WordPress site in seconds using a plugin. No code necessary.

    http://wpvisualslideboxbuilder.com/how-to-create-a-wordpress-slide-box/

  • Leah
    Posted at 16:07h, 23 October Reply

    Help!

    I used this:

    But wordpress.com is still blocking the html. Did I do something wrong?

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.