Realicé un script (usando la biblioteca mootools) que se supone que superpone una imagen con una cuadrícula de tabla y cuando cada celda de cuadrícula es presionada/arrastrada sobre su color de fondo cambia 'resaltando' la celda.Creación de una superposición de cuadrícula sobre imagen
El código actual crea una tabla y la coloca sobre el elemento (el, imagen en este caso). Se usó la tabla porque estoy planeando agregar la herramienta de selección de rectángulo más adelante, y me pareció la forma más fácil de hacerlo.
<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>
hay dos problemas: mientras funciona muy bien en FF, IE y Chrome no crean la mesa si se actualiza la página. Si vuelve a la raíz del directorio y hace clic en el enlace al archivo, se muestra la tabla de la cuadrícula, si presiona el botón "actualizar", la secuencia de comandos se ejecuta pero la tabla no se inyecta.
En segundo lugar, aunque el HTML de la tabla se ha inyectado en IE, no lo muestra. Traté de agregar nbsp's para asegurarme de que no se ignore, fue en vano.
Se agradecen todas las sugerencias para mejorar el código o ayudar con los problemas.
Gracias!
Muchas gracias, que funcionó! IE todavía no activa eventos regularmente 'onmouseover', pero eso es algo con lo que puedo vivir. ¡Gracias de nuevo! – user355922
no use 'mouseover' /' mouseout'. utilice en su lugar los problemas de borrado (evento burbujeo/delegación) 'mouseenter' /' mouseleave'. incluso puede usar el relé, como 'lvlSelect.addEvent (" mouseover: relay (li) ")' para mantenerlo más limpio (como el jquery .live) –