could connect to MySQL to retrieve and set properties
which would be entered on a HTML page.
Interaction between form elements and php scripts that
eventually would connect to a database to get and set
all the data.
Mouse coordinates are shown on the board, but the next
step which would involve setting the property isn't
implemented.
frames.php
<?php
echo <<<HTML
<iframe name="editor" id="editor" scrolling="auto" width=800 height=600
src="edit.php?cmd=board" style = "position:absolute;left:1px;top:1px">
</iframe>
<iframe name="properties" id="properties" scrolling="auto" marginheight="14"
src="edit.php?cmd=properties" style = "position:relative;left:800px;top:1px;">
</iframe>
<iframe name="data" id="data" scrolling="auto" src="edit.php?cmd=data"
style = "position:relative;left:900px;top:1px;">
</iframe>
HTML;
?>
board.php
<?php
echo <<<HTML
<head>
<link rel="stylesheet" href="css/mycss.css">
</head>
<form name="Show">
<div class="game_area" width=800px height=600px>
</div>
</form>
<script>
var IE = document.all?true:false;
if (!IE){
document.captureEvents(Event.MOUSEMOVE)
document.captureEvents(Event.MOUSECLICK)
}
document.onmousemove = getMouseXY;
document.onmousedown = getMouseClick;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
if(IE){
parent.document.getElementById('properties').contentWindow.document.getElementById('x').value=tempX;
parent.document.getElementById('properties').contentWindow.document.getElementById('y').value=tempY;
}else{
parent.document.getElementById('properties').contentDocument.getElementById('x').value=tempX;
parent.document.getElementById('properties').contentDocument.getElementById('y').value=tempY;
}
return true;
}
function getMouseClick(e){
if (IE) {
if(event.button > 0)
parent.document.getElementById('properties').contentWindow.document.getElementById('button').value=event.button;
}else{
if(event.which > 0)
parent.document.getElementById('properties').contentDocument.getElementById('button').value=event.which;
}
return true;
}
</script>
HTML;
?>
mycss.css
.game_area {
background-color: #08000d;
width: 800px;
height: 600px;
}
properties.php
The database button COULD run a PHP script that uses a MySQL database.
<?php
echo <<<HTML
<FORM name=properties>
X <input type=text id="x" name="x"><br>
Y <input type=text id="y" name="y"><br>
B <input type=text id="button"name="button"><br>
<input value="database" type=button
onclick="javascript:parent.document.getElementById('data').src='edit.php?cmd=data';"><br>
</FORM>
HTML;
?>
data.php
But we do not connect to a database for this demonstration. We just retrieve
the x coordinate and show it.
<?php
echo <<<HTML
<script>
function onload(){
var IE = document.all?true:false;
HTML;
echo "if (!IE){";
// chrome:
echo "alert(' Not Internet Explorer '+parent.document.getElementById('properties').
contentDocument.getElementById('x').value+'');";
echo "}else{";
// IE
echo "alert(' Internet Explorer '+parent.document.getElementById('properties').
contentWindow.document.getElementById('x').value+'');";
echo "}";
// Complete function
echo <<<HTML
return true;
}
</script>
<body onload='onload();'>
</body>
HTML;
?>
Geen opmerkingen:
Een reactie posten