Ph.Creative is a full service design and communications agency specialising in web design, SEO, internet marketing and branding.

Liverpool

London

Manchester

New York

Call us on +44(0)151 708 2280 or liverpool@ph-creative.com

Call us on +44(0)20 3301 4503 or london@ph-creative.com

Call us on +44(0)161 880 0122 or manchester@ph-creative.com

Call us on (001) 646 340 1025 or newyork@ph-creative.com

JQuery - CSS Style Switch - Mouse Detection

by Jim Taylor 15 May 2009 at 12:09

Our latest projectEco Environments’ recently went live, which we’re really proud of. So much so, we thought we’d brag about it a little!

We decided to incorporate an energy saving concept by urging site users to turn off the light before they leave.

We added mouse detection to the site in the flash, so when the mouse cursor went above the top navigation towards the top of the browser, a warning sign appears.

For the actual light switch we used jQuery. Clicking the light switch switches the CSS Style Sheets, giving the impression the lights have been switched off. Highlighting only the data capture form for their latest email campaign.

You’ll also noticed the flash at the top also changes from day to night, with house lights flickering on and the sun changing to a moon.



Of course you can always switch the lights back on... if you’re afraid of the dark!

Currently rated 5.0 by 7 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

css | development | jquery | web design

Comments

Add comment


 

biuquote
  • Comment
  • Preview
Loading




 

Search

Recent Comments

Comment RSS

Our Latest Tweets

Office Music

Don't judge us by our tastes!

© Copyright Ph.Creative 2009. All rights reserved. Terms & Conditions | Privacy Policy | Sitemap (XML) | Log in

Website design by Ph.Creative

^