Tworzenie nakładki siatki na obrazie

Zrobiłem skrypt (używając biblioteki mootools), który ma nakładać obraz z siatką tabeli, a gdy każda komórka siatki zostanie kliknięta/przeciągnięta na jej tle zmienia "podświetlenie" komórki.Tworzenie nakładki siatki na obrazie

Aktualny kod tworzy tabelę i umieszcza ją nad elementem (el, obraz w tym przypadku). Tabela była używana, ponieważ planuję później dodać narzędzie wyboru prostokąta i najprościej było to zrobić.

<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="mootools.js"></script> 
    <script type="text/javascript"> 
    var SetGrid = function(el, sz, nr, nc){ 

      //get number of rows/columns according to the 'grid' size 
      numcols = el.getSize().x/sz; 
      numrows = el.getSize().y/sz; 
      //create table element for injecting cols/rows 
      var gridTable = new Element('table', { 
       'id' : 'gridTable', 
       'styles' : { 
        'width' : el.getSize().x, 
        'height' : el.getSize().y, 
        'top' : el.getCoordinates().top, 
        'left' : el.getCoordinates().left 
       } 
      }); 

      //inject rows/cols into gridTable 
      for (row = 1; row<=numrows; row++){ 
       thisRow = new Element('tr', { 
        'id' : row, 
        'class' : 'gridRow' 
       }); 
       for(col = 1; col<=numcols; col++){ 
        thisCol = new Element('td', { 
         'id' : col, 
         'class' : 'gridCol0' 
        }); 

        //each cell gets down/up over event... down starts dragging|up stops|over draws area if down was fired 
        thisCol.addEvents({ 
         'mousedown' : function(){ 
          dragFlag = true; 
          startRow = this.getParent().get('id'); 
          startCol = this.get('id'); 
         }, 
         'mouseup' : function(){ 
          dragFlag = false; 
         }, 
         'mouseover' : function(){ 
          if (dragFlag==true){ 
           this.set('class', 'gridCol'+$$('#lvlSelect .on').get('value')); 
          } 
         }, 
         'click' : function(){ 
          //this.set('class', 'gridCol'+$$('#lvlSelect .on').get('id').substr(3, 1)); 
          str = $$('#lvlSelect .on').get('id'); 
          alert(str.substr(2, 3)); 
         } 
        }); 
        thisCol.inject(thisRow, 'bottom'); 
       }; 
       thisRow.inject(gridTable, 'bottom'); 
      }; 
      gridTable.inject(el.getParent()); 
    } 

    //sens level selector func 
    var SetSensitivitySelector = function(el, sz, nr, nc){ 
     $$('#lvlSelect ul li').each(function(el){ 
      el.addEvents({ 
       'click' : function(){ 
        $$('#lvlSelect ul li').set('class', ''); 
        this.set('class', 'on'); 
       }, 
       'mouseover' : function(){ 
        el.setStyle('cursor','pointer'); 
       }, 
       'mouseout' : function(){ 
        el.setStyle('cursor',''); 
       } 
      }); 
     }); 
    } 

    //execute 
    window.addEvent('load', function(){ 
     SetGrid($('imagetomap'), 32); 
     SetSensitivitySelector(); 
    }); 


    </script> 
    <style> 
     #imagetomapdiv { float:left; display: block; } 
     #gridTable { border:1px solid red; border-collapse:collapse; position:absolute; z-index:5; } 
     #gridTable td { opacity:0.2; filter:alpha(opacity=20); } 
     #gridTable .gridCol0 { border:1px solid gray; background-color: none; } 
     #gridTable .gridCol1 { border:1px solid gray; background-color: green; } 
     #gridTable .gridCol2 { border:1px solid gray; background-color: blue; } 
     #gridTable .gridCol3 { border:1px solid gray; background-color: yellow; } 
     #gridTable .gridCol4 { border:1px solid gray; background-color: orange; } 
     #gridTable .gridCol5 { border:1px solid gray; background-color: red; } 
     #lvlSelect ul {float: left; display:block; position:relative; margin-left: 20px; padding: 10px; } 
     #lvlSelect ul li { width:40px; text-align:center; display:block; border:1px solid black; position:relative; padding: 10px; list-style:none; opacity:0.2; filter:alpha(opacity=20); } 
     #lvlSelect ul li.on { opacity:1; filter:alpha(opacity=100); } 
     #lvlSelect ul #li0 { background-color: none; } 
     #lvlSelect ul #li1 { background-color: green; } 
     #lvlSelect ul #li2 { background-color: blue; } 
     #lvlSelect ul #li3 { background-color: yellow; } 
     #lvlSelect ul #li4 { background-color: orange; } 
     #lvlSelect ul #li5 { background-color: red; } 
    </style> 
</head> 

<body> 
    <div id="imagetomapdiv"> 
     <img id="imagetomap" src="1.png"> 

    </div> 
    <div id="lvlSelect"> 
     <ul> 
      <li value="0" id="li0">0</li> 
      <li value="1" id="li1">1</li> 
      <li value="2" id="li2">2</li> 
      <li value="3" id="li3">3</li> 
      <li value="4" id="li4">4</li> 
      <li value="5" id="li5" class="on">5</li> 
     </ul> 
    </div> 
</body> 
</html>

Istnieją dwa problemy: podczas gdy to działa dobrze w FF, IE i Chrome nie utworzyć tabelę, jeśli strona jest odświeżana. Jeśli wrócisz do katalogu root i klikniesz link do pliku pojawi się tabela siatki, jeśli naciśniesz przycisk "odśwież" - skrypt zostanie uruchomiony, ale tabela nie zostanie wstrzyknięta.

Po drugie, chociaż HTML tabeli jest wstrzykiwany w IE, to go nie wyświetla. Próbowałem dodać nbsp, aby upewnić się, że nie zostanie zignorowany - bezskutecznie.

Wszelkie sugestie dotyczące ulepszania kodu lub pomocy w rozwiązywaniu problemów są mile widziane.

Dzięki!

Źródło

2010-06-17 user355922

Spróbuj dodać DOCTYPE dec na górę strony IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Źródło

2010-06-17 17:54:46 edl

Dziękujemy, że działa! IE nadal nie uruchamia wydarzeń regularnie "onmouseover", ale jest to coś, z czym mogę żyć. Dzięki jeszcze raz! – user355922

nie używaj 'mouseover' /' mouseout'. zamiast tego używaj naprawionych (propagacji zdarzeń/delegacji) 'mouseenter' /' mouseleave'. możesz nawet użyć przekaźnika, np. 'LvlSelect.addEvent (" mouseover: relay (li) ")', aby zachować czystość (jak jquery .live) –

Tworzenie nakładki siatki na obrazie

Odpowiedz

Powiązane problemy