Как сделать простую мини-карту в 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); 
} 

Demohttp://jsfiddle.net/m3snq/3/ или http://jsfiddle.net/m3snq/6/

, если вы не понимаете, что-то просто спросить ..