Below please find the code to create the rollover.
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>This is the result:
Naturally you will have to change the image urls and linked to address according to your needs.
Customize the code by adding the images you want to use & the address you want it to lead to.
With that in mind, change these to suit your needs.
1. Change the TARGET URL GOES HERE line with the address of wherever you want
your reader to be taken to when they click on the image.
2. Change the URL OF THE FIRST IMAGE ( there are two of these, use the same image url for both )
This is the image that automatically appears without any mouse over. No one need to do anything to see this image.
It will be the FIRST image.
3. Change the URL OF SECOND IMAGE GOES HERE
This will become tour mouse-over or hover over image.
Place the url to this second image here.
EASY TRICK TO REMEMBER:
4. What I do is use the code placed above as a “guide” handy in a hidden post and replace the urls as required in posts and pages wherever I need these. It makes having to remember the code a non issue.
If your theme or a plugin allows for it, and if you are linking to a video, you can also
have it open in a lightbox. Please refer to your theme / plugin’s specific documentation for any shortcode that it may use.