map displayed in img

Bruno Kestemont (bkest@ulb.ac.be)
Thu, 24 Apr 97 11:19:00 +0200


Date: Thu, 24 Apr 97 11:19:00 +0200
Message-Id: <9704240919.AA11446@is1e.vub.ac.be>
To: www-html@w3.org
From: bkest@ulb.ac.be (Bruno Kestemont)
Subject: map displayed in img

Clickable maps and vector images:

Usemap vectors can not be displayed on the screen.
It becomes absurd when we are obliged to insert a (raster) gif image on the 
back of a usemap which is vectorial and represents exactly the same picture.

For example, if I want to draw an organigram consisting of boxes and lines, 
or even simple geographical maps, I use 2 versions of the same image, 1 as 
vectors (in usemap), 1 as background gif image, which takes a lot of place.

I propose is the following:

-allow a property of IMG to select a 'html' vector image (e.g. the usemap 
istelf) to be displayed on the screen as background image.

-in general, allow vector images, with the html usemap format, to be 
displayed on the screen. Properties like colours etc. can be added for each 
object. This would save downloading time for simple images and graphs, with 
or without clickable maps.

In the example given in the source HTMl document (see bellow), the following 
should be added:

<!ATTLIST IMG
        src     %URL     #REQUIRED  -- URL of image to embed --
                                    -- or URL of map to embed as background  
                                       image -- (in this case height and     
                                    width attributes are required for best   
                                   practice)

Example given for Map:

<img src="navbar.gif" border=0 usemap="#map1">

Other example if the proposal is accepted:

<img src="#map1" border=0 usemap="#map1">


Colour properties for areas should be added:

<!ATTLIST AREA:
bgcolor 
     Specifies the background color for the area body.
link 
     Specifies the color used to stroke the area for unvisited hypertext links. 
vlink 
     Specifies the color used to stroke the area for visited hypertext links. 
alink 
     Specifies the highlight color used to stroke the area for hypertext 
links at the moment the user clicks on the link. 
background 
     Specifies a URL for an image that will be used to tile the document 
background. 
    >



------------------------------------------------------------------
reference:

IMG - inline images

<!ENTITY % IAlign "(top|middle|bottom|left|right)">

<!ELEMENT IMG    - O EMPTY --  Embedded image -->
<!ATTLIST IMG
        src     %URL     #REQUIRED  -- URL of image to embed --
        alt     CDATA    #IMPLIED   -- for display in place of image --
        align   %IAlign  #IMPLIED   -- vertical or horizontal alignment --
        height  %Pixels  #IMPLIED   -- suggested height in pixels --
        width   %Pixels  #IMPLIED   -- suggested width in pixels --
        border  %Pixels  #IMPLIED   -- suggested link border width --
        hspace  %Pixels  #IMPLIED   -- suggested horizontal gutter --
        vspace  %Pixels  #IMPLIED   -- suggested vertical gutter --
        usemap  %URL     #IMPLIED   -- use client-side image map --
        ismap   (ismap)  #IMPLIED   -- use server image map --
        >

Used to insert images. (...) 

e.g.  <IMG SRC="canyon.gif" ALT="Grand Canyon">


(...)


MAP

The MAP element provides a mechanism for client-side image maps. These can 
be placed in the same document or grouped in a separate document although 
this isn't yet widely supported. The MAP element requires start and end 
tags. It contains one or more AREA elements that specify hotzones on
the associated image and bind these hotzones to URLs. 

<!ENTITY % SHAPE "(rect|circle|poly)">
<!ENTITY % COORDS "CDATA" -- comma separated list of numbers -->

<!ELEMENT MAP - - (AREA)+>
<!ATTLIST MAP
    name    CDATA   #REQUIRED
    >

<!ELEMENT AREA - O EMPTY>
<!ATTLIST AREA
    shape   %SHAPE  rect
    coords  %COORDS #IMPLIED  -- defines coordinates for shape --
    href    %URL    #IMPLIED  -- this region acts as hypertext link --
    nohref (nohref) #IMPLIED  -- this region has no action --
    alt     CDATA   #REQUIRED -- needed for non-graphical user agents --
    >

Here is a simple example for a graphical navigational toolbar: 

<img src="navbar.gif" border=0 usemap="#map1">

<map name="map1">
 <area href=guide.html alt="Access Guide" shape=rect coords="0,0,118,28">
 <area href=search.html alt="Search" shape=rect coords="184,0,276,28">
 <area href=shortcut.html alt="Go" shape=rect coords="118,0,184,28">
 <area href=top10.html alt="Top Ten" shape=rect coords="276,0,373,28">
</map>

The MAP element has one attribute NAME which is used to associate a name 
with a map. This is then used by the USEMAP attribute on the IMG element to 
reference the map via a URL fragment identifier.
Note that the value of the NAME attribute is case sensitive. 

The AREA element is an empty element and so the end tag is forbidden. It 
takes the following attributes: SHAPE, COORDS, HREF, NOHREF and ALT. The 
SHAPE and COORDS attributes define a region on the image. If the SHAPE 
attribute is omitted, SHAPE="RECT" is assumed. 

     shape=rect coords="left-x, top-y, right-x, bottom-y"

     shape=circle coords="center-x, center-y, radius" 

     shape=poly coords="x1,y1, x2,y2, x3,y3, ..." 


---------------------------------------------------------

Thanks for your comments or for taking this into account for further html 
versions.