the wrapper

dabblet.css

/*images from: 
http://www.ajax-zoom.com/examples/example15.php
*/

body { 
	margin: 0; 
	padding: 10px; 
	background: #222;
	color: white;
	text-align: center;
	font-family: sans-serif;
	}

/* the wrapper */
.g {
	width: 600px;     
	height: 400px;
	margin: 10px auto;
	position: relative; 
	overflow: hidden;
	}

.i {
	width: 100%;
	height: 100%;
	background: url('http://dl.dropbox.com/u/32750720/spen/goggle_sprite.jpg') top left no-repeat;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	}

/* the hoverboards */
.h {
	height: 400px;
	width: 25px;
	float: left;
	}

.h:nth-child(2):hover ~ .i {
	background-position: -600px 0;
	}

.h:nth-child(3):hover ~ .i {
	background-position: -1200px 0;
	}

.h:nth-child(4):hover ~ .i {
	background-position: -1800px 0;
	}

.h:nth-child(5):hover ~ .i {
	background-position: -2400px 0;
	}

.h:nth-child(6):hover ~ .i {
	background-position: -3000px 0;
	}

.h:nth-child(7):hover ~ .i {
	background-position: -3600px 0;
	}

.h:nth-child(8):hover ~ .i {
	background-position: -4200px 0;
	}

.h:nth-child(9):hover ~ .i {
	background-position: -4800px 0;
	}

.h:nth-child(10):hover ~ .i {
	background-position: -5400px 0;
	}

.h:nth-child(11):hover ~ .i {
	background-position: -6000px 0;
	}

.h:nth-child(12):hover ~ .i {
	background-position: -6600px 0;
	}

.h:nth-child(13):hover ~ .i {
	background-position: -7200px 0;
	}

.h:nth-child(14):hover ~ .i {
	background-position: -7800px 0;
	}

.h:nth-child(15):hover ~ .i {
	background-position: -8400px 0;
	}

.h:nth-child(16):hover ~ .i {
	background-position: -9000px 0;
	}

.h:nth-child(17):hover ~ .i {
	background-position: -9600px 0;
	}

.h:nth-child(18):hover ~ .i {
	background-position: -10200px 0;
	}

.h:nth-child(19):hover ~ .i {
	background-position: -10800px 0;
	}

.h:nth-child(20):hover ~ .i {
	background-position: -11400px 0;
	}

.h:nth-child(21):hover ~ .i {
	background-position: -12000px 0;
	}

.h:nth-child(22):hover ~ .i {
	background-position: -12600px 0;
	}

.h:nth-child(23):hover ~ .i {
	background-position: -13200px 0;
	}

.h:nth-child(24):hover ~ .i {
	background-position: -13800px 0;
	}

dabblet.html

Slide mouse over the image horizontally to spin it:

<div class="g">
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div> 
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    <div class="h"></div>
    
    <div class="i"></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}