Creating a grid overlay over image.
Posted
by neteus
on Stack Overflow
See other posts from Stack Overflow
or by neteus
Published on 2010-06-17T17:21:45Z
Indexed on
2010/06/17
17:23 UTC
Read the original article
Hit count: 289
JavaScript
|mootools
Hi everybody,
I made a script (using mootools library) that is supposed to overlay an image with a table grid and when each grid cell is clicked/dragged over its background color changes 'highlighting' the cell.
Current code creates a table and positions it over the element (el, image in this case). Table was used since I am planning to add rectangle select tool later on, and it seemed easiest way to do it.
<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>
A 'working' example: http://72.14.186.218/~alex/motion.php
There are two problems: while it works just fine in FF, IE and Chrome do not create the table if the page is refreshed. If you go back to directory root and click on the link to the file the grid table is displayed, if you hit 'refresh' button -- the script runs but the table is not injected.
Secondly, although the table HTML is injected in IE, it does not display it. I tried adding nbsp's to make sure its not ignored -- to no avail.
Any suggestions on improving code or help with the issues is appreciated.
Thanks!
© Stack Overflow or respective owner
