5
이미지를 테이블 그리드로 오버레이하고 각 그리드 셀을 클릭/드래그하여 배경색을 변경하면 셀을 '강조 표시'하는 스크립트 (mootools 라이브러리 사용)를 만들었습니다.이미지 위에 그리드 오버레이 만들기
현재 코드는 테이블을 만들어 요소 (이 경우 이미지, el) 위에 놓습니다. 나중에 사각형 선택 도구를 추가 할 계획이므로 표가 사용되었습니다. 가장 쉬운 방법이었습니다.
<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>
두 가지 문제가 있습니다 : 그것은 FF에서 잘 작동하는 동안 페이지를 새로 고칠 경우, IE와 크롬은 테이블을 생성하지 않습니다. 루트 디렉토리로 돌아가서 모눈 테이블이 표시된 파일에 대한 링크를 클릭하면 '새로 고침'버튼을 누르면 스크립트가 실행되지만 테이블은 삽입되지 않습니다.
둘째, 표 HTML이 IE에 삽입되었지만 표시되지 않습니다. 나는 무시하지 않도록 nbsp를 추가해 보았습니다. 아무 소용이 없었습니다.
코드 개선이나 문제 해결에 도움이되는 제안 사항에 대한 의견을 보내주십시오.
감사합니다. 페이지 IE의 상단에 DOCTYPE 십이 추가
많은 감사, 그 일을! IE는 여전히 이벤트를 'onmouseover'로 정기적으로 실행하지 않지만 그걸 내가 살 수있는 것입니다. 다시 한 번 감사드립니다! – user355922
'mouseover' /'mouseout'을 사용하지 마십시오. 고정 된 (이벤트 버블 링/위임 문제)'mouseenter' /'mouseleave'를 대신 사용하십시오. 'lvlSelect.addEvent ("mouseover : relay (li)")'와 같은 릴레이를 사용하여 jquery .live와 같이 깨끗하게 유지할 수도 있습니다. –