Resim üzerinde ızgara yerleşimi oluşturma

Tablo ızgarası olan bir görüntünün üst üste bindirilmesi gereken ve her ızgara hücresinin arka plan rengi üzerinde tıklandığında/sürüklendiğinde hücreyi 'vurgulayan' bir komut dosyası (mootools kitaplığı kullanarak) yaptım.Resim üzerinde ızgara yerleşimi oluşturma

Geçerli kod bir tablo oluşturur ve bunu elemanın üzerine yerleştirir (bu durumda, el, resim). Daha sonra dikdörtgen seçim aracı eklemeyi planladığım için tablo kullanıldı ve bunu yapmanın en kolay yolu görünüyordu.

<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>

iki sorun vardır: o FF gayet güzel çalışıyor iken sayfa yenilendiğinde ise, IE ve Chrome tablo oluşturmak gerekmez. Eğer dizin köküne geri dönerseniz ve dosyaya olan linke tıklarsanız, grid tablosu görüntülenir, 'refresh' düğmesine basarsanız - betik çalışır ancak tabloya enjekte edilmez.

İkinci olarak, tablo HTML'si IE'ye enjekte edilmesine rağmen, onu göstermez. Nbsp'leri göz ardı edilmemesini sağlamak için eklemeyi denedim - boşuna.

Kodları iyileştirme veya sorunlara ilişkin yardım önerileri takdir edilmektedir.

Teşekkürler! Sayfanın IE üst kısmında bir DOCTYPE Aralık ekleyerek

kaynak

2010-06-17 user355922

Dene:

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

kaynak

2010-06-17 17:54:46 edl

Çok teşekkürler, bu çalıştı! IE hala düzenli olarak 'onmouseover' olaylarını ateşlemiyor ama yaşayabileceğim bir şey. Tekrar teşekkürler! – user355922

, 'mouseover' /' mouseout' kullanmayın. Bunun yerine sabit (olay kabarcıklandırma/yetkilendirme sorunları) 'mouseenter' /' mouseleave' kullanın. Hatta temiz tutmak için (jquery .live gibi) 'lvlSelect.addEvent (" mouseover: relay (li) ")' gibi geçişi kullanabilirsiniz. –

Resim üzerinde ızgara yerleşimi oluşturma

cevap

İlgili konular