Example: mouseover with mouse clicks
Click on the image and then mouseout and click again.
<img src="http://farm3.static.flickr.com/2600/3821325536_c2e66be524.jpg" class="mouseover" clicksrc="http://farm4.static.flickr.com/3541/3820521213_84d2306a0e.jpg" oversrc="http://farm4.static.flickr.com/3473/3820520483_141531e45e.jpg" />
Example: noresize
This example is the mouseover with noresize set:
<img src="http://farm3.static.flickr.com/2653/4291398588_b76f0a50ec.jpg" class="mouseover" oversrc="http://farm5.static.flickr.com/4041/4281119182_8767f7a810.jpg" noresize="true" />
This is awesome!
it's fantastic
My recent post Forex Weekly Trading Forecast – 02.15.10
tinymce keeps stripping out the code like I enter your code and for clicksrc (exact copy paste)
<img class="mouseover" src="http://farm3.static.flickr.com/2600/3821325536_c2e66be524.jpg" alt="" />
any ideas on how to stop that?
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).
I modified the plugin so it tells TinyMCE to not filter the special tags.
I always get this failure notice:
"Parse error: syntax error, unexpected T_STATIC, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /var/www/web73/html/wp-content/plugins/img-mouseover/img-mouseover.php on line 15"
Is there any solution?
Ciao Carli
My recent post If you register your site for free at
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
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.
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
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.
This is an awesome plugin! I'm using it on an image on my design blog…Hover your mouse over the last image!
thanks for taking the time to make this…
My recent post Creative Bookmarks inspired by Spike Milligan
No problem. I'm looking to improve the plug-in so I am open to suggestions.
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.
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.
This is just what I was looking for. Would this work within a gallery do you think?
Thanks for making a great plugin.
Cheers
Can you give me an example of a gallery plugin you are using. Or, do you mean the WordPress defaults?
Can you help me make this clickable to another page?
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?
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.
This would sound like a bug in jquery not PHP. I'll probably need more information if I'm to debug this 🙁
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!
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.
🙁
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!
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!
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)?
Hi there, EXCELLENT work. 😉
I use it in one of my sites. Please have a look. http://exairesi.aenaon.biz/site/φωτ…
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
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.
I upgraded today and now all my mouseovers don't work! Can you help?
Cheers
English
My recent post Peace Love
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.
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
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
Thank you!
My recent post Site Update
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
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…
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.
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…
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?
i also have a problem using IE8. My images disappear onmouse over. Running IE8 in compatible mode solves the problem. Could you please give me a download link for older versions? 1.4 or 1.2 perhaps? Thank you!
My recent post Verwijder de Datum uit je WordPress Posts en Comments voor meer bezoekers
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
Terry, agreed. Is there a place to get the older version?
Hi,
i`m so glad i find this awesome plugin for my wordpress blog. i wonder if you could invent a attribute for fading images into each other on mouseover nor mouseout
My recent post Trial bei Why Me
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!
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?
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" height="50" width="200" class="mouseover" oversrc="http://www.abc.com.au/wp-content/uploads/hole/hole1ab.jpg" 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.
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 {
twitter_update_list li {
twitter_update_list span, #twitter_update_list span a {
twitter_update_list a {
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;
}
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
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.
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.
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
For now, workaround – inserted IE7 Compliant meta tag so that loads in IE7 standard, fixing the issue. Not ideal, but it works 🙂
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
Thank you for this!!!!
I can't seem to get the links to work, image rollover works but not the url link:
<img src="http://farm3.static.flickr.com/2675/3820523223_cccf72f34a.jpg" class="mouseover" oversrc="http://farm3.static.flickr.com/2426/3820522177_5936afd63b.jpg" for_link="http://www.google.co.uk"/>
Can someone please give me an example of a rollover that is linkable to a url page please.
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
It’s best knowledge.
Thanks for this, it works just fine!
Finally I found this great plugin. I've tried and it's works. Thanks!
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" 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" class="mouseover" oversrc="http://innerstellarmedium.com/wp-content/themes/shifter-1.8rc6.1/css/myimages/blueglow.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!" />
</form>
Hopefully it's an easy fix? Thank you so much!!
Can you please tell me in a simple way how to make a mouseover with this plugin? Thanks 🙂
Mette:)
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!
I love this plugin! You Rock, my friend.
Thank you.
Wow! it's fantastic.. thanks for sharing.. keep it up!
How do I use it since I activated it?
Brilliant; been searching for something this simple that works so well! THANK YOU!
Hi will this work on WordPress 3.1.3? The plugin page says it has not been tested. Has anyone tried it?
Hello
I must be stupid, but can someone please wright me the right code to this:
PIC. 1: http://www.gpsforalle.dk/images/rabatlogo.gif
PIC 2 (mouseover): http://www.gpsforalle.dk/images/rabatlogo_popup.gif
How to add a link (http://www.website.com) to PIC 2 ?
Thank you very much in advance.
Best regards
Ivan
?
It´s awesome, but I need a mouseover to get the pic from 200×300 in 300×400 px. Can you help me?
😉 Mathias
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 🙂
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 ?
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
hello, how can i fade the pictures by time? is there any attribute for this function?
many thanks!
Hi
is possible to modify Your plugin for mouseover effect like here?http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/comment-page-6/#comments
It’s not the same –>use jquery
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.
How would I go about making my images fade in and out with a delay?
I too would be interested in applying a fade transition to this plug-in. Is there a solution?
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
Add the attribute
noresize="true"
to the img tagFirst 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!
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
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.
This worked perfectly! Thank you!!!!
How do I make the image a hyperlink so it is clickable?
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.
Good! This work in Chrome two.
nigel, thank you. this is what i needed.
sorry guys…i am not expert in html…but where and what i need to write to make this plug in works???
ok got it….
I installed and activated your plug-in. I can not find where/what to do next? Am I missing something? Thx, Wallly
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:
Thanks so much!
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!
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.
This works on Multi-Sites. Just don’t ‘Network Activate it. Activate it on a site by site basis.
@Wally
Here is the code image link I used on my site http://kissaskreations.com for the Social Media icons at the bottom: http://www.ge.tt/8cdjzTF/v/0?c. It just starts working, you don’t have to look for a settings tab anywhere. Hope that helps.
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.
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
I’m wondering the same thing. I have it activated, and ready to go…now what?
Don’t work im Chrome, now why? I can see the images, but after the overley the image disappear only in chrome. Thanks
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
could anyone tell me where to find the plugin once i install it? i dont know where to go next . . .
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
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!
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
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,
wp img mouseover is not working in internet explorer version 8.0. my link page will not open. Please help.
This plugin is awesome but I am in a problem when using a link to the image. Mouse over effect works for first time only. When I mouse over there second time it’s not working! If I remove link form image it works fine all time. http://188.165.239.223/onecut/contact-2/emplois-stages/ is the link I am working on. Please help me.
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?
Can you make some kind of fade effect to allow the trasition to be smoother than simply flashing back andforth between images?
I have used this plugin on the past to get hover animations done on my site. WordPress Hover Animations
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?
Hey, this is great! Any idea if this code will work on Squarespace, as well? Sure would be killer if it did.
Thanks,
Seth
Hi. Downloaded img mouseover in WordPress. And it won’t deactivate neither will it show up anywhere as an option within admin menus so I can use it… help!!