Further Interactivity - Page 14
January 12, 2001
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'>
[Lines 2 and 3 above are one line. They have been split for
formatting purposes.]
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>
[Lines 16 and 17 above are one line as are linjes 21 and 22.
They have been split for formatting purposes.]
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]."\">\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>";
After we have written out the IMG tag we can create
the imagemap:
<P>
<MAP NAME="mall">
<?php echo $mapstring ?>
</MAP>
Continuing the Layout - Page 13
Beginning PHP4
Showing the Shop Detail - Page 15
|
