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>
img0_on = new Image(width,height);
img0_off = new Image(width,height);
document[parm_name].src = eval(parm_name + "_on.src");
document[parm_name].src = eval(parm_name + "_off.src");
- 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_off = new Image(width,height);
- Change to img1, for your second effect, img 2 for your third, etc.