Double Linked Image

Before we start, please, hover your mouse over the image below - but don't click it.

BAM, bet you did not see that coming did you!? :D Yes, I am acting overly exited, but I still think it's a pretty cool thing to do. The reason why I don't think you should click on it, is because it will just take you to my Goodreads page, if you'd like to verify it works then go ahead. If not just skip it.

That's right guys, today I am showing you how to have one image, make it change when the mouse hovers over it, and have it be linked.

Step 1

First you will need two images. For the example above both images are the same, but with different colors. It doesn't really matter what your images are, they can be completely different and unrelated. I do strongly suggest that they are not too different in size, it can make it look messy.

Step 2

Find an image hosting service - for example Photobucket or ImageSahck. Then upload both your images and get the direct link. You can also get the direct link uploading your image to a blog post and taking it from the HTML part.

Link to the blue image: 

http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/Goodreads_zps4fa48973.png

Link to the grey image:

http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/gret_zps8bbe9b1c.png 

and also the link to wherever it is you want for it to go when you click on it. In my case I am using my  
Goodreads user page:
https://www.goodreads.com/user/show/4418048-jude

The Code

Once you have your elements ready, it's time to start with the code. This is how it works

<a href="LINK "><img onmouseout="this.src='LINK OF IMAGE 1 (BLUE)'" onmouseover="this.src='LINK TO IMAGE 2 (GREY)'" src="LINK OF IMAGE 1 (BLUE)" /></a>

Once you replace with your own elements it should look similar to this one:


<a href="https://www.goodreads.com/user/show/4418048-jude"><img onmouseout="this.src='http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/Goodreads_zps4fa48973.png'" onmouseover="this.src='http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/gret_zps8bbe9b1c.png'" src="http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/Goodreads_zps4fa48973.png" /></a>

and that's it! You can copy paste that code in your blogger posts, or on HTML boxes on the sidebars and it'll work. You can use it for menu bars, social icons, giveaway buttons- you name it! I hope this was helpful to you! As always let me know in the comments if you'd like to know/learn more about something else and I will try my best to answer it :)