Jump to content

Compass Form with an Image


cooldude832

Recommended Posts

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

<html>
<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">
</html>

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

<html>
<script type="text/javascript">
<!--
var ff_submit = 0;function dosub(id) {
	if (ff_submit == 0) {
		ff_submit = 1;
		document.ff.dir.value = id;
		document.ff.submit();	
		}
	}
// -->
</script>
<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;">
</map>
</html>

 

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' />
</form>

 

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

 

$_POST['compass_x']

$_POST['compass_y']

 

 

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

<html>
<!--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\" />
			</form>
</html>
<?php
//$row is set ahead of time
			if(!empty($_POST['direction'])){
				//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']){}
				else{
					connectSQL();
					$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;
						}
					else{
							$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 thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.