Working with Image Maps
You can also use image maps with PHP. An image map is a clickable image. With PHP you can recover the location at which the user clicked.
Here’s an example, map.html, which connects to map.php:
<html> <head> <title> Using Image Maps </title> </head> <body> <center> <h1> Using Image Maps </h1> <form method="post" action="map.php"> . . . </form> </center> </body> </html>
You create an image map with the <input type="image"> element. This example uses a map image named map.jpg:
<html> <head> <title> Using Image Maps </title> </head> <body> <center> <h1> Using Image Maps </h1> <form method="post" action="map.php"> Click anywhere in the image map. <br> <br> <input name="map" type="image" src="/books/1/252/1/html/2/map.jpg"> </form> </center> </body> </html>
When the user clicks the image map, the mouse location is sent to map.php, which starts like this:
<html> <head> <title>Retrieving Image Map Data</title> </head> <body> <center> <h1>Retrieving Image Map Data</h1> <br> You clicked the image map at location ( . . . ). </center> </body> </html>
Now the question becomes: How do you read the x and y location of the mouse? The image map control is named map in this example, and in PHP, that means you can access the x coordinate of the mouse location as map_x, and the y coordinate as map_y (these coordinates are with respect to the map’s upper left point) Here’s what it looks like in code:
<html> <head> <title>Retrieving Image Map Data</title> </head> <body> <center> <h1>Retrieving Image Map Data</h1> <br> You clicked the image map at location ( <? echo $_REQUEST["map_x"], ", ", $_REQUEST["map_y"]; ?> ). </center> </body> </html>
Now to test it out. You can see the image map in map.html at work in Figure 13.16, where the user is about to click the image map.
Figure 13.16: The map.html Web page
You can see the mouse location, given as (x, y), at which the user clicked the map reported by map.php, in Figure 13.17.
Figure 13.17: The map.php application at work
