I think this is SUCH a cool effect, and with a great variety of uses!
Turns out, it is NOT that hard to attain on a blogger blog, without a fancy plugin!
- Press Ctrl+F or Apple+F to bring up the search bar.
- Search for /head
- Simply Copy and paste the following code directly before </head>
<script language="JavaScript"> img0_on = new Image(width,height); img0_on.src="image2.gif"; img0_off = new Image(width,height); img0_off.src="image1.gif"; function over_image(parm_name) { document[parm_name].src = eval(parm_name + "_on.src"); } function off_image(parm_name) { document[parm_name].src = eval(parm_name + "_off.src"); } </script> |
- Next change the images in red to your images. Image 1 is what will show when someone hovers over the image, and Image 2 is the original image.
- Next paste the new image html where you would like this effect to appear on your page.
<center><a href="YOUR LINK" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="IMAGE 2" border="0" name="img0"> </a> |
- Change IMAGE 2 to the same image 2 as you pasted into the head of your page
- Change YOUR LINK to...your link ;-)
And Voila! You have a really cool effect!
***It is important to note***
- Blogger will change the html on you if you toggle between "edit HTML", and "Compose". You MUST publish post from the "Edit HTML" view or your effect will be lost.
- If you would like to use this effect in more than one location, you must add the additional images into the head of your page.
img1_on = new Image(width,height); img1_on.src="image2.gif"; img1_off = new Image(width,height); img1_off.src="image1.gif"; |
- Change to img1, for your second effect, img 2 for your third, etc.
0 comments:
Post a Comment