Tuesday's Tips - Image Change on Rollover

This is a simple little bit of code that will allow you to make an image change each time you mouseover it.
(an example is at the end of the post--blogger is being a pain and won't let me move it...)

First create two images, one original image and one for when you hover over it. Make sure they are the same size.
Upload them to your image hosting site.
Copy and paste this html code wherever you would like the images to appear (your blog post, sidebar, etc).

<a href="linkurl"><img src="image1"onmouseover="this.src=&#39;image2&#39;" onmouseout="this.src=&#39;image1&#39;" alt="alternate text" /></a>

Replace the red colored text with your own information. Make sure you don't delete anything but the red colored text.

linkurl

--should be replaced with whatever url you want the image to take you when you click on it.

image1

--should be replaced with the direct url for your first image in both places it appears in the code.

image2

--should be replaced with the direct url for your second image.

alternate text

--should be replaced with whatever text you want to appear if for some reason the image won't load. (it will also appear when your mouse hovers over the image in some browsers)

In the end your code should look similar to mine:

<a href="http://emilygrace-blog.blogspot.com/">
<img src="http://70.38.54.187/h/405/a0863d67-bc09-421c-9619-a73d13b283c2.jpg" onmouseout="this.src=&#39;http://70.38.54.187/h/405/a0863d67-bc09-421c-9619-a73d13b283c2.jpg&#39;" onmouseover="this.src=&#39;http://70.38.54.187/h/405/87d54c49-7edb-413e-94d2-b7a82316df1a.jpg&#39;"  alt="Tuesday's Tips"/></a>

and your image should appear similar to mine:



As always, if you have any questions about this tutorial, just let me know and I'll get back to you asap. If you have any suggestions for Tuesday's Tips, I'd love to hear it. =)

In Christ,