Beginning PHP4 | 12

[previous] [next]

Beginning PHP4

Further Interactivity

What we have so far is a searchable database whose results can be displayed graphically. However, suppose we want to make the map more interactive and let the user click on the shop to get more information? What we need is an imagemap, a piece of HTML that defines regions within an image so that different actions can be taken when the user clicks on different parts of the image.

All the information that we need to create an imagemap is already stored in our database: m_area contains coordinates for each corner of a shop, while m_name contains the name of the shop.

If we were building an imagemap by hand for our image above, we would first open the map tag and give it a name:

<MAP NAME="mall">

We'd then create an AREA entry for each of the areas we wanted to make clickable:

<AREA ALT="Fashion Warehouse" SHAPE="poly" COORDS="350,0,350,100,400,150,500,150,500,0" HREF="malldetail.php?id=3">

The ALT attribute of an IMG element is principally there for the sake of users with browsers that don't display images - in such a browser, the ALT text is used instead in place of the image. We are going to use the ALT text for something different. In recent versions of Internet Explorer and Netscape (since version 4 of each, in fact) the ALT text appears as a tool tip whenever the mouse pointer hovers over the image. We are going to use this feature to display a tool tip containing the shop name.

Note that IE4 and above support the TITLE attribute, which has the same effect, but can be used in any tag.

The shape attribute in the tag gives the shape of the area. Currently supported shapes are poly, rect and circle. The poly shape expects to find coordinates for the corners of the shape in coordinate pairs in the COORDS attribute, which is exactly what we have stored in our database. The last attribute we specify is HREF, which as usual specifies the URL to be followed when that particular area is clicked. We mark the end of the imagemap element with </map>

.

We still need to link the image to our imagemap, and we do that with the USEMAP attribute in the IMG tag.

<IMG SRC="showmall.php?show=3,11" USEMAP="#mall" BORDER="0">

The hash symbol # specifies that the imagemap is inside the current document, while BORDER=0 prevents us getting an ugly blue block around our image now that it's clickable.

Try It Out - Generating an Imagemap from the Database

Our imagemap is pretty useless unless we can create it on the fly, so let's change our mall.php script to create an imagemap for our mall diagram:

<?php
//mall3.php
include "./common_db.inc";
if ($criteria!="") {
   $link_id = db_connect('mapping');
   $query = "SELECT m_id, m_center, m_name, m_area FROM mall
             WHERE m_desc LIKE '%".$criteria."%'";
   $mallResult = mysql_query($query,$link_id);
   if (mysql_num_rows($mallResult) > 0) {
      $stores = array();
      $mapstring = "";
      while ($mallRow = mysql_fetch_array($mallResult)) {
         $stores[count($stores)] = $mallRow[0];
         $mapstring .= "<AREA ALT=\"".$mallRow[2].
                       "\" SHAPE=\"poly\" COORDS=\"".$mallRow[3].
                       "\" HREF=\"malldetail.php?id=".$mallRow[0]."\">\n";
      }
      mysql_free_result($mallResult);
      $show = implode(",", $stores);
      echo "<IMG SRC=\"showmall.php?show=".urlencode($show).
           "\" USEMAP=\"#mall\" BORDER=0>";
   } else {
      echo "no shops found";
   }
}
?>
<P>
<MAP NAME="mall">
<?php echo $mapstring ?>
</MAP>

How It Works

The first thing we do is to alter our SQL query to include the extra data m_center, m_name, and m_area, which we'll need to build the imagemap:

$query = "SELECT m_id, m_center, m_name, m_area FROM mall
          WHERE m_desc LIKE '%".$criteria."%'";

We then declare a variable called $mapstring which will contain the meat of the imagemap definition:

$mapstring = "";

We already have a loop that runs through our selected records and builds up a string to pass to the image-drawing script showmall.php. We can therefore use this to build our imagemap as well. We can't yet output the imagemap to the browser, as we're still inside the IMG element, so sending any spurious text will break our image.

So, while we're inside the loop, we add code to build up $mapstring, using the same format as we would if building the imagemap manually. We define links to a new script, called malldetail.php, which we'll build in the next section; this will display details of the selected shop.

$mapstring .= "<AREA TITLE='\"".$mallRow[2].'>"\" SHAPE=\"poly\" COORDS=\"".$mallRow[3].
              "\" HREF=\"malldetail.php?id=".$mallRow[0]."\"&gt;\n";

When we come to write out the IMG element, we need to add in the USEMAP attribute as well as the BORDER attribute:

    echo "<IMG SRC='\"showmall.php?show=".urlencode($show).'>"\" USEMAP=\"#mall\" BORDER=0&gt;";

After we have written out the IMG tag we can create the imagemap:

<P>
<MAP NAME="mall">
<?php echo $mapstring ?>
</MAP></P>

Showing the Shop Detail

We're now going to develop the script malldetail.php, which will display details of the specific shop that the user clicked on. The first thing it has to do is a database lookup for the shop information. It will then display a thumbnail of the mall layout with just the current shop highlighted.

In order to display a thumbnail of the image, we're going to use a function called ImageCopyResized(). This lets us copy a section of a source image, resize it, and paste it into a new image. The function works with two images: a source image and a destination image. It uses the following syntax:

ImageCopyResized(destination image,
                 source image,
                 destination x, destination y,
                 source x, source y,
                 destination width, destination height,
                 source width, source height);

For each image, we specify x and y coordinates, as well as a width and a height. An area width wide and height high, the top-left hand corner of which lives at (x, y) is copied from the source image, scaled to the correct width and height (as specified for the destination image) and placed into the destination image at the specified (x, y) position. The diagram below illustrates the process:

Since showmall.php already has all the code we need to display our mall, we'll just modify it to be able to display a thumbnail of our image instead of the full thing.

[previous] [next]