today, i bring you a tutorial! easy-peasy.
ever wanted to make an image change when hovered over?
well, i wanted to.
so i taught myself how!
did you notice that my blog header and tabs have this nifty feature?
go ch-ch-check it out... scroll your mouse right on up there!
1st.
make your #1 image.
2nd.
make your #2 image - the one that will be shown when hovered over with the mouse.
3rd.
upload #1 and #2 to photobucket or a different photo sharing site.
4th.
code-it-up!
THE RED TEXT: is where you want the photos to link back to when clicked on
THE GREEN TEXT: is the direct HTML code from photo #1 that i got from photobucket
THE PURPLE TEXT: is the direct HTML code from photo #2 that i got from photobucket
THE BLACK TEXT: can be copy/pasted by youself! just make sure you substitute your own site and images :)
< a href="http://www.kandcamera.com/" target="_blank"><img src="http://i1235.photobucket.com/albums/ff437/kylie_shaye/HEADER1.png"
onmouseover="this.src='http://i1235.photobucket.com/albums/ff437/kylie_shaye/HEADER2.png'"
onmouseout="this.src='http://i1235.photobucket.com/albums/ff437/kylie_shaye/HEADER1.png'" /></a >
last but not least - remember to take out the spaces after the first < and before the last >
hope this helps ya!
let me know if you have any questions :)
UPDATE: Shelly used my tutorial on her lovely blog - check out her images HERE.
-------------------------------
xoxo - kylie
