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"/>
Using spot and patch in Apple Aperture. (mouseover to see the original.) (TODO: alignment issue redo screen capture)
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.
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
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?