Page 1 of 1

ImageMaps errors

Posted: 2013-04-08T05:52:01-07:00
by nniico
There is a problem with the HTML format (image maps): all areas have the same size, which is the size of the biggest picture in the given set.
Each areas should cover exactly it's own image (plus margins).
The actual behavior is satisfying only when generating thumbnail maps, where all thumbnails are supposed to have the same dimensions. It's not working for example when generating CSS sprite sheets.

Code: Select all

montage -tile 4x -geometry +20+5 \
  "wizard:[20x20]" \
  "wizard:[50x50]" \
  "wizard:[30x30]" \
  "wizard:[200x200]" \
  "wizard:[20x20]" \
  "wizard:[60x60]" \
  "wizard:[40x40]" \
  -bordercolor indianred -border 1 w.html
The generated map is:

Code: Select all

<map id="w" name="w">
  <area href="WIZARD" shape="rect" coords=  "0,  0,191,211" alt="" />
  <area href="WIZARD" shape="rect" coords="192,  0,383,211" alt="" />
  <area href="WIZARD" shape="rect" coords="384,  0,575,211" alt="" />
  <area href="WIZARD" shape="rect" coords="  0,212,191,423" alt="" />
  <area href="WIZARD" shape="rect" coords="192,212,383,423" alt="" />
  <area href="WIZARD" shape="rect" coords="384,212,575,423" alt="" />
  <area href="WIZARD" shape="rect" coords="  0,424,191,635" alt="" />
</map>

Re: ImageMaps errors

Posted: 2013-04-08T23:38:58-07:00
by nniico
The way pictures are packed has changed somewhere between version 6.6 and 6.7. And apparently, the HTML output module hasn't followed those changes.

Re: ImageMaps errors

Posted: 2013-04-09T00:30:18-07:00
by anthony
nniico wrote:There is a problem with the HTML format (image maps): all areas have the same size, which is the size of the biggest picture in the given set.
That is the tile size of montage. And that is how it currently works.

Another mthod that is free form is to use a 'color-index' reference image to convert a X,Y coordinate into 'image selected'.
See Rubble Webs.. Imagemap example
http://www.rubblewebs.co.uk/imagemagick ... allery.php


It is basic, And I probably would have used a single grayscale index for each image, but it works well to demonstrate the technique.