Jump to content

Compass Form with an Image


Recommended Posts

I'm trying to make a working game compass that has directions and would mimic this form

<form name="compass" method="post" action="self">
<input type="radio" name="direction" value="north">
<input type="radio" name="direction" value="south">
<input type="radio" name="direction" value="east">
<input type="radio" name="direction" value="west">

except i want them to be buttons that when you click on it submits with that given direction, and the compass is all generated off a single image not individual images.  Can I use a image map for this? or are there any other ideas.  I know i need buttons, they could be submit buttons, I prefer not to have to splice the image if possible.


Link to comment
Share on other sites

Yeah I know a map is needed, but every map i've seen requires JS to use I've seen one like this

<script type="text/javascript">
var ff_submit = 0;function dosub(id) {
	if (ff_submit == 0) {
		ff_submit = 1;
		document.ff.dir.value = id;
// -->
<map NAME="navmap">
<area shape="poly" cords="" href="javascript:;" alt="North" onClick="dosub(1); return false;">
<area shape="poly" cords=" href="javascript:;" alt="West" onClick="dosub(3); return false;">
<area shape="poly" cords="" href="javascript:;" alt="East" onClick="dosub(4); return false;">
<area shape="poly" cords="" href="javascript:;" alt="South" onClick="dosub(2); return false;">
<area shape="poly" cords="" href="javascript:;" alt="Northwest" onClick="dosub(5); return false;">
<area shape="poly" cords="" href="javascript:;" alt="Northeast" onClick="dosub(7); return false;">
<area shape="poly" cords="" href="javascript:;" alt="Southwest" onClick="dosub(6); return false;">
<area shape="poly" cords="113,113,80,113,80,109,107,81,113,81" href="javascript:;" alt="Southeast" onClick="dosub(; return false;">


Is this a safe way to do it?

Link to comment
Share on other sites

that sample i showed you makes sense to me, but I was looking for a way to do it without JS because What I want to Do is actually include the cordinates as the value so I can say in php

<?php list($x,$y) = explode("_",$_POST['cord']);?>

and then use $x,$y in a query.

so the button values would be something like

say X=5 Y=5 on current page

North = (5_4)

South = (5_6)

West = (6_5)

East = (4_5)


make sense?


the reason i'm doing that is because i have to check what the square is in mysql before moving them incase its a wall for say so they don't go into my walls


Link to comment
Share on other sites

If you use

<form method='post'>
<input type='image' src='compass.gif' name='compass' />


then clicking on it acts like a submit button and in the $_POST data you have






which will tell you where the user clicked in the image.

Link to comment
Share on other sites

Well I've created a working solution, but I have an issue, it is stagnet, i'll post that on the php help board, but if anyone interested this is the solution

<!--Compass handlers-->
<MAP NAME="navi">
<AREA SHAPE="RECT" COORDS="47,1,85,45" nohref onClick="document.navi.direction.value='<?php echo $x."_".$y2;?>'; navi.submit();" TITLE="North">
<AREA SHAPE="RECT" COORDS="85,47,128,80" nohref onClick="document.navi.direction.value='<?php echo $x1."_".$y;?>'; navi.submit();" TITLE="East">
<AREA SHAPE="RECT" COORDS="54,65,82,117"  nohref onClick="document.navi.direction.value='<?php echo $x."_".$y1;?>'; navi.submit();" TITLE="South">
<AREA SHAPE="RECT" COORDS="0,49,51,70"  nohref onClick="document.navi.direction.value='<?php echo $x2."_".$y;?>'; navi.submit();" TITLE="West">
<!--End Compass Handlers-->
			<form name=\"navi\" method=\"post\" action=\"play.php\">
			<input type=\"hidden\" name=\"direction\" value=\"\" />
			<img src=\"images/compass.jpg\" width=\"120\" height=\"120\" usemap=\"#navi\" border=\"0\" />
//$row is set ahead of time
				//Takes the variables off the posting
				list($x,$y) = explode("_",$_POST['direction']);
				//If you didn't move why waste the time querying Probably will never happen, but incase a glitch we have it covered
				if($x == $row['X'] && $y == $row['Y']){}
					$mapQ = "Select Type From `map` Where X = '$x' && Y = '$y'";
					$mapR = mysql_query($mapQ) or die(mysql_error());
					$mapRow = mysql_fetch_assoc($mapR);
					//Checks to see if you can walk on that square
					if($mapRow['Type'] != 1 && $mapRow['Type'] != 6 && $mapRow['Type'] != 7 && $mapRow['Type'] != 
							$MapU = "Update `Users` Set X='$x', Y='$y' Where UserID = '$UserID'";
							$MapUR = mysql_query($MapU) or die(mysql_error());				
							$x = $x;
							$y = $y;
							$x1 = $x+1;
							$x2 = $x-1;
							$y1 = $y+1;
							$y2 = $y-1;
							$x = $row['X'];
							$y = $row['Y'];
							$x1 = $x+1;
							$x2 = $x-1;
							$y1 = $y+1;
							$y2 = $y-1;

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.