<!DOCTYPE HTML>
<html>
<head>
<title>Panorama</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">


$(document).ready(function(){


var armed = false; //If button is currently pressed
var previousPosition; //Previous position of the mouse
var position; //Current position of the mouse
var difpos; //Different between previous and current position of the mouse
var offset = 0;
var boxoffset;
var size = 3243;


var pan_selected = 0;


var pan_box = [
[[1,550,150],[1,250,250]],
[[0,200,200],[0,300,300]]
];


/* initial */
$('.panorama').css('background-image','url(\'' + pan_selected + '.jpg\')');


for(var i = 0; i < pan_box[pan_selected].length; i++)
{
$('#boxholder').append('<div class="box" id="'+i+'" style="left: ' + pan_box[pan_selected][i][1] + 'px; top: ' + pan_box[pan_selected][i][2] + 'px"></div>');
}
/***********/


$('.panorama').mousedown(function(){
armed = true;
});


$('.panorama').mouseup(function(){
armed = false;
previousPosition = undefined;
});


$('.panorama').mousemove(function(e){
if(armed)
{
position = e.pageX;
if(previousPosition === undefined)
{
previousPosition = position;
}


difpos = previousPosition - position;
offset += difpos;
previousPosition = position;


$('.panorama').css('background-position',offset);
$('#0').css('left',offset+550);
$('#1').css('left',offset);


}
});
});


</script>
<style type="text/css">
body {
margin: 0;
}


.panorama {
height: 500px;
background-size: auto 100%;
}


.box {
height: 50px;
width: 50px;
background-color: red;
position: absolute;
}


</style>
</head>
<body>


<div class="panorama">
<div id="boxholder"></div>
</div>


</body>
</html>