{"id":1221,"date":"2018-01-19T19:22:34","date_gmt":"2018-01-19T19:22:34","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/interactive-image-maps-page-2\/"},"modified":"2018-01-19T19:24:37","modified_gmt":"2018-01-19T19:24:37","slug":"interactive-image-maps-page-2","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/interactive-image-maps-page-2\/","title":{"rendered":"Interactive Image Maps Page 2"},"content":{"rendered":"
\n
\n
By Pablo Monroy D’Croz<\/div>\n
on July 30, 2000<\/div>\n<\/p><\/div>\n
\n
\nThe second file is ampliacion.php3<\/b> and its code looks like this:<\/div>\n
\n
\n<HTML>
\n
<HEAD><\/HEAD>
\n
<BODY\u00a0bgcolor=\"#CCCCCC#\">
\n
<IMG\u00a0SRC=\"zoom.php3?x=<?\u00a0<\/span>echo\u00a0<\/span>$mapa_x\u00a0?><\/span>&y=<?\u00a0<\/span>echo\u00a0<\/span>$mapa_y\u00a0?><\/span>\">
\n
<\/body>
\n
<\/html><\/span>
\n<\/code><\/font><\/div>\n
\nIts function is to transmit the coordinates received from map.html <\/b>to
\n an interactive image called zoom.php3 <\/b>and load it. Here, the coordinates
\n are transmited by x<\/code> and y<\/code> variables.<\/div>\n
\nThe third file is zoom.php3 <\/b>and it contains the code to generate the
\n portion of map that you want to zoom. Here is the code:<\/div>\n
\n<\/p>\n

<?php<\/p>\n

Header<\/span>(\u00a0<\/span>\"Content-type:\u00a0image\/gif\"<\/span>);
\n
<\/span>$bigmap<\/span>=<\/span>ImageCreateFromGif<\/span>(<\/span>\"caligran.gif\"<\/span>);
\n
<\/span>$image_out<\/span>=<\/span>ImageCreate<\/span>(<\/span>200<\/span>,<\/span>96<\/span>);
\n
<\/span>$factor<\/span>=<\/span>3.75<\/span>;
\n
<\/span>$posx<\/span>=<\/span>floor<\/span>(<\/span>$x<\/span>*<\/span>$factor<\/span>-<\/span>100<\/span>);
\n
<\/span>$posy<\/span>=<\/span>floor<\/span>(<\/span>$y<\/span>*<\/span>$factor<\/span>-<\/span>48<\/span>);
\n
<\/span>$copia<\/span>=<\/span>ImageCopyResized<\/span>(<\/span>$image_out<\/span>,\u00a0<\/span>$bigmap<\/span>,\u00a0<\/span>0<\/span>,\u00a0<\/span>0<\/span>,\u00a0<\/span>$posx<\/span>,\u00a0<\/span>$posy<\/span>,\u00a0<\/span>200<\/span>,\u00a0<\/span>96<\/span>,\u00a0<\/span>200<\/span>,\u00a0<\/span>96<\/span>);
\n
<\/span>ImageGif<\/span>(<\/span>$image_out<\/span>);
\n
<\/span>ImageDestroy<\/span>(<\/span>$bigmap<\/span>);
\n
<\/span>ImageDestroy<\/span>(<\/span>$image_out<\/span>);<\/p>\n

<\/span>?>
\n
<\/span>
\n<\/span>
\n<\/code><\/font><\/div>\n

\nI’m suposing that the size of the zoomed portion of map is the same as the
\n small map (200×96). Remember that the size of the big map is 747×360, then if
\n you divide 360 by 96 (or 747 by 200) the zoom factor is approximately
\n 3.75.<\/b><\/div>\n
\n$posx<\/code> and $posy<\/code> are the start coordinates from the big
\n map, they are calculated by multiplying $x<\/code> and $y<\/code> by the
\n zoom factor and then they are moved to ensure that the place where the user
\n clicks in the small map goes to the center of the zoom map.<\/div>\n
\nIt is very important to realize that you cannot put any HTML tags in this file.
\n Also, there should not be any spaces or blank lines before or after the <?<\/tt>
\n and ?><\/tt> tags. If you are getting a broken image using this script,
\n chances are you have a stray carriage return somewhere outside the PHP tags.<\/div>\n
\nRemember that your PHP setup needs support from the GD library.<\/div>\n
\nYou can obtain the map files by clicking on next links:<\/div>\n
\n