Scripts

Lijn Trekken Op Bestaand Plaatje

-01-08-2008 00:00 -5.624 views

Met dit script kan een gebruiker 2 punten aanwijzen op een plaatje, als dat is gebeurt wordt er een lijn tussen de twee punten gezet. Het voorbeeld is met een wereldkaart. De instellingen in config.php moeten worden gewijzigd. Download: http://bartje545.freecpanelhost.net/lijnscript/lijnscript.zip Voorbeeld: http://bartje545.freecpanelhost.net/lijnscript/index.php Images: http://bartje545.freecpanelhost.net/lijnscript/point.gif http://bartje545.freecpanelhost.net/lijnscript/world.jpg Je mag het script verander of aanpassen Veel plezier ermee! Bart

Download alle bestanden als ZIP

lijn-trekken-op-bestaand-plaatje

config.php
[code]
<?php
######################################
#Gemaakt door: Bartje545             #
#Email: [email protected]          #
#Dit script zet een lijn op de door  #
#de gebruiken aangewezen coordinaten #
#Je mag allse met het script doen.   #
#Veel plezier ermee, Bart            #
######################################
$image = "world.jpg"; // Het plaatje waar de lijn moet worden opgezet( MOET een .jpg zijn! )
$wpx = "510"; //beedte van het plaatje
$hpx = "308"; //hoogte van het plaatje


$image2 = "point.gif"; // Het plaatje dat weergeven wordt op de plek waar geklikt is
?>
[/code]
index.php
[code]
<?php
include ("config.php");
?>
<html>
<head>
<script language="JavaScript">
function point_it(event){
	pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	document.getElementById("cross").style.left = (pos_x-1) ;
	document.getElementById("cross").style.top = (pos_y-15) ;
	document.getElementById("cross").style.visibility = "visible" ;
	document.pointform.form_x.value = pos_x;
	document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<h2>Het beginpunt van de lijn:</h2><br />
<form name="pointform" method="post" action="index-2.php">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('<?php echo $image; ?>');width:<?php echo $wpx;?>;height:<?php echo $hpx; ?>;">
<img src="<?php echo $image2; ?>" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
<input type="text" name="form_x" size="4" /><br>
<input type="text" name="form_y" size="4" /><br>
<input type="submit" />

</form>
</body>
</html>
[/code]
index-2.php
[code]
<?php
include("config.php");

$y = $_REQUEST["form_y"]; // Y coordinaat van het beginpunt
$x = $_REQUEST["form_x"]; // X coordinat van het eindpunt

?>
<html>
<head>
<script language="JavaScript">
function point_it(event){
	pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	document.getElementById("cross").style.left = (pos_x-1) ;
	document.getElementById("cross").style.top = (pos_y-15) ;
	document.getElementById("cross").style.visibility = "visible" ;
	document.pointform.form_x.value = pos_x;
	document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<h2>Het eindpunt van de lijn:</h2><br />
<form name="pointform" method="post" action="image.php">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('<?php echo $image; ?>');width:<?php echo $wpx;?>;height:<?php echo $hpx; ?>;">
<img src="<?php echo $image2; ?>" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
<input type="text" name="form_x" size="4" /><br>
<input type="text" name="form_y" size="4" /><br>
<input name="x" type="hidden" value="<?php echo $x; ?>" />
<input name="y" type="hidden" value="<?php echo $y; ?>" />
<input type="submit" />
</form>
</body>
</html>
[/code]
image.php
[code]
<?php
include("config.php");

$xbegin = $_POST["x"]; // X coordinaat van het beginpunt
$ybegin = $_POST["y"]; // Y coordinaat van  het beginpunt
$xeind = $_POST["form_x"]; // X coordinaat van het eindpunt
$yeind = $_POST["form_y"]; // Y coordinaat van het eindpunt

header("Content-Type: image/jpeg");
$img = ImageCreateFromJpeg($image);
$fond = ImageColorAllocate ($img,0,0,0);
$col = ImageColorAllocate ($img,0,0,0);
ImageLine ($img,$xbegin,$ybegin,$xeind,$yeind,$col);
ImageJPEG ($img, '', 100); //Plaatje maken
?>
[/code]