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.

Tip - The Small Things

Even BIG professional web designers miss some basic things in Google site powered professional  website.
Some of them are:

1. Favicon:   Making a favicon and upload in Google sites is very simple. That gives you the personalised look.  That’s not very tough, right?... Go to favicon.cc and just make one favicon and upload it in Google site's attachments. (Ha ha, I know, most of them are aware of it, but even they are not doing it.).
2. Site header/ Background/ Wrapper images:   Some plain Background images are always not necessary too BIG, like this.

 

           You can make a header like this, instead of above.

    

  and make it repeat horizontally.   So we can reduce the size, and web page will load faster.

3. Logo:   It’s always nice to put a logo in separately uploaded as logo ( Site layout> Height: Use theme default (change logo)). So that, It’ll clickable to homepage. You can make a .png image with background as transparent.

 
See the sample site.

New Google Sites Updates - More Button & Pop-up

More Button
Just a simple change of user experience. The More Button, as we all called it, is now a more commonly seen gear or cog icon. Therefore it gives the impression of Global Settings.

Pop-up Disclaimer
You've probably seen this initial website load-up shadow boxes. Well now Google Sites has one. Right now it is text only and is optional.

There you go, just two quick updates that I've seen come through. Is this a weekly thing now? Thanks Google Sites team.

Google Sites Survey Available!

Google is now accepting surveys for Google Sites. If you log in to http://sites.google.com, in bold red font in the upper right of the browser it says "New - Take our Survey." This survey is specifically for Google Sites and contains some wonderful response fields for feedback related to most aspects of using Google Sites, including appearance.

Take the Survey - Grade Google Sites

Google Sites designers, please take your time to submit this quick survey - it even contains paragraph fields for what you like and don't like about Google Sites (I wrote a lot, believe me). I suggested Javascript support, mouse-over image support, Slider/Slide Deck support, Column Width customization, and more.

What will you write? What do you love/hate about Google Sites. Comments encouraged! Thanks folks.

Google Sites Server Issues

I don't want this to sound like a really serious issue, but this is the best way I could word it. So, what's the scoop?

The Issue
Google Sites have been acting unreliable since 3/21 when images weren't loading from Google's servers. This affects everything from slideshows to the picture of your cat on your family website. Images are randomly showing up and disappearing with every refresh. It kind of a here and there bug, but it's annoying.

The Solution
Hope that this is some sort of internal update and will go away soon. =)

Conclusion
Just want to keep all you Google Sites fanboys updated.  Here's the Google Sites Help Forum thread: http://productforums.google.com/forum/#!category-topic/sites/E39Hd9YbkDI

Survey Available Now

Google Sites is taking user feedback via a survey right now. If you are logged into a Google Site you will see it in the tool bar next to edit page, create page, and more. I've seen it both on standard Google accounts and Google Apps for Business accounts.

Take your time and let the Google Docs, that is the Sites team as well, let them know your thoughts.

Thanks. It's always great to see Google Sites steered in a good direction from user input.

New Template and Navigation Tip

 Apple has released their Ipad 2, it is a beautiful tablet with power and intuitive design. So I spent a lot of time of Apple's website. Beautifully simple, that's how I would describe it. Something attainable with Google Sites. Many GS websites are simple too, but not so polished.

The Template
I made this website from scratch. Nothing, including the nice tablet graphic is stolen, merely modeled. And I do not want to get in trouble so it is a software company draft.

Please visit and enjoy. Google Sites, beautifully clean design.

The "tablet" graphic is custom made with inkscape. I plan on making a video tutorial for this as it is easy enough for beginners and looks quite nice. I have already used it on my homepage for Kirksville Web Design.

I tried my best to create a sophisticated, not cheesy-looking, glassy navigation bar graphic.  The graphic is part of the "wrapper background," nothing special. One thing I am particular sad about is the inability to insert an image and set that image to the background. So, graphics with text, as featured in the software company template, are really just graphics - you can't highlight and copy it (which would be nice for SEO). This is on my Google Sites wish list, which is way past-due.

Space Out Your Horizontal Navigation Links
I most often use links, as featured in this template, for my style of the horizontal navigation. Links, as opposed to boxes and tabs, do no have a pre-determined image - just text - so you can easily create the look yourself.

Anyways, the tip, create a url ink while in Manage Site>Site Layout>Horizontal Navigation. Instead of giving text in the field for a title, insert any amount of spaces. Now, it will not allow you to create the "link" without inserting a email or web address, so put something in there (it doesn't matter what it is). Now you have spaced out navigation (I put five spaces in between each of the links of this template).