IMG mouseover plugin for WordPress

My first WordPress plugin!

Download

Please go to IMG Mouseover on WordPress.org.

The following are new attributes to img tags:

attribute description
oversrc When mouseover’d, the image should be changed to this
clicksrc When clicked, the image should be changed to this. To revert, simply mouseout of the image.
noresize If set to “true” the image area will not change in the events above.

You can also override the a links:

attribute description
for The ID of the image to target
for_link Replace a hyperlink with the link contained the the href of this anchor
src When clicked, the target image will be replaced with this source
oversrc When clicked, the target image mouseover will be replaced with this image

Example: Simple mouseover

<img src="http://farm3.static.flickr.com/2675/3820523223_cccf72f34a.jpg" class="mouseover" oversrc="http://farm3.static.flickr.com/2426/3820522177_5936afd63b.jpg"/>
aperture patch post

Using spot and patch in Apple Aperture. (mouseover to see the original.) (TODO: alignment issue redo screen capture)

117 thoughts on “IMG mouseover plugin for WordPress

    1. You have to enter the code from the "HTML" view for TinyMCE, not from TINYMCE itself.

      I'll patch TinyMCE to support a graphical version of it when I get a chance.

      In the meantime, you should probably download and install "TinyMCE Valid Elements" (the WordPress hook to fix this disappeared around Version 2.0).

  1. Thanks for making this 🙂
    I really love the idea of this plugin but for some reason my wordpress refuses to install it. I have the latest wordpress version and when I try to activate the plugin I get the following error : Parse error: syntax error, unexpected T_STATIC, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /plugins/img-mouseover/img-mouseover.php on line 15. Any ideas why it does not like the term static?
    Thanks in advance for the help
    My recent post The Baseball Roll

    1. Probably conflict with another plugin you have activated. I have run into the same thing in the past with various plugins. Try deactivating in batches to narrow down to the one that (hopefully) is conflicting.

  2. Hi this is Frank Hamm from Germany. Great Idea for a plugin and is exactly what I am searching for. Unfortunately I have the same Problem as Joanna
    When activating the Plugin I get this error massage.

    Parse error: syntax error, unexpected T_STATIC, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/www/nc11085/html/wordpress/wp-content/plugins/img-mouseover/img-mouseover.php on line 15

    Any solution, I rearlly need such a funktion in my wordpress installation. For your information my worpress release is WordPress 2.9.1

    Can you please help

    Kind regards from germany

    Frank

    1. I never expected anyone to actually be using this plugin! xD

      The problem you and Joanna are experiencing is you are on PHP 4, not PHP 5. I patched the plugin (Version 1.2) to fix this problem.

      Hope this helps.

  3. Can you explain or post an example above of how to have a thumbnail image when moused over trigger the change of the main image? I think this is possible from your notes, but can't figure out the correct syntax.

    1. I cannot do that, that is an interesting Idea though. I do have the ability that when you click on a link, it will trigger a change in an image.

      I'll look into doing thumbnails.

      In any case, I added documentation about the link stuff.

  4. This is just what I was looking for. Would this work within a gallery do you think?
    Thanks for making a great plugin.
    Cheers

    1. That has nothing to do with the plug-in. Just put a hyperlink around the image and clicking it will jump to another page. Or do you mean something else?

  5. Hi, thanks for making this plugin, very useful and simple.

    I am just curious if you or anyone else has had this same issue – All the rollovers appear to be working fine but then sometimes in Safari or IE the original source is never returned and the picture disappears.

    Is this just me or has anyone else experienced the images disappearing after rollover? I am using WP 3.0 with PHP 5.0.

      1. I'm having the same problem using Google Chrome:
        http://www.pithandpower.com/websites/

        I'm showing images of webpages I've designed. On mouseover, the image expands to show a longer/taller picture of the page. Then when mouseover ends, the image disappears.

        Funny thing is it only happens when I first visit the page from another page. If I re-fresh the same page, it doesn't happen. Please let me know if you have any advice on how I can fix this.

        Great plugin!

        1. Hmm, I just downloaded Google Chrome (Mac) and visited the site by clicking on the link above and it is working fine for me. (Tried a reload and it still works). I can't reproduce the bug.

          🙁

          1. Hi! Love the plug in

            I used it on my own site and works perfectly:
            http://www.hathare.com/about

            but went to install on another site:
            http://www.lakearrowheadetiquetteschool.com
            (see second badge image)
            and the image disappears on mouseout… The source (which was initially loaded) does not come back on moust out.
            Has there been a solution for this? I have very few plugins active and have tried deactivating to identify a conflict- no luck… Help?!

            Thank you!

  6. Yeah, if you could fix that TinyMCE bug that'd be excellent. And as a suggestion, could you do something like a "backsrc" link so that the user can go back and forth between two images? Clicksrc works great, but then unless the user refreshes the page, they're stuck. Thank you! Works great!

    1. I fixed the TinyMCE bug.

      Right now, instead of backsrc, you just mouse out. Would you like me to add a feature so that clicking would vary between it and which (the over or the original)?

  7. Hi there, EXCELLENT work. 😉
    I use it in one of my sites. Please have a look. http://exairesi.aenaon.biz/site/φω&tau;…
    I hope the code does not disappear This is what I have: <..a href="http://…..ftisweb"><..img class="mouseover size-full wp-image-13" title="Είσοδος σε εικόνες" src="http://….ads/2010/06/raftis_afisa_col.jpg" oversrc="….ads/2010/06/raftis_afisa_text2.jpg" alt="" height="454" width="300"..><../a>
    I use it togetrer with this script so as to have a preload of the images:
    <…script type="text/javascript" charset="utf-8">
    var imageObject = new Image();
    var images = new Array();
    images[0] = “raftis_afisa_text2.jpg”;
    images[1] = “raftis_afisa_col.jpg”;
    for(i=0; i<1; i )
    {
    imageObject.src = images[i];
    }
    <…/script>
    And it works great.
    Question. Will I have to change anything in any of the codes after the upgrade?
    Thanx so much. By the way. I use wordpress3.0 I think you should update the compatibility version which is still 2.9.2
    Thanx again

    1. I actually preload the images (see line 59 in the javascript of the plugin) so you don't have to do that if you don't want.

      No, you should not have to change your code when you update my plugin. To make it HTML 5 compliant, I will be making some changes, but they should occur transparently without a change on your end.

      I use WordPress 3.0 and it works fine. I'm not familiar with WordPress.org which is why I didn't remember to update things (that's why I'm writing this plug-in). I'll look into that.

    1. Do you have SuperCache or anything? If so you need to clear the cache. The plugin has changed to write HTML5 compliant tags and the javascript needs to be updated also.

      Please give me the url of a page on your blog using it and maybe I can help diagnose.

      1. I cleared my cache. I used it on my mainpage (http://flowerlarkstudios.com/) on the left-hand side. The image links under 'comics' are supposed to change when I hover over them. I'm using the latest version of wordpress with the comicpress theme. I'm not sure what you mean by javascript needing to be updated. Does that mean I need to change my code, or that I need to install an update? Sorry, I know a little code, but am not very web-language savvy.
        My recent post Site Update

        1. You are totally right! I didn't consider if someone used the code outside of a post (post_content). In this case this is a widget sidebar.

          I'm going to be making two changes:
          1) Update to have it fallback to the old mode if I missed soemthing.
          2) Catch widget content and upgrade

          I'll be posting the fix as version 1.4.1

  8. This plugin used to work perfectly. when I updated it to version 1.4, it no longer worked. The image isn't changing when I mouseover. I haven't changed the code, what's going on?
    My recent post Site Update

  9. Hello,

    I think there is a bug in Image Mouseover version 1.4.1 :
    When using in IE 8 the mouseover image is getting bigger than the original image (twice the width and twice the height I would say)..
    I downgraded to the old version 1.2 and now it is fine again.
    I am using WP 3.0.1.
    This is only in IE 8, Firefox is ok, do not know with Chrome, Safari etc.
    IE is really a "bug finder" in scripts and plugins…

    1. Thank you so much, it reminds me I have to get VMWare running on my development platform. I'll look into it and update this comment.

      1. Hello! I also have the problem, but I do not want to "downgrade" It works fine in Firefox and Safari but in IE8 the image gets bigger. I tried with noresize but that does not help…

    2. I'm in IE8 right now and am not seeing this problem (with the examples above).

      Can you give me a reference to a page with this problem so I can diagnose it?

      1. Hi,
        I just installed this fantastic plugin but on viewing in IE (Ver 8) I also have this problem. The icons roll to a HUGE size.
        url: suttonrunners.org

  10. This rocks. Thank you so much. Makes life much much easier. Very neat plugin.____I remember years ago in my static html coding days before WordPress even came around spending the best part of half a day trying to get a mouseover effect to work! This took me less than 10 minutes!

  11. I am assuming that images without the new attributes will be left alone, so that I can enable the plug-ins on just some of my images?

  12. Hi,

    For the mouseover thing in IE height and width is not working for mouse over image. Code is like that:

    <td scope="row" align="center">
    <img src="http://www.abc.com.au/wp-content/uploads/hole/hole1a.jpg&quot; height="50" width="200" class="mouseover" oversrc="http://www.abc.com.au/wp-content/uploads/hole/hole1ab.jpg&quot; height="50" width="200"/>
    </td>

    width is looking fine in the image inside table. Actual image size is large and i want to show the image at fix width and height. It worked fine in FF but on mouse over in IE it show the actual size beside 50h and 200w.

    Anyone has the solution to this prob..Thanks in advance.

    1. I’m having issues with the plugin working in a table IE, http://makecollab.com which is :

      MAKE Collaboration

      body
      {
      background-color:#F2F2F2;
      }
      header {
      color: black;
      text-align: left;
      font-size: large;
      font-family: Helvetica, sans-serif;
      }
      body {
      color: #000000;
      font-family: Helvetica;
      }

      twitter_update_list {

      font-family: Helvetica, sans-serif;
      font-size: 10px;
      line-height: 19px;
      list-style: none;
      }
      

      twitter_update_list li {

      background: url('http://erinandjustinb.com/make/home_contents/50greyHR-dash.png') bottom left repeat-x;
      padding-bottom: 7px;
      margin-bottom: 9px;
      }
      

      twitter_update_list span, #twitter_update_list span a {

      color: #ababab;
      text-decoration: none;
      }
      

      twitter_update_list a {

      color: #6f7276;
      }
      

      table.sample {
      border-width: 1px;
      border-spacing: 10px;
      border-style: none;
      border-color: none;
      border-collapse: separate;
      background-color: #000;
      }
      table.sample th {
      border-width: 1px;
      padding: 1px;

      border-style: solid;
      border-color: #f2f2f2;
      background-color: #000;
      -moz-border-radius: ;
      

      }
      table.sample td {
      border-width: 1px;
      padding: 10px;
      border-style: solid;
      border-color: #f2f2f2;
      background-color: #fff;
      -moz-border-radius: ;
      }

      a, a:link {
      padding: 1px;
      color: #fff;
      text-decoration: none;
      }

      a:hover {
      color: #000000;
      text-decoration: none;
      background: #E6E7E8;
      }




      [randomtext category=”front”]
      Feed

    2. Twitter feed loading
    3. A working example not using a table http://erinandjustinb.com/make/test :
       

       

      Does it just not work in tables? Or is it something with my coding?

      Thanks.

  13. hmm maybe this is not the right plug in for me. I don't know. I would like to have thumbnais and a large main image that changes when the thumbnails are either clicked on or moused over. I dont want new windows to open, etc.. just a basic image gallery. Will this extension do that? Please help. And if it will please direct me how. Thank you.

  14. Hi, thanks, this is a great plugin, makes rollovers super easy 🙂 I am using it on a site we're developing… just wondering if you've had any luck fixing the roll over height in IE8? Everything else perfect.
    Is it possible to download an earlier version of the plugin in the meantime? Thanks again!
    My recent post The Pursuit of Happyness

    1. For now, workaround – inserted IE7 Compliant meta tag so that loads in IE7 standard, fixing the issue. Not ideal, but it works 🙂

  15. I am looking for a plugin for my portfolio page in which I can display my client website screenshot as image and mouse hover can display the site's url, title, description and if required other notes.

    Please let me know if anyone is aware of such plugin. Thx

  16. Terry, this is great. Is there anyway that you would be able to build/upgrade the plugin so that I dont have to type in the css stuff??? I got it to work, but I would much rather be able to choose the normal and mouse'd-over images in a visual format. If need be for simplicity or just for starters, it would only have the basic attribute for the mouseover image (not upon click etc)

    Would a donation motivate and help you for this?

    thanks!
    Jesse

  17. Hi –
    Your plugin works great right out of the box!
    I would love to get it working with a custom paypal button I've made. The existing code is enclosed within a form. Below you can see how I've taken your code and placed it within this form code.

    <form action="https://www.paypal.com/cgi-bin/webscr&quot; method="post">
    <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="ND74UQZD6527G" /> <input type="image" src="http://innerstellarmedium.com/wp-content/themes/shifter-1.8rc6.1/css/myimages/bluekeygift.png&quot; class="mouseover" oversrc="http://innerstellarmedium.com/wp-content/themes/shifter-1.8rc6.1/css/myimages/blueglow.png&quot; border="0" name="submit" alt="PayPal – The safer, easier way to pay online!" />
    </form>

    Hopefully it's an easy fix? Thank you so much!!

  18. Hi, thank you so much for this great and simple plugin! I'm so happy to make this work. It was a present for my wife's website. Now, I'm the king 🙂 Best regards from germany. Thank you again!

  19. Hi will this work on WordPress 3.1.3? The plugin page says it has not been tested. Has anyone tried it?

  20. Hey Thank you so much i does work takes a little time to identify the fields but is the best way of makin a mouseover image 🙂

  21. i use your example from page 3 to make a 3 pictures comparation slide. and it works.

    however, it is possible to make the slide change the image on mouseover over the text links instead of clicking on the text links ?
    if Yes … how ?

  22. Hi, great stuff.

    However I’m having trouble with the mouse over picture.
    I want the mouseover picture to be clickable and link to a different page.
    How do I do that?

    Best regards

  23. I love the plugin, but I am having issues with one link making a seperate image rollover. Even in the example on page 3, if doesn’t seem to work in the current versions of Chrome, Firefox, nor IE.

    For a basic rollover so far this is awesome.
    I have always wondered why WP has not integrated this yet as a standard feature.
    To be able to have an interface to set classes, and set other options for rollover image (a.jpg would be a_over.jpg) would probably make this one of the top 5 plugins available.

    Can anyone lend some help with the for=”ID” part to this plugin? I can not get it to work for the life of me.

  24. Thank you for the plugin. Quick question: how do I change the size of the mouseover image only? the src is fine but the oversrc gets stretched. Thank you for directing me to the right procedure.
    Isabelle

  25. First of all thank you for the plugin! One question for you… Is it possible to change the background position or say box-shadow of just the oversrc img? Thanks!

  26. Hello,
    great plug-in !! really !

    I have a question. Is it possible to have a text as the source of the ”popup” instead of an image ? I can only work with html code due to some restrictions.

    Thanks a lot,
    Will

  27. Good Comment ! i try to do that. i write back, if works. look to my side, and you see it works. Mouse over sound in wordpress.

  28. Using latest Safari, with the option noresize, when i mouse over i get the oversrc image, when i move away both images disappear along with the original image place holder. It works fine with IE and FF. If i remove option noresize then it works ok with each browser.

  29. sorry guys…i am not expert in html…but where and what i need to write to make this plug in works???

  30. I installed and activated your plug-in. I can not find where/what to do next? Am I missing something? Thx, Wallly

  31. This works on Multi-Sites. Just don’t ‘Network Activate it. Activate it on a site by site basis.

    Here is the code I used on my site http://kissaskreations.com for the Social Media icons at the bottom:
    a href=”http://www.facebook.com/yourusername” target=”_blank”></a

    Thanks so much!

  32. Sorry about the multiple posts. Please delete this and the first 2 posts, but leave the last one. Trying to get the code to show up.

  33. I’ve been using this plug-in for over a year now. It’s been working great. Now I just noticed that one some pages it works fine, others not at all. Haven’t changed anything, so I have no idea of why its so quirky.

  34. Hello, i really would like to use this plugin but have no idea how to use it. Can someone post a video tutorial or tell me where the plugin is installed so that i may use. Thanks in advance for your help.

    Best,
    James

  35. Don’t work im Chrome, now why? I can see the images, but after the overley the image disappear only in chrome. Thanks

  36. Great plugin! Really solves lots of problems! ^_^
    Just one question:
    on iphone/ipad/mobile there is the way to show immediately the second image?

    Thanks

  37. could anyone tell me where to find the plugin once i install it? i dont know where to go next . . .

  38. Hi Terry – I switched themes and img mouseover is not longer working. I’m guessing there may be some css conflict. Would like to ask you to help me trouble shoot this. Are you available? — DonO

  39. Hi Terry:

    DonO HIGHLY recommends this plugin and I’d love to use it on http://www.HowToLiveOnPurpose.com as well as DirectionsU.com. However, both are WordPress MU sites and we are having trouble getting it to work on the HTLOP site. You can see the attempt at the bottom of http://www.howtoliveonpurpose.com/resources. However, it just gives us a blank space where the image should show up. I think it has to do with MU. Any suggestions?

    Thanks!

  40. Hello great plug in it helped me a lot!

    I have a question however: how do you align image on right? I have use this plugin in a widget

    thank you

  41. Hi, GREAT PLUGIN,

    Just wondering how I can add some transition method to control the speed of image rollover when the original image is changing to a second image.

    Thanks,

  42. Great plugin, works perfectly on my Mac and the only one I could find that works with WordPress 4.0.
    Just wondered, when I view it on my iPad, the image changes to the second one but doesn’t revert back to the first image.
    Is there something I can alter to make it work on my mobile device?

  43. Can you make some kind of fade effect to allow the trasition to be smoother than simply flashing back andforth between images?

  44. Just updated to 4.4 and img-mouseover isn’t working any longer. It appears that with the transition to provide responsive images all images are loaded with “srcset” in addition to “src”. Browsers that support the srcset attribute (Firefox and Chrome) will ignore the src attribute. Since img-mouseover ONLY changes src and not srcset as well this renders the plugin useless for users of Chrome and Firefox.

    I tried examining the JS code to fix the issue but it is just beyond my reach. Is there any chance in getting this resolved?

Leave a Reply to Sharon Cancel reply

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