Menu
i have done lot of work and created a grid but i have struck in inserting values in that grid can any one help me out in this problem????
heres the code i tried
<html>
<head>
<title>JavaScript Grid</title>
<style type=”text/css”>
/** Floorplan DIV Style */
#floorplan {
background-image: url();
width:1000px;
height:1000px;
border: 1px solid;
}
/** Grid Square Style */
.coordinate
{
border: 2px solid #bbbbbb;
position: absolute;
left: 0px;
top: 0px;
width:35px;
height:25px;
font-size:1px;
font-family:verdana;
color:#000;
padding:0px;
content: ‘5 squares = 140 px’;
}
</style>
<script type=”text/javascript” language=”javascript”>
function $(element) {
return document.getElementById(element);
}
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
//Array of Coordinates Set by the User
var setCoords = new Array();
//var s;
//Sets a coordinate and highlights coords on mouseover/out.
function setCoordinate(centerTile, toggle) {
coordSet = -1;
//Because false and 0 evaluate the same.
//TODO: Find a faster way to do this, maybe a string and instr()
s=centerTile;
for (var i = 0; i < setCoords.length; i++) {
if (setCoords[i] == centerTile) {
coordSet = i;
break;
}
}
if (toggle == “on”) {
centerTile.style.backgroundColor = “red”;
} else if (toggle == “off”) {
if (coordSet < 0) {
centerTile.style.backgroundColor = “transparent”;
}
} else if (toggle == “set”) {
if (coordSet > -1) {
setCoords[coordSet] = null;
centerTile.style.backgroundColor = “transparent”;
} else {
setCoords.push(centerTile);
centerTile.style.backgroundColor = “red”;
}
}
}
//Generates a grid square on the page.
function createGridSpace(leftOffset, topOffset)
{
var divTag = document.createElement(“div”);
divTag.id = “coord” + x + “-” + y;
divTag.setAttribute(“align”,”center”);
divTag.style.left = leftOffset + “px”;
divTag.style.top = topOffset+7+ “px”;
divTag.className =”coordinate”;
//divTag.innerHTML = “<p>” + x + “-” + y + “</p>”;
divTag.onmouseover = function() {
setCoordinate(this, “on”);
<?php
echo “1”;
?>
};
divTag.onmouseout = function() {
setCoordinate(this, “off”);
};
divTag.onclick = function () {
setCoordinate(this, “set”);
document.pointform.x.value = divTag.style.left;
document.pointform.y.value = divTag.style.top;
//document.forms[“pointform”].submit();
};
document.body.appendChild(divTag);
//point_it(event)
}
//Creates a grid board of given number of squares.
function createGridBoard(height,width) {
for (y=0; y<height; y++) {
baseTopOffset = (y * 32);
for (x=0; x<width; x++) {
leftOffset = (x
topOffset = baseTopOffset +7;
createGridSpace(leftOffset,topOffset);
}
}
point_it(event)
}
addLoadEvent(
function() {
createGridBoard(10,11);
}
);
</script>
</head>
<body >
<div id=”pointer_div” onClick=”point_it(event)” style = “background-image:url(‘sun.png’);width:505px;
height:337px;”>
</div>
<form name=”pointform” method=”post” action=”testdb.php”>
<br/>LEFT VALUE = <input type=”text” name=”x” size=”4″ />
<br>TOP VALUE= <input type=”text” name=”y” size=”4″ /><br/>
<input type=”submit” value=”submit”><br/>
</form>
<form name=”point” method=”post” action=”destroy.php”>
<input type=”submit” value=”RESET” name=”RESET”>
</form>
</body>
</html>