如何在html中制作简单的迷你地图

Question

基本上，我想尝试用HTML制作一个简单的迷你地图，但我想不出来。

有人能给我一个样本吗？

只有两个图片是相同的，但不同的大小。一个是小的，另一个是大的，如果你点击小图像的任何坐标，大图像显示你点击的地方。

我仍然是HTML的新手，我想学习更多，只需要一个示例，这样我就可以分析如何制作它。

Answer 1

就像我说的，创建一个图像，找到鼠标在图像上的坐标。

创建一个具有相同图像的div并设置背景位置。

用图像替换YOURMAP。

var img,w,h,mu=true,map,MAP='YOURMAP';
function pos(e){
 var x=e.pageX-img.offsetLeft,y=e.pageY-img.offsetTop,
 left=((w/img.width*x)-(map.offsetWidth/2))*-1,
 top=((h/img.height*y)-(map.offsetHeight/2))*-1;
 map.style['background-position']=left+'px '+top+'px';
}
window.onload=function(){
 img=document.createElement('img');
 img.onload=function(){
  w=this.width;h=this.height;
  img.style.width='200px';
 }
 img.src=MAP;

 map=document.createElement('div');
 map.style.background='#000 url('+MAP+') no-repeat 0 0';
 map.style.width='200px';
 map.style.height='200px';

 document.body.appendChild(img);
 document.body.appendChild(map);

 img.addEventListener('mousedown',function(e){
  mu=false;pos(e);e.preventDefault()
 },false);
 img.addEventListener('mousemove',function(e){
  mu||pos(e)
 },false);
 img.addEventListener('mouseup',function(e){
  mu=true
 },false);
}

Demo http://jsfiddle.net/m3snq/3/或http://jsfiddle.net/m3snq/6/

如果你不明白什么就问..。