Welcome to the Browser-Base Game Zone forums!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test_map</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script language="javascript" src="test.js"></script><style> body { font-family: erdana, Arial, sans-serif; font-size:13px; } .tile{ position:absolute; background: url(sprites.png) no-repeat; width:70px; height:55px; line-height: 70px; text-align: center; font-size: 12px; } .tile.plain{ background-position: 0px 0px; } .tile.town1{ background-position: -81px 0px; } .tile.town2{ background-position: -162px -2px; } .map_click_point { position:absolute; text-align:center; height:35px; width:70px; padding-top:25px; z-index: 99; } .north { position:absolute; left:800px; top:100px; } .east { position:absolute; left:800px; top:450px; } .west { position:absolute; left:250px; top:100px; } .south { position:absolute; left:250px; top:450px; } /* Popup box for the tile information */ .trigger { text-align:center; } .popupbox { width:900px; height:520px; background-image:url(lb_background.gif); background-repeat:no-repeat; display: none; /* Hidden as default */ float: left; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 0px #000; -moz-box-shadow: 0px 0px 0px #000; box-shadow: 0px 0px 0px #000; } #fade { display: none; /* Hidden as default */ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; } .intabdiv { text-align:left; } img { border: none; } .close_botton { background-image: url(lb_close.gif); z-index: 5; border:0px; width:40px; background-repeat: no-repeat; background-position: left top; height:26px; position:absolute; left:810px; top:70px; cursor:pointer; } .close_botton:hover { background-position: left bottom; } .lightbox_header { background-image: url(lb_headline.gif); width:785px; height:26px; position:absolute; background-repeat: no-repeat; top:105px; z-index:6; left:55px; } .coordinates { position:absolute; top:110px; left:380px; font-size:1.1em; font-weight:bold; } .lb_content_border { background-image: url(lb_content_border.gif); width:759px; height:6px; position:absolute; background-repeat: no-repeat; top:185px; z-index:6; left:200px; } .lb-header-info-empty-tile { position:absolute; top:145px; left:75px; } .lb-content-empty-tile { position:absolute; top:225px; left:75px; } .lb-header-info { position:absolute; top:145px; left:75px; font-size:1.0em; font-weight:bold; } .lb-content { top:145px; left:275px; position:absolute; }</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function() { // Here we will write a function when link click under class popup $('a.popup').click(function() { // Here we will describe a variable popupid which gets the // rel attribute from the clicked link var popupid = $(this).attr('rel'); // Now we need to popup the marked which belongs to the rel attribute // Suppose the rel attribute of click link is popuprel then here in below code // #popuprel will fadein $('#' + popupid).fadeIn(); // append div with id fade into the bottom of body tag // and we allready styled it in our step 2 : CSS $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); // Now here we need to have our popup box in center of // webpage when its fadein. so we add 10px to height and width var popuptopmargin = ($('#' + popupid).height() + 10) / 2; var popupleftmargin = ($('#' + popupid).width() + 10) / 2; // Then using .css function style our popup box for center allignment $('#' + popupid).css({ 'margin-top' : -popuptopmargin, 'margin-left' : -popupleftmargin }); }); // Now define one more function which is used to fadeout the // fade layer and popup window as soon as we click on fade layer $('#fade').click(function() { // Add markup ids of all custom popup box here $('#fade <?php $numbers = 0; while($numbers <= "195"){ $numbers ++; echo ", #popup$numbers"; } ?>').fadeOut() return false; }); $('.close_botton').click(function() { // Add markup ids of all custom popup box here $('#fade <?php $numbers = 0; while($numbers <= "195"){ $numbers ++; echo ", #popup$numbers"; } ?>').fadeOut() return false; }); });</script></head><body><?phpinclude "./scripts/connect.php";$startPosition = array(//getting player position from Database 'x' => 100, 'y' => 100);$myX = (isset($_GET['x']) ? $_GET['x'] : $startPosition['x']);$myY = (isset($_GET['y']) ? $_GET['y'] : $startPosition['y']);if($myX <= "8"){ $myX = 8;}if($myX >= "394"){ $myX = 394;}if($myY <= "8"){ $myY = 8;}if($myY >= "394"){ $myY = 394;}$mapLimit = array(//Setting up limits 'minX' => 1, 'maxX' => 400, 'minY' => 1, 'maxY' => 400);$mapArray = array(); //array with the map$viewX = 0; //X and Y which will be displayed on map$viewY = 0;$tileWidth = 70;$tileHeight = 34;$mapWidth = 14;$mapHeight = 14;$startX = $myX - $mapWidth / 2;$endX = $myX + $mapWidth / 2;$startY = $myY - $mapHeight / 2;$endY = $myY + $mapHeight / 2;$xOffset = ($tileWidth * $mapWidth) / 2; //center the first tile$yOffset = 20; //put the map a bit lower$avaliableTiles = array( 'town1', 'town2', 'plain');$lineNumber = 1;$sql = "SELECT users.username as owner , cities.name as town ,cities.CorX as x,cities.CorY as y,cities.points as points, cities.picture as picture "."FROM users INNER JOIN cities ON(users.username = cities.owner) "."WHERE cities.CorX BETWEEN ".$startX." AND ".$endX." "."AND cities.CorY BETWEEN ".$startY." AND ".$endY ." ";$sql = mysql_query($sql) or die(mysql_error());$number = 0; while($row = mysql_fetch_array($sql)){$mapArray[$row['y']][$row['x']] = array('owner' => $row['owner'],'townname'=> $row['town'],'points'=>$row['points'],'picture'=>$row['picture']);}$step = 3;$directions = array( 'w'=>array('x'=>$myX-$step,'y'=>$myY), 's'=>array('x'=>$myX,'y'=>$myY+$step), 'e'=>array('x'=>$myX+$step,'y'=>$myY), 'n'=>array('x'=>$myX,'y'=>$myY-$step),);for ($y = ceil($startY); $y < ceil($endY); $y++) { for ($x = ceil($startX); $x < ceil($endX); $x++) { $viewX = $x; //View X and ViewY are the true X and Y Coordinates $viewY = $y; if ($x < $mapLimit['minX']) { $viewX = $mapLimit['maxX'] + $x; } if ($x > $mapLimit['maxX']) { $viewX = $mapLimit['minX'] - $x; } if ($y < $mapLimit['minY']) { $viewY = $mapLimit['maxY'] + $y; } if ($y > $mapLimit['maxY']) { $viewY = $mapLimit['minY'] - $y; } if($myY == "8"){ $north = "<font class=\"north\">North</font>"; }else { $north = "<a href=";$north .= sprintf('?y=%s&x=%s',$directions['n']['y'],$directions['n']['x']); $north .= " class=\"north\">North</a>"; } if($myX == "8"){ $west = "<font class=\"west\">West</font>"; }else { $west = "<a href="; $west .= sprintf('?y=%s&x=%s',$directions['w']['y'],$directions['w']['x']); $west .= " class=\"west\">West</a>"; } if($myY == "394"){ $south = "<font class=\"south\">South</font>"; }else { $south = "<a href="; $south .= sprintf('?y=%s&x=%s',$directions['s']['y'],$directions['s']['x']); $south .= " class=\"south\">South</a>"; } if($myX == "394"){ $east = "<font class=\"east\">East</font>"; }else { $east = "<a href="; $east .= sprintf('?y=%s&x=%s',$directions['e']['y'],$directions['e']['x']); $east .= " class=\"east\">East</a>"; } $number ++; $map .= '<div class="tile ' . $mapArray[$viewY][$viewX]['picture'] . '" style="top:' . round($yOffset) . 'px;left:' . round($xOffset) . 'px;"></div>'; //map links layer $map .= "<div class=\"map_click_point\" style=\"top:".round($yOffset)."px;left:".round($xOffset)."px;\"><div class=\"trigger\"><a href=\"#spot=Xcord$y&Ycord$x\" rel=\"popup$number\" class=\"popup\" title=\"$viewX | $viewY\"><img src=\"click.png\" style=\"width:27px;height:21px;\"/></a></div></div><div class=\"popupbox\" id=\"popup$number\"><div class=\"intabdiv\">";if($mapArray[$viewY][$viewX]['owner']){ $map .= "<div class=\"tile ". $mapArray[$viewY][$viewX]['picture'] ."\" style=\"position:absolute;top:145px;left:680px;\"></div><div class=\"coordinates\">Coordinates ". $viewX. " / ". $viewY ."</div><div class=\"lb-header-info\">towns Owner:<br /><br />Towns Name:<br /><br />Towns Points:</div><div class=\"lb-content\">". $mapArray[$viewY][$viewX]['owner'] ."<br /><br />".$mapArray[$viewY][$viewX]['townname']."<br /><br />". $mapArray[$viewY][$viewX]['points'] . "</div>"; }else { $map .= "<div class=\"tile ". $mapArray[$viewY][$viewX]['picture'] ."\" style=\"position:absolute;top:145px;left:740px;\"></div><div class=\"coordinates\">Coordinates ". $viewX. " / ". $viewY ."</div><div class=\"lb-header-info-empty-tile\">This space is empty - settlers can found a new village here.</div><div class=\"lb_content_border\"></div><div class=\"lb-content-empty-tile\">Function not made yet!</div>"; } $map .= "<div class=\"close_botton\"></div><div class=\"lightbox_header\"></div></div></div>"; $yOffset += $tileHeight / 2; $xOffset += $tileWidth / 2; } $xOffset = ($tileWidth * $mapWidth) / 2 - $tileWidth / 2 * $lineNumber; //the new line starts again from center - half tilewidth * linenumber $yOffset = 20 + $tileHeight / 2 * $lineNumber; $lineNumber++;}echo "\n$map";?><?php echo $north; ?><?php echo $south; ?><?php echo $east; ?><?php echo $west ?><br /><?php echo "X".$myX." | Y".$myY.""; ?> <div id="fade"></div></body></html>
