{"id":1220,"date":"2018-01-19T19:22:34","date_gmt":"2018-01-19T19:22:34","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/interactive-image-maps\/"},"modified":"2018-01-19T19:24:37","modified_gmt":"2018-01-19T19:24:37","slug":"interactive-image-maps","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/interactive-image-maps\/","title":{"rendered":"Interactive Image Maps"},"content":{"rendered":"
\n
\n
By Pablo Monroy D’Croz<\/div>\n
on July 30, 2000<\/div>\n<\/p><\/div>\n
\"picture<\/p>\n
\nI’m working to develope a web-based Geographical Information System (GIS)
\n and one of the big problems I had was to write an easy algorithm to zoom a portion
\n of a map.<\/div>\n
\nFirst of all I tried to use Server Side Maps, but I found that they need a
\n Perl script with too many lines of code. So I came to phpbuilder and found an
\n article from Rasmus Lerdorf : Creating
\n Dynamic Images with PHP<\/a> that shows how useful PHP and the GD library could
\n be for that purpose. Thanx Rasmus!<\/b><\/div>\n
\nI’ll explain a method to zoom a portion of an image by using PHP and gif files.<\/div>\n
\nThe first step is to generate a map in its big size (in my example a 747×360
\n pixels gif called caligran.gif<\/i>), then I resize the map to its small size
\n (200×96 gif called cali.gif<\/i>). It’s very important to work with gif files
\n because GD library can manipulate only those image types.<\/div>\n
\nWe need three files to work besides the gif images. The first file called map.html<\/b>
\n has the small map and its code is:<\/div>\n
\n<\/p>\n

<HTML>
\n
<HEAD><\/HEAD>
\n
<BODY\u00a0bgcolor=\"#CCCCCC#\">
\n
<FORM\u00a0METHOD=\"POST\"\u00a0ACTION=\"ampliacion.php3\">
\n
<INPUT\u00a0TYPE=\"IMAGE\"\u00a0SRC=\"cali.gif\"\u00a0NAME=\"mapa\"\u00a0BORDER=\"0\">
\n
<\/FORM>
\n
<\/BODY>
\n
<\/HTML>
\n
<\/span>
\n<\/code><\/font><\/div>\n

\nThe principal purpose of this file is to transmit the coordinates where the
\n user clicks on the small map.<\/div>\n
\nHere, the most important tag is
\n<INPUT\u00a0TYPE=\"IMAGE\"\u00a0....\u00a0><\/span>
\n<\/code><\/font>
\nOn a browser that supports this tag, the image is displayed. Clicking
\n on any part of the image is equivalent to clicking on a Submit button. If
\nNAME<\/span>
\n<\/code><\/font>
\n is mapa<\/code>, the values mapa_x<\/code> and
\n mapa_y<\/code> are transmitted
\n to ampliacion.php3<\/b> through normal form and URL encoding. These two fields
\n contain the coordinates where the user clicked. <\/div>\n<\/div>\n

<\/p>\n

\n
1<\/div>\n
| <\/div>\n
2<\/a> <\/div>\n
Next Page \u00bb<\/a><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

I’m<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1220","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1220"}],"version-history":[{"count":1,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1220\/revisions"}],"predecessor-version":[{"id":2130,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1220\/revisions\/2130"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}