#native_company# #native_desc#
#native_cta#

Interactive Image Maps Page 2

By Pablo Monroy D’Croz
on 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 (200×96). Remember that the size of the big map is 747×360, 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