How to do mouse over effects in HTML with wordpress

One of the great things about using wordpress for design is that there is (literally) a plug-in for almost anything you could imagine you would want to do.  This week, one of my musician clients called me and asked me if there was any way to create a mouseover effect with two images in wordpress.  I told him that I didn’t know but would look around for a solution for him.

There are two ways to deal with mouseover images.  The most functional way is to create javascript.  But you can work around this (if you don’t know how to create javascript) as well.  And this is what I am going to show you today.

• onmouseover
• onmouseout

The best way to show how it is done is to use an example and then show the code that is making it happen.

And here’s the code (I’ve highlighted the mouse-over parts of the html)

<a href=”http://drunkonlife.net”><img src=”http://drunkonlife.net/wp-content/uploads/2012/04/artists.jpg” alt=”" title=”" width=”380″ height=”130″ onmouseover=src=”http://drunkonlife.net/wp-content/uploads/2012/04/artists1.jpg” onmouseout=src=”http://drunkonlife.net/wp-content/uploads/2012/04/artists.jpg”></a>

Of course, you will need a plug-in to do this as well…..IMG Mouseover.

You can do this to create navigation effects or like my client wanted…..Super simple for even the beginner.

Hope this is helpful.  And create something great this week!

No related posts.