PHPBuilder - Interactive Image Maps



RSS Twitter
Articles Tricks And Hacks

Interactive Image Maps

by: Pablo Monroy D'Croz
|
July 30, 2000

I'm working to develope a web-based Geographical Information System (GIS) and one of the big problems I had was to write an easy algorithm to zoom a portion of a map.
First of all I tried to use Server Side Maps, but I found that they need a Perl script with too many lines of code. So I came to phpbuilder and found an article from Rasmus Lerdorf : Creating Dynamic Images with PHP that shows how useful PHP and the GD library could be for that purpose. Thanx Rasmus!
I'll explain a method to zoom a portion of an image by using PHP and gif files.
The first step is to generate a map in its big size (in my example a 747x360 pixels gif called caligran.gif), then I resize the map to its small size (200x96 gif called cali.gif). It's very important to work with gif files because GD library can manipulate only those image types.
We need three files to work besides the gif images. The first file called map.html has the small map and its code is:

<HTML>
<HEAD></HEAD>
<BODY bgcolor="#CCCCCC#">
<FORM METHOD="POST" ACTION="ampliacion.php3">
<INPUT TYPE="IMAGE" SRC="cali.gif" NAME="mapa" BORDER="0">
</FORM>
</BODY>
</HTML>
The principal purpose of this file is to transmit the coordinates where the user clicks on the small map.
Here, the most important tag is <INPUT TYPE="IMAGE" .... > On a browser that supports this tag, the image is displayed. Clicking on any part of the image is equivalent to clicking on a Submit button. If NAME is mapa, the values mapa_x and mapa_y are transmitted to ampliacion.php3 through normal form and URL encoding. These two fields contain the coordinates where the user clicked.

1
|
2
Next Page »

Comment and Contribute

Your comment has been submitted and is pending approval.

Author:
Pablo Monroy D'Croz

Comment:



Comment:

(Maximum characters: 1200). You have characters left.