PHPBuilder - Interactive Image Maps Page 2



RSS Twitter
Articles Tricks And Hacks

Interactive Image Maps - Page 2

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

The second file is ampliacion.php3 and its code looks like this:
<HTML>
<HEAD></HEAD>
<BODY bgcolor="#CCCCCC#">
<IMG SRC="zoom.php3?x=<? echo $mapa_x ?>&y=<? echo $mapa_y ?>">
</body>
</html>
Its function is to transmit the coordinates received from map.html to an interactive image called zoom.php3 and load it. Here, the coordinates are transmited by x and y variables.
The third file is zoom.php3 and it contains the code to generate the portion of map that you want to zoom. Here is the code:

<?php

Header
"Content-type: image/gif");
$bigmap=ImageCreateFromGif("caligran.gif");
$image_out=ImageCreate(200,96);
$factor=3.75;
$posx=floor($x*$factor-100);
$posy=floor($y*$factor-48);
$copia=ImageCopyResized($image_out$bigmap00$posx$posy2009620096);
ImageGif($image_out);
ImageDestroy($bigmap);
ImageDestroy($image_out);

?>
I'm suposing that the size of the zoomed portion of map is the same as the small map (200x96). Remember that the size of the big map is 747x360, then if you divide 360 by 96 (or 747 by 200) the zoom factor is approximately 3.75.
$posx and $posy are the start coordinates from the big map, they are calculated by multiplying $x and $y by the zoom factor and then they are moved to ensure that the place where the user clicks in the small map goes to the center of the zoom map.
It is very important to realize that you cannot put any HTML tags in this file. Also, there should not be any spaces or blank lines before or after the <? and ?> tags. If you are getting a broken image using this script, chances are you have a stray carriage return somewhere outside the PHP tags.
Remember that your PHP setup needs support from the GD library.
You can obtain the map files by clicking on next links:
Cali is the city where I live. Its long name is Santiago de Cali
You can optimize this method making it recursive and having several zoomings with more than 2 images, or have the small and big maps in the same file.
--Pablo

« Previous Page
1
|
2

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.