Jump to content

Xerosigma

New Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

    Never

Profile Information

  • Gender
    Not Telling

Xerosigma's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. Xerosigma
    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]
  2. Xerosigma
    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]
×
×
  • 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.