Image Map [PHP+SQL+JS]

Xerosigma · October 26, 2011

I'm working on an image map in php using the html map tag. The script I have now populates a specific amount of map cells.

You can see what I've done for far here: http://terrachaos.com/doa/map/

I'm having trouble devising an approach to retrieving data from the database based on what map cell the user hovers over. Specifically the coordinates. I want PHP to compare the coordinates x & y to a corresponding row in the db.

I am currently using simple_html_dom.php to parse the page containing my map and control attributes.

I'm just not sure how I should use that to dynamically populate the information of each area using data from an SQL database.

I already have the database set up as well as the corresponding php variables that will store the information. Just need someone with more experience to help me with the next steps.

Main Variables: The variables correspond to the names of the database columns.

$mType
$mLevel
$mCoordx
$mCoordy
$mOwner
$mAlliance
$mFlag
$mLord
$mImage

Main Image Map - index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" href="css/css.css" type="text/css" />
<title>Ocelot World Map: Sector 0-74</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.min.js"></script>
<script type="text/javascript">$(function() {
	$('.map').maphilight();
});</script>
</head>
<body>
<div id="container" style="width: 1000px; position:absolute;">
<div class="title"><h1>Ocelot World Map: Sector 0-74</h1></div>
<div id="image-holder">
<img class="map" src="images/grass.png" width="750" height="750" usemap="#map">
<map name="map">
<?php
// Include Connections
include ("includes/connections.php");

// Dispay Errors (Development use only)
error_reporting(E_ALL);
ini_set("display_errors", "1");

// Area Vars
$over = "document.getElementById('info').style.display = 'block'";
$out = "document.getElementById('info').style.display = 'none'";
$href = 22;
$alt = 00;
$title = 'HelloWorld';
$class = 'areaSelect';

// Cell Size & Amount Variables
$columns = 75;
$rows = 75;
$width = 10;
$height = 10;

// Loop to dynamically generate areas.
for( $x = 0; $x < $columns; $x++ )
{
   for( $y = 0; $y < $rows; $y++ )
   {
      $a = ($x * $width);
      $b = ($y * $height);

      $coords = array( $a, $b, ($a + $width), ($b + $height) );
      echo '<area class="'.$class.'" shape="rect" coords="'.implode( ',', $coords ).'" href="'.$href.'" onmouseover="'.$over.'" onmouseout="'.$out.'" alt="'.$alt.'" title="'.$title.'" />'."\n";
   }
}

// Close Connecction
mysql_close($sql);
?>
</map>
</div>

<div id="info" style="display:none">
<h4>Area Information</h4>
    <?php include ("script.php"); // Include Simple HTML DOM Script ?>
</div>

<a href="./">Back to Sector Select</a>
</div>
<!-- Java Script Center -->
<!--<script>
var winl = (screen.width - 1000) / 2;
document.getElementById('container').style.left = winl +'px';
</script>-->
</body>
</html>

DOM Parser - script.php Note: Near the end of the file is a foreach... statement. With the amount of data being populated, it's better I load the information only when it's triggered/needed. Could I get some help making it so? Perhaps a function?

 <?php
    include('includes/simple_html_dom.php'); //Load/include the PHP Simple HTML DOM Parser

    $html = file_get_html('http://www.terrachaos.com/doa/map/index.php'); // Load your html file

    // create a series of variables to call on later

    $imgtitle = $html->find('div.title', 0)->plaintext; //here we reference the HTML file, and find the div with the class "title" and display it as plaintext

   // ok for some reason and hopefully someone out there can add why
   // I had to reference the fist instance of each element here 
   // referenced as the ',0' in each case. 

   // here you can see we search for the div 'image-holder'
   // and then search in that div for the first image and save it to a variable

    $imageurl =  $html->find('#image-holder',0)->find('img',0); 

   // here we target the image scr, width, height, style, alt, border and usemap and assign them to variables

    $imagesrc = $imageurl->src;
    $imageWidth = $imageurl->width;
    $imageHeight = $imageurl->height;
    $imageStyle = $imageurl->style;
    $imageAlt = $imageurl->alt;
    $imageBrd = $imageurl->border;
    $imageUsemap = $imageurl->usemap;

    $map = $html->find('map',0); // here we look for the map and assign it to a variable

    // here we target the map ID and Name and usemap and assign them to variables

$mapID = $map->id;
$mapName = $map->name;

    // we assigned a class to the map areas to find them easier
    $imgmaparea = $html->find('.areaSelect');

    // ok although the example only has one map area this will find multiple
    // areas and print them on the screen using the 'foreach' function 
    foreach ($imgmaparea as $value){
     $areaShape = $value->shape;
     $areaCoords = $value->coords;
     $areaHref = $value->href;
     $areaTitle = $value->title;
     $areaAlt = $value->alt;
      // print them on the screen
         echo 'Shape: '.$areaShape. '<br>';
     echo 'Coords: '.$areaCoords. '<br>';
         echo 'Href: '.$areaHref. '<br>';
         echo 'Title: '.$areaTitle. '<br>';
         echo 'Alt: '.$areaAlt. '<br>';

   }
         // print them on the screen
         echo 'name: '.$mapName. '<br>';
         echo 'Id: '.$mapID. '<br>';
         echo 'filename: '.$filename. '<br>';
         echo 'Src: '.$imagesrc. '<br>';
         echo 'Width: '.$imageWidth. '<br>';
         echo 'Height: '.$imageHeight. '<br>';
         echo 'Style: '.$imageStyle. '<br>';
         echo 'Alt: '.$imageAlt. '<br>';
         echo 'Usemap: '.$imageUsemap. '<br>';

   ?>

Thank you in advance.

[attachment deleted by admin]

Xerosigma · October 26, 2011

Update:

I added two custom HTML attributes to the script that I will increment using PHP.

Attributes:

data-coordx="'.$coordx.'"
data-coordy="'.$coordy.'"

I'm not sure if this is the proper way to do so, but to increment I did:

for( $coordx = 0; $coordx < $maxcoord; $coordx++ );
for( $coordy = 0; $coordy < $maxcoord; $coordy++ );

Now I have my custom coordinates attribute. I will be using these values to compare to the SQL WHERE clause when pulling data.

Additionally, I've added it to the DOM parser so that I can convert the value into a variable for use in PHP dynamically:

$areaCoordx = $value->data-coordx;
$areaCoordy = $value->data-coordy;

Last but not least, I've decided to try calling a function to populate fields in the "info" div based on DB data:

<?php
// dataFiller Function
function dataFiller()
{
include ("includes/connections.php");

// Retrieve Data
$result = mysql_query("SELECT mType, mLevel, mCoordx, mCoordy, mOwner, mAlliance, mFlag, mLord, mImage FROM locations WHERE mCoordx='$areaCoordx' AND mCoordy='$areaCoordy'");

return array (0, 1, 2);

// Close Connecction
mysql_close($sql);
}
?>

I'm not sure how accurate my syntax is. Any help is welcome. If I can get some help finishing that function too that would be awesome. I need to store the data into an array and echo it into the "info" div. Maybe something like this will do?:

<div id="info" style="display:none">
<h4>Area Information</h4>
    <?php include ("script.php"); // Include Simple HTML DOM Script
	list ($mType, $mLevel, $mCoordx, $mCoordy, $mOwner, $mAlliance, $mFlag, $mLord, $mImage) = dataFiller();
?>
</div>

I added a new ZIP containing all the files if you're interested. Thanks.

[attachment deleted by admin]

Sign In

Image Map [PHP+SQL+JS]

Recommended Posts

Xerosigma

Link to comment

Share on other sites

Xerosigma

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information