Bir ara geliştirmekte olduğum bir browser oyun için yaptığım bir minimap lı haritayı paylaşmak istedim.
Minimapım mantığı şu.Öncelikle mouse ile tıkladığında browserın büyüklüğünü alıp ana kısmın nerde durduğunu buluyoruz.Daha sonra Mousenın mini map üzerinde olup olmadığını buluyorum.Üzeinde ise minimapın köşesini 0 olacak şekilde mouse koordinatında çıkarıp çıkan sonucu 10 la çarpıyoz.Çarpanın sebebi büyük olan map küçüğün 10 katı olmasıdır.
Haritada scroll oynatıldığında bu sefer scrollun pozisyonunu alıp 10 a bölüyoruz mini maptaki pozisyonunu buluyoruz.
İndir : http://ustaderslik.com/dosya/harita.rar
Görüntüsü :
Kodlar :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AnaSayfa</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".yresim").hide();
$(".navigasyon").live("mouseup",function(m){
var x=m.pageX;
var y=m.pageY;
var wg=($(document).width()-750)/2;
var sonuc=x-(wg+37);
var xsonuc=(sonuc*10)-250;
y-=25;
var ysonuc=(y*10)-250;
$(".nbuton").css({
"left":sonuc-15,"top":y-15
});
$(".harita").scrollLeft(xsonuc);
$(".harita").scrollTop(ysonuc);
});
$(".harita").scroll(function(){
var top=$(this).scrollTop()/10;
var left=$(this).scrollLeft()/10;
$(".nbuton").css({
"left":left+10,"top":top+10
});
});
$("#yol").click(function(){
$(".yresim").stop().toggle(500);
})
});
</script>
<style type="text/css">
body{color:#fff;font-size:18px;margin:auto;background-color:#383c51;font-family:"Comic Sans MS";color:#000;}
::-webkit-scrollbar {width: 20px;}
::-webkit-scrollbar-track {background: #f1f1f1; }
::-webkit-scrollbar-thumb {background: #f5b900;border-radius: 7px;-webkit-border-radius: 7px;-moz-border-radius: 7px;box-shadow:0px 0px 3px #000;-moz-box-shadow:0px 0px 3px #000;-webkit-box-shadow:0px 0px 3px #000;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {height: 20px;display: block;background-color: #f5b900;}
.ana{width:750px;height:575px;background-color:#383c51;margin:auto;box-shadow:0px 0px 25px #f1f1f1;}
.harita{width:500px;height:500px;float:left;overflow:auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;position:relative; }
.hresim{width:1750px;height:1750px;background-image:url("harita.jpg");position:absolute;left:0px;top:0px;z-index:10;}
.yresim{width:1750px;height:1750px;background-image:url("yol.png");position:absolute;left:0px;top:0px;z-index:11;}
.naviana{width:250px;height:175px;background-color:#383c51;}
.navigasyon{width:175px;height:175px;background-image:url("navigasyon.jpg");margin:auto;position:relative;cursor:pointer;}
.nbuton{width:30px;height:30px;background-color:#f1f1f1;border:1px solid #333;position:absolute;top:0px;left:0px;opacity:.5}
.islem{width:250px;height:500px;background-color:#f1f1f1;float:left;}
.ibaslik{width:250px;height:25px;background-color:#f1f1f1;text-align:center;font-weight:bold;font-size:18px;}
.ibaslik2{width:250px;height:75px;background-color:#f1f1f1;text-align:center;font-weight:bold;font-size:18px;float:left;padding:25px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.islemler{width:250px;height:275px;background-color:#383c51;overflow:auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;color:#f1f1f1;font-size:18px;}
.buton{width:125px;height:30px;text-align:center;color:#383c51;font-size:17px;margin-top:5px;margin-left:5px;background-color:#f5b900;border:1px solid #f1f1f1;font-weight:bold;transition:color .5s;-webkit-transition:color .5s;-moz-transition:color .5s;border-radius:5px;font-family:"Comic Sans MS"; }
.buton:hover{color:#f1f1f1;cursor:pointer;}
.aciklama{width:500px;height:75px;float:left;color:#fff;}
.temiz{clear:both;}
</style>
</head>
<body>
<div class="ana">
<div class="islem">
<div class="ibaslik" style="background-color:#f5b900;">Dünya Haritası</div>
<div class="naviana">
<div class="navigasyon" id="navigasyon">
<div class="nbuton"></div>
</div>
</div>
<div class="ibaslik">İşlemler:</div>
<div class="islemler">
<button class="buton" id="yol">Deniz Yolları</button>
</div>
</div>
<div class="harita">
<div class="hresim"></div>
<div class="yresim"></div>
</div>
<div class="ibaslik2">Açıklama:</div>
<div class="aciklama">Dünya haritasına hoşgeldiniz.burdan seyehat edebilir veya yakındaki birlikleri gemileri ... görebilirsiz.</div>
<div class="temiz"></div>
</div>
</body>
</html>