Creating Image Maps | Spring Into PHP 5

PHP also supports HTML-based image maps, which are clickable images full of hot spots, although you work with them a little differently in PHP.

Here's an example, phpimap.html, Example 5-15, which displays an image (imap.jpg) and lets the user click it. To create an image map this way, you use the HTML <INPUT TYPE="IMAGE"> element, setting the SRC attribute to the location of the image.

Example 5-15. Creating an image map, phpimap.html

 <HTML>     <HEAD>         <TITLE>             Using Image Maps         </TITLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 Using Image Maps             </H1>             <FORM METHOD="POST" ACTION="phpimap.php">                 Click the image:                 <BR>                 <INPUT NAME="imap" TYPE="IMAGE" src="/books/1/265/1/html/2/imap.jpg">             </FORM>         </CENTER>     </BODY> </HTML>

You can see what the image map looks like in Figure 5-15.

Figure 5-15. Using an image map.

When the user clicks the map, the mouse location is sent to your PHP script. We've given the map the name "imap" using the HTML NAME attribute, and in other languages, you'd refer to the X and Y locations of the mouse as imap.x and imap.y. However, those aren't legal PHP names, so in PHP, you use imap_x and imap_y, as shown in phpimap.php, Example 5-16.

Example 5-16. Retrieving data from an image map, phpimap.php

 <HTML>     <HEAD>         <TITLE>Retrieving Image Map Data</TITLE>     </HEAD>     <BODY>         <CENTER>             <H1>Retrieving Image Map Data</H1>             <BR>             You clicked at location (             <?php                 echo $_REQUEST["imap_x"], ", ", $_REQUEST["imap_y"];             ?>             ).         </CENTER>     </BODY> </HTML>

That's all it takesnow your script can detect the mouse location of image map clicks, as shown in Figure 5-16. When you know where the map was clicked, you know what action the user wants you to take.

Figure 5-16. Reading data from an image map.