HTML: CSS: #pan{ position:relative; width:720px; height:250px; margin:90px auto; } #wrapper { background: url("cit1.jpg") repeat-x 0 0; width:100%; height:100%; position:absolute; top:0; left:0; -khtml-border-radius: 18px; -o-border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } #mask,#mask .bac,#mask .logo{ position:absolute; top:0; left:0; width:100%; height:40px; z-index:2; } #mask .bac,#mask .logo{ position:absolute; top:0; left:0; background:white; } #mask .logo{ background:url("panorama/logo130is.png") no-repeat 20px 10px; } #mask .bac{ -webkit-opacity:.4; -o-opacity:.4; -khtml-opacity:.4; -moz-opacity:.4; opacity:.4; z-index:-1; } #mask .remote{ position:absolute; width:20px; height:20px; top:10px; right:15px; z-index:2; cursor:pointer; } #mask .stop{ background:url("pause.png") no-repeat; } #mask .play{ background:url("play.png") no-repeat; } Javascript: window.onload=init; function init(){ document.getElementById("mask").getElementsByTagName("div")[2] .onclick=function(){anim('',this)}; anim(); } var animace; function anim(pos,t){ var step = 20; var wrap = document.getElementById("wrapper"); if(t){ if(t.className=="remote stop"){ clearTimeout(animace); t.className="remote play"; return false; }else{ var position = (wrap.style.backgroundPosition.split(' ')); var horiz = (position[0].replace(/[^0-9.]*/g, '')); animace = setTimeout(function(){anim((horiz*1))}, step); t.className="remote stop"; return false; } } if(!pos)var pos = 0; wrap.style.backgroundPosition = "-"+pos+"px 0"; animace = setTimeout(function(){anim((pos+.5))}, step); } Javascript: window.onload=init; function init(){ document.getElementById("mask").getElementsByTagName("div")[2] .onclick=function(){anim('',this)}; anim(); } var animace; function anim(pos,t){ var step = 20; var wrap = document.getElementById("wrapper"); if(t){ if(t.className=="remote stop"){ clearTimeout(animace); t.className="remote play"; return false; }else{ var position = (wrap.style.backgroundPosition.split(' ')); var horiz = (position[0].replace(/[^0-9.]*/g, '')); animace = setTimeout(function(){anim((horiz*1))}, step); t.className="remote stop"; return false; } } if(!pos)var pos = 0; wrap.style.backgroundPosition = "-"+pos+"px 0"; animace = setTimeout(function(){anim((pos+.5))}, step); } http://www.internetove-sluzby.cz/examples/panorama.php