Thursday, March 31, 2011

Go, Do This! How To - The 'Mouse Over Image Change'

Hey, Beckystar here again from web princess :)

One of my favourite effects is the 'Mouse Over Image Change', like the example I have made on my home page, my web princess logo is turquoise on white, move your mouse pointer over it, now it's turquoise on black! - click here to see it.

(I apologise now for the lengthy links used in my code example, no doubt yours will be the same too!)

This is so easy to do . . . .

Click Edit page ► Insert ► More gadgets ► Search: Code Wrapper ► Select ► embed the code below, customise it, and remember to change the width and heights to the size of the images you use.

TIP - It's best to use two images roughly the same size!
TIP -To get the url of your images click More Actions ► Manage Site ► Attachments ► Click View on the images you want to use ► Copy the URL from the address bar of the pop up window displaying the image ► Repeat for image 2!

This is the code:

<style type="text/css">
.outer {width:245px; height:60px; background-image:url(http://746368688081817836-a-1802744773732722657-s-sites.googlegroups.com/site/webprincessgbbo00/Website-Designer-In-Boston-Lincolnshire-testimonials/final%20logo.jpg?attachauth=ANoY7crNBp06DjiBmK8kaRXZ5I6v391tSkpDfULC8Q6sThQ9b5J1ie_Hv1sxYFx5VhZQlicPQi1f0LAaTCRNwdRDYhHmtMdZZHk3TA9uNzCbj5cQV3zPLBzUCpj_KRu4NiLkve0MVA7LzGVTn0XQrudpzWzJA-9CymQ9goKDi_itm05TovIqIrCRaxJSyUWsjDEtMMiGI7dF1C8vSjGJNAf1VNeEh_jPaWjanazfTUwl9IkG-kKXd_7RyxfO7atEEP4WY-RY_H-ILYlG9a_bvAzjl69HvN1UiA%3D%3D&attredirects=0)}
.outer {display:block}
.outer img {width:100%; height:100%; border:0}
html>body .outer img {display:block}
.outer a:hover {visibility:visible}
.outer a:hover img {visibility:hidden}
</style>
<div class="outer"><a href="http://webprincess.co.uk/" target="_blank" title="I Love This Mouse Over Effect."><img src="http://746368688081817836-a-1802744773732722657-s-sites.googlegroups.com/site/webprincessgbbo00/home/untitled2.jpg?attachauth=ANoY7cpHPsL-PdUgPwr1WbiJJeqjO00EbbI6jeoBLE4F16-OM_0zVhq49NFfBIzrmwItcDixPMB9PdUj4s2uadJ6epta_hpTnbNU9fRN7y5q1al_RQn7wQovydgwm4yBgWwmSLe7kRJz5Gueokrr2VpPjzRygFTB7K6gTDyejfTCanbWMFxTJJUd2uUmGMT_sdSBEqr8xI0H4fj79w12urIHYc8Oi-MUwg%3D%3D&attredirects=0" width="245" height="60"></a></div>

Then just customise the gadget Display ► OK ► Save!

Let me know what you think, enjoy! Need SOme Help? Visit www.webprincess.co.uk/google-sites-help

Beckystar

PS Massive thanks to mori79 for the code which allowed me to share this amazing effect with you.



Related Posts Plugin for WordPress, Blogger...