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.

image from book
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.

image from book
Figure 13.17: The map.php application at work



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net