Witam

Do szkoły mam zadanie i nie potrafię poprawnie go wykonać. Ma to być stronka o mojej miejscowości. Wszystko jest niby ok, ale profesor chce, żebym zrobił mapkę, którą można przesuwać - podobna do tej google, ale nie ma potrzeby aż tak rozbudowywać. Potrzebuję załadować obrazek w wybrane miejsce o wielkości 200x200, a obrazek mapki jest oczywiście większy i można go przesuwać myszką. Potrzebne jest też powiększanie (zoom) no i najlepiej jak mapka będzie zapętlona, tak, jakby to było na globusie, że przesuwając ją myszką w lewą stronę w końcu wróci się w to samo miejsce. Nie jestem pewien jak tego dokonać całkowicie.

korzystałem z pomocy następujących stron głównie:
- http://forum.php.pl/index.php?showtopic=109304
- http://www.dunnbypaul.net/js_mouse/

ale niestety zrobiłem tylko tyle:
css:
Kod
#mapa {
    overflow:hidden;
    height:200px;
    width:200px;
    position:absolute;
    left: 20px;
    top: 20px;
}

#obrazek {
    position:relative;
}


html:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script language="javascript" type="text/javascript" src="google.js"></script>
  4. <link rel="Stylesheet" type="text/css" href="css.css" />
  5. </head>
  6. <body onload="init();">
  7. <div id="mapa">
  8. <div id="obrazek">
  9. <table width="100%" height="100%" border="2">
  10.   <tr>
  11.     <td>
  12. <img src="image.jpg" onMouseDown="grab(this)">
  13. </td>
  14.   </tr>
  15. </table>
  16. </div>
  17. </div>
  18. </body>
  19. </html> 
[HTML] pobierz, plaintext


JS znaleziony na stronce
Kod
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;

var dragobj = null;

function falsefunc() { return false; } // used to block cascading events

function init()
{
  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();
}

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  {
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}

function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)

  document.getElementById('span_browser').innerHTML = navigator.appName;
  document.getElementById('span_winevent').innerHTML = window.event ? window.event.type : '(na)';
  document.getElementById('span_autevent').innerHTML = e ? e.type : '(na)';
  document.getElementById('span_mousex').innerHTML = mousex;
  document.getElementById('span_mousey').innerHTML = mousey;
  document.getElementById('span_grabx').innerHTML = grabx;
  document.getElementById('span_graby').innerHTML = graby;
  document.getElementById('span_orix').innerHTML = orix;
  document.getElementById('span_oriy').innerHTML = oriy;
  document.getElementById('span_elex').innerHTML = elex;
  document.getElementById('span_eley').innerHTML = eley;
  document.getElementById('span_algor').innerHTML = algor;
  document.getElementById('span_dragobj').innerHTML = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
}

function grab(context)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  dragobj.style.zIndex = 10; // move it to the top
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  elex = orix = dragobj.offsetLeft;
  eley = oriy = dragobj.offsetTop;
  update();
}

function drag(e) // parameter passing is important for NS family
{
  if (dragobj)
  {
    elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);
    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
  }
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}

function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS
}


jest jeszcze lista parametrów do kodu HTML, takich jak pozycja myszki:
Kod
<table width="200" border="1">
    <tr><td class="th0">parameter</td><td class="th1"> value </td></tr>
    <tr><td class="td0">navigator.appName =</td><td class="td1"><span id="span_browser"> </span></td></tr>
    <tr><td class="td0">window.event =</td><td class="td1"><span id="span_winevent"> </span></td></tr>
    <tr><td class="td0">auto event =</td><td class="td1"><span id="span_autevent"> </span></td></tr>
    <tr><td class="td0">algorithm =</td><td class="td1"><span id="span_algor"> </span></td></tr>
    <tr><td class="td0">dragobj =</td><td class="td1"><span id="span_dragobj"> </span></td></tr>
    <tr><td class="td0">mousex,y =</td><td class="td1"><span id="span_mousex"> </span>, <span id="span_mousey"> </span></td></tr>
    <tr><td class="td0">grabx,y =</td><td class="td1"><span id="span_grabx"> </span>, <span id="span_graby"> </span></td></tr>
    <tr><td class="td0">orix,y =</td><td class="td1"><span id="span_orix"> </span>, <span id="span_oriy"> </span></td></tr>
    <tr><td class="td0">elex,y =</td><td class="td1"><span id="span_elex"> </span>, <span id="span_eley"> </span></td></tr>
  </table>


i w tym momencie mogę przesuwać sobie obrazek myszka,ale
- bez tej listy parametrów w kodzie HTML, stronka jakoś dziwnie się zachowuje, ciężko mi to określić,ale jak nie ma tego to nie działa prawidłowo
- jak jest ten spis parametrów, to prawidłowo jest do pewnego stopnia - po przesunięciu obrazka myszka, nie można zaznaczać tekstu na stronie żadnego, jakby się coś blokowało i trzeba przeładować stronę, wiec raczej tez nie działa prawidłowo
- no i dalej nie wiem jak dodać zoom, wstawić to ładnie w ramkę, czy coś, albo zmienić kursor,ale to już raczej detale, które poszukam sobie później, bo bez sprawnej mapki nic mi nie pomogą.

To oczywiście jest dla mnie praca dodatkowa do szkoły, ale bardzo chciałbym ją zrobić.
Proszę o pomoc w tej sprawie, jeśli ktoś by mógł.