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)

107 thoughts on “IMG mouseover plugin for WordPress

  1. Pingback: 2010-01-16 Melanie’s Bday

    1. tychay Post author

      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).

      Reply
  2. Pingback: Black and White film effects | The Woodwork

  3. Joanna

    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

    Reply
    1. Steve

      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.

      Reply
  4. frankhamm

    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

    Reply
    1. tychay Post author

      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.

      Reply
  5. Pingback: frozentimes.net » Blog Archive » New plugin on FT.com

  6. Parris

    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.

    Reply
    1. tychay Post author

      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.

      Reply
  7. English

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

    Reply
    1. tychay Post author

      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?

      Reply
  8. dpmguise

    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.

    Reply
      1. Joshua

        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!

        Reply
        1. terry chay

          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.
          :-(

          Reply
  9. CoquetteCutie

    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!

    Reply
    1. tychay Post author

      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)?

      Reply
  10. marikamitsos

    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

    Reply
    1. tychay Post author

      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.

      Reply
    1. tychay Post author

      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.

      Reply
      1. Flowerlark

        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

        Reply
        1. tychay Post author

          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

          Reply
  11. Flowerlark

    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

    Reply
  12. Thomas Will

    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…

    Reply
    1. tychay Post author

      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.

      Reply
      1. Soren

        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…

        Reply
    2. terry chay

      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?

      Reply
      1. darrin

        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

        Reply
  13. Justin

    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!

    Reply
  14. Rick

    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?

    Reply
  15. Atul Pathria

    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.

    Reply
    1. Justin

      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.

      Reply
  16. michelle

    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.

    Reply
  17. Emma

    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

    Reply
    1. Emma

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

      Reply
  18. bpo

    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

    Reply
  19. Teacher Classes

    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

    Reply
  20. Pingback: Hello world! | BU Common@Mugar

  21. Pingback: Fix It Friday #88 « LauraMetzger.com

  22. Wendi

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

    Reply
  23. Pingback: » How do I have images overlaid on over images on a website?

  24. cybermarty

    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!

    Reply
  25. tori

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

    Reply
  26. Mothpre

    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 :)

    Reply
  27. Eliz

    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 ?

    Reply
  28. Magnus Bonde

    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

    Reply
  29. Jamie Kembel

    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.

    Reply
  30. Isabelle

    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

    Reply
  31. Nico Lauria

    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!

    Reply
  32. William

    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

    Reply
  33. nigel@webjoy.co.uk

    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.

    Reply
  34. Karissa

    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!

    Reply
  35. Oldfaded

    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.

    Reply
  36. james

    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

    Reply
  37. Zeca

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

    Reply
  38. Giuseppe

    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

    Reply
  39. john

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

    Reply
  40. DonO

    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

    Reply
  41. Gina Gaudio-Graves

    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!

    Reply
  42. sarah

    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

    Reply
  43. Morteza

    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,

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>