1

2

3

4

Creating an image mapping

Well, this is a no link page; but perhaps you my be interested in how to make an image mappable?

We start with an image, in this case a map. Paste it onto an html page using frontpage or whatever.

I have set the co-ordinates to 800 and 600 for this example. e.g. - you will have a line along the lines of:

<img border="0" src="Hackney-Stratford2.JPG"  width="800" height="600"></p>

What we need to do is create a set of image points on this page; so a quick and simple java program created something along the line of:

points.java

You will need to compile points.java in the first place - so you will need the java development kit - just type jdk into google and make sure you dowmload the jdk and not just the jre (java runtime environment). It takes a couple of minutes on a fast internet connection.

You will obviously need java to run this, save this file, and run it from the command line as :

java points

 or [-cp . means add the current directory to the classpath]

java -cp . points

If this works, now try

java points 800 600 50

Once this has been done, we can cut and past this code into the html page, e.g.

<area Target="_blank" href="NoLink.htm1# shape="rect" coords="0,0,2,2" alt="">
plus the earlier line needs to be changed to :

<img border="0" src="Hackney-Stratford2.JPG" usemap="#FPMap0" width="800" height="600"></p>
 

Not much has changed.

Now the hard bit, if you have frontpage access to the site , or are editing in a text editor, you need to add the relevant lines to the page in the code design window. That was hard, wasn't it?

 

This is an example of code that works

 

<p align="center"><map name="FPMap0">
<area Target="_blank" href="NoLink.htm#1" shape="rect" coords="0, 0, 100, 100">
<area Target="_blank" href="NoLink.htm#2" shape="rect" coords="0, 100, 100, 200">
<area Target="_blank" href="NoLink.htm#3" shape="rect" coords="0, 200, 100, 300">
<area Target="_blank" href="NoLink.htm#4" shape="rect" coords="0, 300, 100, 400">
<area Target="_blank" href="NoLink.htm#5" shape="rect" coords="0, 400, 100, 500">
...

<area Target="_blank" href="NoLink.htm#45" shape="rect" coords="700, 200, 800, 300">
<area Target="_blank" href="../essexpubs/WestHam/wswan.htm" shape="rect" coords="700, 300, 800, 400" alt="White Swan, Abbey Lane, West Ham">
<area Target="_blank" href="NoLink.htm#47" shape="rect" coords="700, 400, 800, 500">
<area Target="_blank" href="NoLink.htm#48" shape="rect" coords="700, 500, 800, 600">

</map>
<p align="center">
<img border="0" src="Hackney-Stratford2.JPG" usemap="#FPMap0" width="800" height="600"></p>