FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

26 April 2011

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:

Tuesday's Tips


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,

5 comments:

guinevere

I was just wondering about how to do this yesterday!
Where do you get all this HTML knowhow? :)

Erin

Hey, that is so neat...thanks for sharing! I'll have to give it a try! :)

Emily Grace

Guin - Perfect timing, eh? All that I've learned I learned through other tutorials, google it, or try and figure it out by what I already know. =P

Erin - You're so welcome! I'd love to know what you make with it, do share the link if you make one. =)

Allison Hoffman

soo cool, I was just wondering how to do this earlier today - thanks for sharing. I'll def be back for more Tuesday tips :)

Lily Garay

HOOOOW AWESOME!!! I was really learning how to do this.... Thank you so much:D

Post a Comment

Leave your thought...