Place the image onto the webpage and incorporate an image map. Feel free to customize any cell that triggers an event. As a demonstration, I recorded the coordinates - top-left pair and bottom-right pair - for cells clicked on.
You have the option to switch out click events for mouseover or mouseout events. By reducing the cell dimensions to 1px, you can precisely track the mouse's position as it moves across the image...just be cautious of potential event overload.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"">
// shortcut reference
function locate(eId) {return document.getElementById(eId);};
// incorporate area elements into an existing image map
function createMapGrid(imageId, gridId, cellHeight, cellWidth) {
var imgH = locate(imageId).height;
var imgW = locate(imageId).width;
var lastJ = Math.floor(imgW/cellWidth);
var lastI = Math.floor(imgH/cellHeight);
var gridContent = '';
for (var i = 0; i < lastI; i++) {
for (var j = 0; j < lastJ; j++) {
var coords= (cellWidth*j) + ',' + (cellHeight*i) + ',' +(cellWidth*(j+1) + ',' + (cellHeight*(i + 1)));
gridContent += '<area onclick="recordCoords(this);" shape="rect" coords="' + coords + '">';
}
}
locate('gridElements').innerHTML = gridContent;
};
function recordCoords(cRef) {
console.log(cRef.coords);
};
window.onload = function() {
// create an image map on the image with id='mapImage', add the
// area elements to the map with id="gridElements"; each cell is 16x16
createMapGrid('mapImage', 'gridElements', 16, 16);
};
</script>
</head>
<body>
<div>
<img src="yourPanoramicImage.jpg" alt="a panorama measuring 1024x668"
width="1024" height="668" usemap="#areas" id="mapImage"
/>
<map name="areas" id="gridElements"></map>
</div>
</body>
</html>
Considerations...it might be more efficient to generate each area element separately within the inner loop and attach it to its parent map instead of constructing the entire HTML string at once. Also, browsers may not handle 1px areas well, especially for larger images like 1024x668 which would require 684,032 area tags. In my example, 64x41 translated to 2624 area tags.