[Seaside] Image map tag

Michel Bany m.bany at wanadoo.fr
Sun Feb 11 10:18:36 UTC 2007

Philippe Marschall a écrit :
> After some discussion with Lukas I have come up with the following:
>     html map
>         id: #pictureMap;
>         title: 'Click here';
>         callback: [ :point | self click: point + self offset];
>         with: [
>             html image
>                 form: self form ]
> This has the following advantages
> - the full interface of WAAnchorTag und WAImageTag is available
> - uses the familiar canvas api (with: [ html image) to create images
> - less code
> disadvantages:
> - breaks old code (WAScreenshot is updated)
As far as I could see image maps in xhtml come in two flavors.

In the first flavor, the image is enclosed in an anchor element and has 
the ismap attribute.
The location of the mouse click is passed to the server via the anchor 

In the second flavor, the image is not enclosed in an anchor and has the 
usemap attribute.
The usemap attribute refers to a <map> element that encloses many <area> 
Each of the area element defines a subset (rectangle, circle, polygon) 
of the image
and a callback.

At the moment Seaside only offers support for the first flavor (ismap).
With the implementation suggested by Philippe and Lukas, the #map selector
would be create a confusion with the <map> xhtml element.

So for the first flavor (the image is a map) I suggest the api below

    (html imageMap)
        ... ;
        image: [:image | image ...];
        callback: [:aPoint | self clickedAt: aPoint]

For the second flavor (the image uses a map) we send #map: rather
than #callback:

    (html imageWithMap)
        ... ;
        image: [:image | image ....];
                [html area ...
                html area ...      ]

With some new api for the <area> tag
        html area
            callback: [self inform: 'Rectangular area 1'];
            shape: (Rectangle origin: 40 at 40 corner: 100 at 400);
            title: 'Rectangular area'.
and support for Rectangle, Circle and Polyline

See an experimental implementation for VW here 


More information about the Seaside mailing list