पर एक ग्रिड ओवरले बनाना, मैंने एक स्क्रिप्ट बनाई है (mootools लाइब्रेरी का उपयोग करके) जिसे एक टेबल ग्रिड के साथ एक छवि ओवरले करना है और जब प्रत्येक ग्रिड सेल को उसके पृष्ठभूमि रंग पर क्लिक/ड्रैग किया जाता है तो सेल को हाइलाइट किया जाता है।छवि
वर्तमान कोड तत्व (एल, इस मामले में छवि) पर एक तालिका बनाता है और स्थिति बनाता है। तालिका का उपयोग तब किया गया था जब से मैं बाद में आयताकार चयन उपकरण जोड़ने की योजना बना रहा हूं, और ऐसा करने का सबसे आसान तरीका लग रहा था।
<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>
दो समस्याएं हैं: जबकि यह एफएफ में ठीक काम करता है, IE और क्रोम तालिका का निर्माण नहीं करतीं पेज ताजा है यदि। यदि आप निर्देशिका रूट पर वापस जाते हैं और फ़ाइल के लिंक पर क्लिक करते हैं तो ग्रिड टेबल प्रदर्शित होता है, यदि आप 'रीफ्रेश' बटन दबाते हैं - स्क्रिप्ट चलती है लेकिन तालिका इंजेक्शन नहीं दी जाती है।
दूसरा, हालांकि तालिका HTML को आईई में इंजेक्शन दिया गया है, यह इसे प्रदर्शित नहीं करता है। मैंने यह सुनिश्चित करने के लिए addto की कोशिश की कि इसका अनदेखा न किया जाए - इसका कोई फायदा नहीं हुआ।
कोड सुधारने या मुद्दों के साथ सहायता पर कोई सुझाव की सराहना की जाती है।
धन्यवाद!
बहुत धन्यवाद, कि काम किया! आईई अभी भी नियमित रूप से 'onmouseover' घटनाओं को आग नहीं डालता है, लेकिन यह कुछ है जिसके साथ मैं रह सकता हूं। एक बार फिर धन्यवाद! – user355922
'माउसओवर'/'माउसआउट' का उपयोग न करें। इसके बजाए फिक्स्ड (इवेंट बबलिंग/प्रतिनिधिमंडल के मुद्दों) 'माउसेंटर'/'माउसलेव' का उपयोग करें। आप इसे क्लीनर रखने के लिए 'lvlSelect.addEvent (" mouseover: relay (li) ") जैसे रिले का उपयोग भी कर सकते हैं (jquery .live की तरह) –