W3C

RDFa and HTML imagemap

RDFa is a way to enrich your Web pages with local data. The clear benefit is that your data are in context and then easier to manage. Yesterday, on the RDFa mailing list, Dan Brickley asked how we could use RDFa to extract the information of an HTML imagemap.

Dan says:

HTML has a somewhat neglected notation for describing regions of images, and associating them with links.

[snip]

BTW I have no idea what the current XHTML 2 and WhatWG/HTML5 folks have planned for these elements. But I think this kind of markup has a lot of potential for making images on the Web more automation friendly.

For now, HTML 5 map element doesn’t do better than HTML 4.01 or maybe I have missed something.

Max Froumentin had design an XSLT which transforms the imagemap code and then convert it to an SVG ouput with the background tone down to make the imagemap zone more visible.

image map and SVG ouput screenshots

Dan continue:

I’d like a way to say, “this area of the image depicts the person who is the primaryTopic of http://danbri.org/”.

A lot of work had been done already in the past on image descriptions with some practical examples, but Niklas Lindström started to give it a stab.

<map name="da8bb51_b" id="da8bb51_b"
    about="[_:the_area]" 
    property="ex:imageMapAreaElement">
    <area  shape="POLY"
        coords="..."
        href="http://danbri.org/" />
</map>

<img  about="[_:the_area]" 
    rel="ex:sourceImage"
    src="2169955372_503da8bb51_b.jpg"  
    width="1024" height="770"
    usemap="#da8bb51_b" />
<div about="[_:danbri]" instanceof="foaf:Person">
    <span property="foaf:name">Dan Brickley</span>
    <span rev="foaf:depicts" resource="[_:the_area]"></span>
    <a rev="foaf:primaryTopic" href="http://danbri.org/">(website)</a>
</div>
  • Someone has a better suggestion in RDFa?
  • Would it be better done in HTML only without breaking previous implementations of HTML 4 imagemap?

I see a lot of possibilities in games, identification, education, cartography. fun. fun.

2 thoughts on “RDFa and HTML imagemap

  1. That entire SVG effect can be done entirely without the RDFa metadata (in fact, it is! [1]), which seems to serve no real purpose at all. It would help if you demonstrated some killer app that actually uses the metadata for something. IMHO, the RDFa just adds unnecessary complexity to an otherwise cool technique.

    [1] http://danbri.org/2008/imagemap/_output.svg

    1. Hi Lachlan,

      The entire SVG effect can be done indeed without the RDFa metadata, but that was not the purpose of this message and then your comment. The SVG effect was just a visualization of a concept. How do we identify objects in an image?

      So let’s say I have done an HTML imagemap which creates one or more areas for a given image. Let’s say a world map image with countries, and that I want to associate with these areas with a precise identifier (concept). It could be something which relates to the country with more information. An educative tool then can associate areas of an image with their concepts. In education areas, I see thousands of possibilities. Another use case would be in a system where you want to identify people in a photo, either to track them or either to respect their privacy. This image contains the face of Lachlan. Lachlan has specified elsewhere that he doesn’t want his image shared with this or that context. The software can then blurred or remove the person in this image. Advertisement would be another possibility. etc.

      Note also that the end of the blog post, but maybe you didn’t have time to read that far, talked about RDFa or an only HTML solution. Reading is quick, understanding takes a bit more time, but the pleasure is deeper.

Comments are closed.