How image maps work: Difference between revisions

From OS2World.Com Wiki
Jump to navigation Jump to search
No edit summary
mNo edit summary
Line 1: Line 1:
By [[Derek Clarkson‎]]
''By [[Derek Clarkson‎]]''


For those of you who aren't familiar with HTML. Image maps are where we use a single graphic to indicate several different and clickable options. For example, the OS/2 Zone home page uses a single large image map to graphically show you the various areas of the magazine.
For those of you who aren't familiar with HTML. Image maps are where we use a single graphic to indicate several different and clickable options. For example, the OS/2 Zone home page uses a single large image map to graphically show you the various areas of the magazine.


To actually make a Image Map happen an extra parameter is added to a standard IMG tag. This parameter is "ISMAP" and indicate that the graphic refered to by IMG is to be treated as a Image Map. For example:-
To actually make a Image Map happen an extra parameter is added to a standard IMG tag. This parameter is "ISMAP" and indicate that the graphic referred to by IMG is to be treated as a Image Map. For example:
 
  <IMG SRC="./buttonbar.gif">
  <IMG SRC="./buttonbar.gif">
 
Around IMG tag goes a standard Anchor tag where the URL is the path to an image map processing program. It also passes in this URL the URL of a file which contains the URLs for the map. For example:
Around IMG tag goes a standard Anchor tag where the URL is the path to an imagemap processing program. It also passes in this URL the URL of a file which contains the URLs for the map. For example:-
 
  <A HREF="/cgi-bin/imagemap/./misc/buttonbar.map"><IMG SRC="./buttonbar.gif"></A>
  <A HREF="/cgi-bin/imagemap/./misc/buttonbar.map"><IMG SRC="./buttonbar.gif"></A>
 
This map file contains the URLs that are to be used when you click on the map. Fir example, the standard one at the top of this page looks like this:
This map file contains the URLs that are to be used when you click on the map. Fir example, the standard one at the top of this page looks like this:-
 
  default /misc/imagemapfyi.html
  default /misc/imagemapfyi.html
  rect /misc/misc.html 0,28 68,48
  rect /misc/misc.html 0,28 68,48
Which defines the default URL for the map and the URL for the home page if you click on the Home button.
Which defines the default URL for the map and the URL for the home page if you click on the Home button.


The whole thing then works like this: when you click on the image map, the image map program is called and the web explorer passes it the name of the file containing the URLs and the xy co-ordintes of the mouse over the graphic. From this the image map program which URL was represented by the area under the mouse and then sends back the target URL.  
The whole thing then works like this: when you click on the image map, the image map program is called and the web explorer passes it the name of the file containing the URLs and the xy coordinates of the mouse over the graphic. From this the image map program which URL was represented by the area under the mouse and then sends back the target URL.


[[Category:Technical]]
[[Category:Technical]]

Revision as of 14:49, 25 December 2017

By Derek Clarkson‎

For those of you who aren't familiar with HTML. Image maps are where we use a single graphic to indicate several different and clickable options. For example, the OS/2 Zone home page uses a single large image map to graphically show you the various areas of the magazine.

To actually make a Image Map happen an extra parameter is added to a standard IMG tag. This parameter is "ISMAP" and indicate that the graphic referred to by IMG is to be treated as a Image Map. For example:

<IMG SRC="./buttonbar.gif">

Around IMG tag goes a standard Anchor tag where the URL is the path to an image map processing program. It also passes in this URL the URL of a file which contains the URLs for the map. For example:

<A HREF="/cgi-bin/imagemap/./misc/buttonbar.map"><IMG SRC="./buttonbar.gif"></A>

This map file contains the URLs that are to be used when you click on the map. Fir example, the standard one at the top of this page looks like this:

default /misc/imagemapfyi.html
rect /misc/misc.html 0,28 68,48

Which defines the default URL for the map and the URL for the home page if you click on the Home button.

The whole thing then works like this: when you click on the image map, the image map program is called and the web explorer passes it the name of the file containing the URLs and the xy coordinates of the mouse over the graphic. From this the image map program which URL was represented by the area under the mouse and then sends back the target URL.