One of the things I really loved about my Radiant Shadows design was my social media icons. When someone hovered on them, they changed! Since I’m designing Pretty Little Reader myself, I set out to figure out exactly how to accomplish this same thing, on my own. Once I figured out that this specific effect was called an Image Rollover Effect, I had my answer, thanks to Google!
Since I wanted this, specifically, for my social media icons, I’m going to use my Facebook icon as the example.
The HTML code you’ll need is as follows:
a href=”URL ADDRESS” img src=”URL OF THE FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF THE SECOND IMAGE GOES HERE‘” onmouseout=”this.src=’URL OF THE FIRST IMAGE GOES HERE‘”
This is where the person who clicks on your image will be sent. So, since we’re doing my Facebook icon right now, I would change this to https://www.facebook.com/prettylittlereader.
URL of the First Image
This is the link to where your first image is hosted. My Facebook Icon is saved on my server, so if I navigate to my Media Library and search for the file I want, I’ll also be given its corresponding URL, which for me is http://prettylittlereader.com/wp-content/uploads/2014/01/facebook.png.
You could also host your photos on a site, like PhotoBucket or Picasa Web Albums, and accomplish the same thing.
URL of the Second Image
This is the link to where your second image is hosted, the image you want to appear when someone hovers over your Facebook Icon, which is http://prettylittlereader.com/wp-content/uploads/2014/01/facebook1.png for me.
Putting It All Together
Your final HTML should look something like this:
a href=”https://www.facebook.com/prettylittlereader” img src=”http://prettylittlereader.com/wp-content/uploads/2014/01/facebook.png” onmouseover=”this.src=’http://prettylittlereader.com/wp-content/uploads/2014/01/facebook1.png‘” onmouseout=”this.src=’http://prettylittlereader.com/wp-content/uploads/2014/01/facebook.png‘”
Once it’s enclosed in brackets, you get the final product!