console
window.onload = function() {
var oContent = document.getElementById('content');
var aDiv = document.getElementsByTagName('div');
var str = '';
for (var i = 0; i < 100; i++) {
str += '<div>' + '</div>';
}
oContent.innerHTML = str;
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
aDiv[(i * 10) + j].style.top = (i * 50) +i+ 'px';
aDiv[(i * 10) + j].style.left = j % 10 * 50 +j+ 'px';
aDiv[(i * 10) + j].style.backgroundPosition= -(j % 10 * 50 +j)+"px "+(-((i * 50) +i))+"px";
aDiv[(i * 10) + j].onmouseover=function(){
aDiv[(i * 10) + j].style.display='block';
}
}
}
}
<body>
<span id="content">
</body>
#content {
width: 510px;
height: 510px;
position: relative;
background: none;
display: block;
margin: 50 auto;
background: #f0f0f0;
}
div {
background: url(./img/pic.jpg) no-repeat;
position: absolute;
width: 50px;
height: 50px;
display: none;
}