기본적으로 HTML로 간단한 미니 맵을 만들어보고 싶은데 알아낼 수가 없습니다.
누군가 나에게 샘플을 줄 수 있습니까?
동일하지만 크기가 다른 이미지 2 개만 있습니다. 하나는 작고 다른 하나는 큽니다. 그리고 작은 이미지의 좌표를 클릭하면 클릭 한 큰 이미지가 표시됩니다.
저는 아직 HTML에 익숙하지 않고 더 많은 것을 배우고 싶습니다. 만드는 방법을 분석 할 수 있도록 샘플이 필요합니다.
내가 말한 것처럼 이미지를 만들고 그 이미지에서 마우스 좌표를 찾으십시오.
동일한 이미지로 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/
이해가 안된다면 물어보세요 ..
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다