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

Question

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

有人可以给我一个样品吗？

只有 2 张相同但大小不同的图像。一个小一个大，点击小图任意坐标，大图显示点击的位置。

我还是 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);
}

演示 http://jsfiddle.net/m3snq/3/或http://jsfiddle.net/m3snq/6/

如果你不明白的东西只是问..