Wednesday, 23 May 2012

Chorlton // Open & Closed

As I continue to do a little more research for my Digital Chorlton project i've decided to add an additional element to the website: As users hover over the shops they can see the shop in it's closed state.

To do this i'm going to create each shop as a sprite PNG file and use CSS to switch it's current state. This not only speeds up the loading of the page but also removes and "flicker" as the rollover image gets loaded.

Here's how Dulcimer will look:

Dulcimer

To achieve this I will ise the following code:

.dulcimer {background: url(http://i.chorlton.me/dulcimer.png) 0 -145px;}
.dulcimer:hover {background: url(http://i.chorlton.me/dulcimer.png) 0 0;}

Now if I can make this happen automatically when night time falls that would be fantastic. Or, taking it further, have the shops open and close in real time.

Time to figure out how to do this methinks...