Tôi đã tạo một kịch bản (sử dụng thư viện mootools) có nghĩa là phủ một hình ảnh với một lưới bảng và khi mỗi ô lưới được nhấp/kéo trên các thay đổi màu nền của nó 'làm nổi bật' ô.Tạo một lớp phủ lưới trên hình ảnh
Mã hiện tại tạo bảng và định vị nó trên phần tử (el, hình ảnh trong trường hợp này). Bảng đã được sử dụng kể từ khi tôi đang lập kế hoạch để thêm công cụ chọn hình chữ nhật sau này, và nó có vẻ là cách dễ nhất để làm điều đó.
<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>
Có hai vấn đề: trong khi nó chỉ hoạt động tốt trong FF, IE và Chrome không tạo bảng nếu trang được làm mới. Nếu bạn quay trở lại thư mục gốc và bấm vào liên kết đến tệp bảng lưới được hiển thị, nếu bạn nhấn nút 'làm mới' - tập lệnh chạy nhưng bảng không được tiêm.
Thứ hai, mặc dù HTML bảng được tiêm trong IE, nhưng nó không hiển thị nó. Tôi đã thử thêm vào để đảm bảo không bị bỏ qua - không có kết quả.
Bất kỳ đề xuất nào về cải thiện mã hoặc trợ giúp về các vấn đề đều được đánh giá cao.
Cảm ơn!
Rất cám ơn, mà làm việc! IE vẫn không kích hoạt các sự kiện thường xuyên 'onmouseover' nhưng đó là điều tôi có thể sống cùng. Cảm ơn một lần nữa! – user355922
không sử dụng 'mouseover' /' mouseout'. sử dụng các sự cố cố định (sự kiện tạo bọt/sự kiện ủy nhiệm) 'mouseenter' /' mouseleave' thay thế. bạn thậm chí có thể sử dụng chuyển tiếp, như 'lvlSelect.addEvent (" mouseover: relay (li) ")' để giữ cho nó sạch hơn (như jquery .live) –