Creating Rollover Images Inside WordPress
We have created some steps to assist you in creating a rollover image within WordPress:
Below is the image rollover effect that we are trying to achieve within WordPress (hover over image with mouse cursor to see rollover change):
Step #1: Make sure you have created 2 separate images that are slightly modified to give rollover effect when mouse hovers over Image 1 (see example 1A below, these are two separate images with image 1 opacity changed to 75%).
With this example, we want the YouTube icon to go from a transparent 75% opacity to 100% opacity color as seen in Example 1A below:
You can complete changing opacity by using Adobe Photoshop or Fireworks.
When in your choice of photo editor you first want to bring down the opacity of Image 1 to 75% (so it looks to be a similar opactiy as Image 1).
When in Adobe Photoshop or Fireworks, Go to ‘file’ -> ‘Save as’, then save as Transparent PNG under new name, such as Image 1. Don’t save with original name, as you will just save over your original image, we want 2 separate image names for 2 separate images.
Now, you should have 2 separate images, Image 1 (opacity down to 75%) and Image 2 (at 100% opacity). As seen in Example 1A.
Step #2: You must be using the correct code to insert rollover images within a WordPress post or page.
Below is the code you need to use in order to get the rollover image effect to work within WordPress:
<a href="MAIN TARGET URL PLACED HERE"><img src="URL OF FIRST IMAGE PLACED HERE" onmouseover="this.src='URL OF SECOND IMAGE PLACED HERE'" onmouseout="this.src='URL OF FIRST IMAGE PLACED HERE'" /></a>
Step #3: Remember the images you edited above? The ones you changed the opacity to 75% and leaving the other at 100% opacity? Well, you need to use those images URL links in this code to obtain the rollover effect you are looking for within WordPress.
In the above code you MUST change the following:
- MAIN TARGET URL PLACED HERE
This is where you want to place the URL that you are trying to direct your visitors to. Example: http://www.yourwordpresswebsitenamehere.com
- URL OF FIRST IMAGE PLACED HERE (this will be done twice in the code above)
Here is where you want to place your 100% opacity image URL. Example of what link should look like (you would change to your image pathway, this is just example): http://www.yourwordpresswebsitenamehere.com/wp-content/uploads/2013/01/image2.png
- URL OF SECOND IMAGE PLACE HERE
Here is where you want to place your 75% opacity image URL. Example of what link should look like (you would change to your image pathway, this is just example): http://www.yourwordpresswebsitenamehere.com/wp-content/uploads/2013/01/image1.png