code link: http://jsbin.com/ozoma3/edit
codes (can copy/paste to a .html file, and run it) :
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*{margin:0;}
#main{
background-image:url('http://clip2net.com/clip/m10494/1277192389-c-811b.png');
width:660px;
height:320px;
}
</style>
</HEAD>
<BODY><div id="main"></div></BODY>
</HTML>
<script>
var CELL_WIDTH=66; //diamond area width
var CELL_HEIGHT=32; //diamond area height
var activeCell=$("<img src=http://clip2net.com/clip/m10494/1277193046-block-698b.png>")
.appendTo("#main")
.css({"position": "absolute"});
//active diamond area
function overCell(x,y){
var xC=parseInt(x/(CELL_WIDTH/2));
var yC=parseInt(y/(CELL_HEIGHT/2));
var xO=(xC%2==1);
var yO=(yC%2==0);
if((xO&&yO) || (!xO&&!yO)){
//skip
}else{
activeCell.css({
"left":(xC*(CELL_WIDTH/2))+"px",
"top" :(yC*(CELL_HEIGHT/2))+"px"
});
}
}
$(function(){
$("#main").mousemove(function(e){
overCell(e.pageX,e.pageY);
});
});
</script>
i want when i move mouse over the diamond area,show activeCell on it.
but now ,it is not good,because mouse move to diamond area lower right,it will active next area,not very exactitude.
hot to optimize these codes? (i think i need a better arithmetic)
thanks all! :)