Image Maps: A Presentational Structure

Hi,
   I've just been thinking about image maps in XHTML.  The whole concept 
of an image map is that hyperlinks are mapped to hot spots on an image. 
  This seems rather presentational to me.  @shape is an attribute that 
specifies the presentational shape of a hot spot, given by @coords.

   As most of you know, one of the main concepts of (X)HTML is to 
seperate the content (structure and semantics) from the presentation. 
However, the whole concept of the image map seems to have been 
overlooked as being presentational.

   Also, I don't believe there is currently any CSS properties that deal 
with setting hot spot regions on an image based on @shape and @coords. 
Thus, the positioning of regions on image maps is left up to the UA 
based on these atttributes, without any help from style sheets.

   If CSS could be used, then (in theory) the following advantages would 
be gained:
• Any set of hyperlinks should be able to mapped to an image.
• Depending on the style sheet:
   ◦ The image used for the map could change.
   ◦ The same set of hyperlinks may or may not be an image map.
     (Would help for visually imaired or colour blind people)
• Hot spot regions could be styled with other properties:
   ◦ eg. color, different background images when hovered, focussed etc.
   (cool effects could be achieved with alpha transparency this way)
• Plus, many more…

   So, this has been sent to both www-style and www-html to make the 
following proposals:
XHTML 2.0:
• Remove or deprecate the image map attributes.

CSS3:
• Define some way that could allow hyperlinks to be mapped to a region 
based on the existing @shape and @coords attributes for (X)HTML.

   Without @shape and @coords, I believe images maps can already be done 
using background-image and a list of links (either <ul> in XHTML1 or 
<nl> in XHTML2) and some CSS3 colour and and selectors.

<ul id="sitenav">
     <li><a href="page1.html">Page 1</a></li>
     <li><a href="page2.html">Page 2</a></li>
     ...
</ul>

ul#sitenav {
     background-image: url("sitenav.png");
     background-color: #AAF;
     color: #33F;
     height: 200px;
     width: 300px;
}
ul#sitenav li {
     display: block;
     position: absolute;
}
ul#sitenav li a {
     background-color: transparent;
     color: transparent;
     // Hides the text, without using visibility:hidden;
     // or display:none; properties.
     // so the link should not be hidden from screen readers.

     display: block;
     height: 100%;
     width: 100%;
}
ul#sitenav li a:hover {
     background-color: rgba(128, 64, 256, 128)
     // Gives a cool transparency effect!
}
ul#sitenav li:nth-child(1) {
     top: 20px;
     left: 45px;
     height: 50px;
     widht: 100px;
}
ul#sitenav li:nth-child(2) {
     top: 100px;
     left: 160px;
     height: 50px;
     widht: 100px;
}
ul#sitenav li a:hover {
     background-color: rgba(128, 64, 256, 128);
     // Gives a cool transparency effect!
}
etc…
(sorry if I made any errors in my CSS, but you should get the general idea)

-- 
Lachlan Hunt

Received on Sunday, 29 February 2004 03:24:40 UTC