Question

我试图将一个电网压在图像之上,然后能够让用户点击电网,并从用户点击的盒子中进行电网协调。我一直在从以下几个方面着手制定守则:

Creating a grid overlay over image. link text

这里是我迄今为止制定的法典:

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

  </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;
        numcols = 48;
        numrows = 32;
        //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();
 });

 var gridSize = { 
 x: 48, y: 32
};

var img = document.getElementById( imagetomap );
    img.onclick = function(e) {
   if (!e) e = window.event;
    alert(Math.floor(e.offsetX/ gridSize.x) +  ,   + Math.floor(e.offsetY /         
    gridSize.y));
 }

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

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

In this example the grid box changes color when the image is grid box is clicked, but I would like to be able to have the coordinates of the box. Any help would be great. Thank you

Answer 1

Mootools solution using a click handler on the added gridTable and calculating the position.

function SetGrid(el) {
  var size = el.getSize();
  var coord = el.getCoordinates();

  var gridTable = new Element( table , {
     id  :  gridTable ,
     styles  : {
       position :  absolute ,
         width  : size.x,
         height  : size.y,
         top  : coord.top,
         left  : coord.left
    }
  });

  var numcols = 48;
  var numrows = 32;
  var cellSize = {
    width: size.x / numcols,
    height: size.y / numrows
  }

  for (var row = 1; row<=numrows; row++){
      thisRow = new Element( tr , {
           id  : row,
           class  :  gridRow 
      });
      for(var col = 1; col<=numcols; col++){
          thisCol = new Element( td , {
               id  : col,
               title : row +   x   + col,
               class  :  gridCol0 
          });
          thisCol.inject(thisRow,  bottom );
      };
      thisRow.inject(gridTable,  bottom );
  }

  gridTable.addEvents({
    // Add the click event to the gridTable
    click: function(e) {
      // Do something with the grid position.
      alert(Math.floor((e.client.x - coord.left) / cellSize.width)
            +  ,   + Math.floor((e.client.y - coord.top)/ cellSize.height));
    }
  });

  gridTable.inject(el.getParent());
}

<JSBin demo:rel=“nofollow”>http://jsbin.com/ajava4/12

友情链接