Generate HTML-Map from image

Answer 1

I can give you one step of the process: you are going to need to use the Sobel filter (often called edge detection in programs like Photoshop).

After that you will need to find a tracing library in your language of choice.

Answer 2

Open the map in Inkscape. If it is a bitmap, use Path -> Trace Bitmap to trace the edges. Clean up the vector data to include only the paths that you want to appear in your imagemap. Save the document, I suggest to a POVRay file. Now you have a list of vertices (and plenty of markup or metadata that you don't care about) in a plain text format. Converting from that to the requisite HTML syntax is still a problem, but not nearly as complex as the first step.

For what it is worth, there is a long standing feature request for Inkscape to include an option to export HTML image maps.

Answer 3

Thanks for your help!

Although Jonathans hint to use the Sobel filter definitely would work, I chose Sparrs approach of first converting the bitmap into a vector image (via Inkscape) and then processing the SVG file. After studying some of the basics of the SVG spec, it was pretty easy to extract the - for HTML image maps needed - X/Y coordinates from all the other junk and generate a suitable code.

Although it’s no rocket science, someone might find this piece of code useful:

// input format: M 166,362.27539 C 163.525,360.86029 161.3875,359.43192 161.25,359.10124 C ...
private static void Svg2map(string svg_input)
{
 StringBuilder stringToFile = new StringBuilder();

 // get rid of some spaces and characters
 var workingString = svg_input.Replace("z", "").Replace(" M ", "M").Replace(" C ", "C");
 // split into seperate polygons
 var polygons = workingString.Split('M');
 foreach (var polygon in polygons)
 {
  if (!polygon.Equals(String.Empty))
  {
   // each polygon is a clickable area
   stringToFile.Append("<area shape=\"poly\" coords=\"");
   // split into point information
   var positionInformation = polygon.Split('C');
   foreach (var position in positionInformation)
   {
    var noise = position.Trim().Split(' ');
    // only the first x/y-coordinates after C are relevant
    var point = noise[0].Split(',');
    foreach (var value in point)
    {
     var valueParts = value.Split('.');
     // remove part after comma - we don't need this accurancy in HTML
     stringToFile.Append(valueParts[0]);
     // comma for seperation - don't worry, we'll clean the last ones within an area out later
     stringToFile.Append(",");
    }
   }
   stringToFile.AppendLine("\" href=\"targetpage.html\" alt=\"Description\" />");
  }
 }
 // clean obsolete commas - not pretty nor efficient
 stringToFile = stringToFile.Replace(",\"", "\"");

 var fs = new StreamWriter(new FileStream("output.txt", FileMode.Create));
 fs.Write(stringToFile.ToString());
 fs.Close();
}