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:

attributedescription
oversrcWhen mouseover’d, the image should be changed to this
clicksrcWhen clicked, the image should be changed to this. To revert, simply mouseout of the image.
noresizeIf set to “true” the image area will not change in the events above.

You can also override the a links:

attributedescription
forThe ID of the image to target
for_linkReplace a hyperlink with the link contained the the href of this anchor
srcWhen clicked, the target image will be replaced with this source
oversrcWhen 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)
Pages: 1 2 3 4

94 thoughts on “IMG mouseover plugin for WordPress”

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

    • 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 ↓

  5. Pingback: Black and White film effects | The Woodwork

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

    • 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 ↓

  8. 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 ↓

    • 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 ↓

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

  11. 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 ↓

    • 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 ↓

  12. 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 ↓

    • 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 ↓

  14. 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 ↓

      • 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 ↓

        • 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 ↓

  15. 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 ↓

    • 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 ↓

  16. 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 ↓

    • 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 ↓

    • 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 ↓

      • 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 ↓

        • 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 ↓

  19. 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 ↓

  21. 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 ↓

  22. 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 ↓

  23. 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 ↓

    • 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; }

      <a href="/make/about/" rel="nofollow"></a>
<a href="/make/factory/" rel="nofollow"></a>
<a></a><a href="http://twitter.com/#!/makecollab" title="Twitter" rel="nofollow"></a>


<a href="/make/prop" rel="nofollow"></a>
[randomtext category="front"]
Feed

    • Twitter feed loading

      • 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 ↓

  24. 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 ↓

  25. 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 ↓

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

      Reply ↓

  26. 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 ↓

  30. 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 ↓

  33. Pingback: Hello world! | BU Common@Mugar

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

  36. 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 ↓

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

  39. 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 ↓

  47. 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 ↓

  48. 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 ↓

  49. 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 ↓

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>