thingy.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Meh!</title>
<style type="text/css">
div#albumcontainer {
position: relative;
color: #fff;
background-color: #ccc;
width: 900px;
height: 150px;
margin: 0 auto;
overflow: hidden;
}
div#albumcontainer img {
border: none;
}
div#albumlinks {
position: absolute;
clip: rect(0px 900px 100px 0px);
}
div#albumlinks div {
color: #fff;
background-color: #aaa;
float: left;
width: 50px;
height: 50px;
margin: 25px;
border: 1px solid #000;
}
div#albumcontainer div#albumleft {
position: absolute;
top: 100px;
left: 0;
width: 80px;
height: 25px;
text-align: center;
}
div#albumcontainer div#albumright {
position: absolute;
top: 100px;
right: 0;
width: 80px;
height: 25px;
text-align: center;
}
</style>
<script type="text/javascript">
var fxt = false;
var fxo = new Array;
var fxc = new Array('50', '56', '60', '66', '70', '76', '80', '86', '90');
var fxb = new Array('25', '22', '20', '17', '15', '12', '10', '7', '5');
var fxsc = 0;
var fxsm = 900;
var fxss = false;
var fxsd = false;
var fxsa = 15;
self.onload = intialize;
function intialize(){
var t = document.getElementById('albumlinks');
var l = t.getElementsByTagName('div');
fxsm = (l.length * 102);
t.style.width = fxsm + 'px';
for(var i = 0; i < l.length; i++){
l.item(i).onmouseover = function(){ fx(this, false); }
l.item(i).onmouseout = function(){ fx(this, true); }
l.item(i).setAttribute('id', 'fx' + i);
}
}
function fx(obj, dir){
var id = obj.getAttribute('id');
if(typeof(fxo[id]) == 'undefined'){
fxo[id] = new Object;
fxo[id].dir = true;
fxo[id].phs = 0;
}
fxo[id].dir = dir;
if(fxt === false){
fx_auto();
fxt = setInterval('fx_auto();', 30);
}
}
function fx_auto(){
var a = false;
for(var i in fxo){
if(fxo[i].phs >= 0 && fxo[i].phs < fxc.length){
if(fxo[i].dir === true){
fxo[i].phs = fxo[i].phs - 1;
if(fxo[i].phs < 0){
fxo[i].phs = 0;
}
if(fxo[i].phs != 0){
a = true;
}
}
else if(fxo[i].dir === false) {
fxo[i].phs = fxo[i].phs + 1;
if(fxo[i].phs >= fxc.lenght){
fxo[i].phs = (fxc.length - 1);
}
if(fxo[i].phs != (fxc.length - 1)){
a = true;
}
}
}
var t = document.getElementById(i);
var s = t.getElementsByTagName('img').item(0);
t.style.width = fxc[fxo[i].phs] + 'px';
t.style.height = fxc[fxo[i].phs] + 'px';
t.style.margin = fxb[fxo[i].phs] + 'px';
s.width = fxc[fxo[i].phs];
s.height = fxc[fxo[i].phs];
}
if(a === false){
clearInterval(fxt);
fxt = false;
}
}
function fxs(dir){
switch(dir){
case 'left':
fxsd = false;
if(fxss === false){
fxss = setInterval('fxs_scroll();', 30);
}
break;
case 'right':
fxsd = true;
if(fxss === false){
fxss = setInterval('fxs_scroll();', 30);
}
break;
case 'stop':
clearInterval(fxss);
fxss = false;
break;
}
}
function fxs_scroll(){
if(fxsd === false){
fxsc = fxsc + fxsa;
}
else {
fxsc = fxsc - fxsa;
}
if(fxsc <= 0){
fxsc = 0;
}
if(fxsc >= (fxsm - 900)){
fxsc = (fxsm - 900);
}
var t = document.getElementById('albumlinks');
t.style.clip = 'rect(0px ' + (900 + fxsc) + 'px 100px ' + fxsc + 'px)';
t.style.left = (fxsc * -1) + 'px';
}
</script>
</head>
<body>
<div id="albumcontainer">
<div id="albumlinks">
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
<div><a href="http://www.metallica.com/"><img src="thingy.png" width="50" height="50" /></a></div>
</div>
<div id="albumleft"><a href="#" onclick="return false;" onmouseover="fxs('right');" onmouseout="fxs('stop');"><--</a></div>
<div id="albumright"><a href="#" onclick="return false;" onmouseover="fxs('left');" onmouseout="fxs('stop');"">--></a></div>
</div>
</body>
</html>
