zoom obrazka Opcje

[kehator]

Witam

Mam za zadanie do szkoly stworzyc cos ala sklep internetowy. Szukam dlugo po calym necie, ale nie moge znalezc czegos co by mi pomoglo napisac pewien skrypt. Skrypt ten ma za zadanie wyswietlic miniaturke obrazka i obok w duzym okienku na tej samej stronie wyswietlic jego powiekszony wybrany fragment. Klikajac na jakas czesc obrazka wyswietla sie jego powiekszona czesc. To przypomina troche minimapke, ale szukajac czegos takiego jak minimapka tez nie moglem znalezc pomocy.

Prosze o jakies nakierowanie na ten temat, ewentualnie pomoc w napisaniu skryptu.

Jedyne co znalazlem to cos takiego:

Kod

var zzz;

function zoom_start(event,id,gr_id,img)
{
   var grafika_zoom = img;//adres grafiki powiekszonej
   var grafa = document.getElementById(gr_id);//podstawowa grafika
   var szerokosc = grafa.width;//szerokosc grafiki podstawowej
       var wysokosc = grafa.height;// wysokosc grafiki podstawowej
   var x,y;//wspolrzedne kursora na danej grafice
   var lewo, gora;//wspolrzedne dla elementu lupa/podglad

   if(!event.pageX)//dla IE
   {
      x = event.clientX+document.body.scrollLeft+1.;
      y = event.clientY+document.body.scrollTop+1;
      lewo = event.clientX+document.body.scrollLeft;
      gora = event.clientY+document.body.scrollTop;
   }
   else
   {
      x = event.pageX;
      y = event.pageY;
      lewo = x;
      gora = y;
   }

   x = x-grafa.offsetLeft-23;
   y = y-grafa.offsetTop-23;

   var lupa = id.getElementsByTagName('span')[0];//ustawienia dla elementu lupa
      lupa.style.display = "inline";
      lupa.style.left = lewo-24+"px";
      lupa.style.top = gora-24+"px";
  
   var podglad = id.getElementsByTagName('span')[1];//ustawienia dla elementu podglad
           podglad.style.display = "inline";
           podglad.style.left = 0;
           podglad.style.top = 0;
      
   var pic=new Image(szerokosc*4,wysokosc*4);//ladowanie powiekszonego obrazka
      pic.src= grafika_zoom;
  
   if(!pic.complete)//jezeli powiekszona grafika jest jeszcze niezaladowana
   {
      window.clearTimeout(zzz);
      zoom_ladowanie(pic,id,grafika_zoom,szerokosc,wysokosc,y,x);
   }
   else
      podglad.innerHTML = '<img src="'+grafika_zoom+'" style="width:'+szerokosc*3+'px;height:'+wysokosc*3+'px;position:relative;top:-'+((y*3)+58)+'px;left:-'+((x*3)+58)+'px;margin:58px 0 0 58px;">';


   if((x+23)<0 || (y+23)<0 || (x+23)>szerokosc || (y+23)>wysokosc)//przekroczenie kursorem granic obrazka podstawowego
   zoom_stop();
}

function zoom_ladowanie(pic,id,grafika_zoom,szerokosc,wysokosc,y,x)
{
   if(!pic.complete)
   {
           id.getElementsByTagName('span')[1].innerHTML = "<p style=\"margin:10px;\">Ladowanie ...</p>";//info wyswietlane podczas ladowania powiekszenia
      zzz = window.setTimeout(function() {zoom_ladowanie(pic,id,grafika_zoom,szerokosc,wysokosc,y,x);},10);
        }
        else
      id.getElementsByTagName('span')[1].innerHTML = '<img src="'+grafika_zoom+'" style="width:'+szerokosc*3+'px;height:'+wysokosc*3+'px;position:relative;top:-'+((y*3)+58)+'px;left:-'+((x*3)+58)+'px;margin:58px 0 0 58px;">';
}

function zoom_stop()
{
        var elementy = getElementsByClass('zoom');//wyszukiwanie elementow z class=zoom
        for (var i=0;i<elementy.length;i++)
        {
            elementy[i].getElementsByTagName('span')[0].style.display = "none";
            elementy[i].getElementsByTagName('span')[1].style.display = "none";
        }
}

function getElementsByClass(searchClass,node,tag)
{
        var classElements = new Array();
        if (node == null)
            node = document.getElementsByTagName("body")[0];
        if (tag == null)
            tag = 'div';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        var j = 0;
        for (i = 0; i < elsLen; i++) {
            if (pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
}

ale niestety potrzebuje przerobic go tak,aby zoom byl wyswietlany obok o stalej pozycji i zeby bylo powiekszenie wybranego elementy na miniobrazku. kombinuje z funkcja onmousedown, ale nie wychodzi

[maxxxta]

Hej,

małe pytanie. Z jakiegoś konkretnego powodu zacząłeś to pisać w czystym JS (performance?). Druga sprawa chcesz zmieniać poziom zoom-a? czy działanie ma być zawsze na zasadzie pokazanie powiększonej części i tyle? No ostatnia sprawa powiększenie chcesz robić po stornie serwera (dobrze ) czy przeglądarki (źle ).