image-map addressing oddities

[Rich Morin]

As discussed previously, I need an automated way to put
clickable (i.e., client-side image-mapped) images on wiki
pages.  Jan Steinman showed me a cute way to do this (see
below), using raw HTML.  Although I've gotten it to work
for me, I've found some oddities in the way that addresses
(e.g., file names, URLs) get interpreted.

What I'm hoping for is a way to use some relatively short
and simple addresses for the images and associated pages.
Ideally, I'd be able to get to uploaded images, using a
name such as 'Image:Segwayabbeyroad.jpg', rather than
having to use my own directory or reverse engineer path
names such as 'images/3/3a/Segwayabbeyroad.jpg'.

I realize that I'm off in an unsupported area, but perhaps
some of you have had (and resolved) similar issues.  Any
helpful advice will be greatly appreciated.


I have two copies of the image, located at:

  images/3/3a/Segwayabbeyroad.jpg
  images_raw/Segwayabbeyroad.jpg


The saved page can be viewed at

  http://www.cfcl.com/rdm/MW/index.php/IM_X1


Here's the code for the page:

=============================
This image shows up.

[[Image:Segwayabbeyroad.jpg]]

<RawHtml>
  <p> These two images, not surprisingly, don't show up at all.

  <p>A <img src='Image:Segwayabbeyroad.jpg'
          usemap='#foo'>

  <p>B <img
src='http://www.cfcl.com/rdm/mediawiki/index.php?title=Image:Segwayabbeyroad.jpg'
          usemap='#foo'>

  <p> These two images only show up in preview mode.

  <p>C <img src='images/3/3a/Segwayabbeyroad.jpg'
          usemap='#foo'>

  <p>D <img src='images_raw/Segwayabbeyroad.jpg'
          usemap='#foo'>

  <p> These two images show up in both preview and save mode.

  <p>E <img
src='http://www.cfcl.com/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg'
          usemap='#foo'>

  <p>F <img src='/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg'
          usemap='#foo'>

  <p> The left-most image-map links (George, Paul) work in preview mode,
          but not after a "Save page".  The other two work in both modes.

<map name="foo">

  <area coords="  0,  0, 83, 199"
        href="?title=George">

  <area coords=" 84,  0,167, 199"
        href="./index.php?title=Paul">

  <area coords="168,  0,251, 199"
        href="/rdm/mediawiki/index.php?title=Ringo">

  <area coords="252,  0,332, 199"
        href="/rdm/mediawiki/index.php?title=John">
</map>
</RawHtml>
=============================


Finally, here's RawHtml.php:

=============================
<?php
  # RawHtml.php - raw HTML extension
  #
  # Defines the tag pair <RawHtml></RawHtml>.
  # Sends the content out without any processing.
  #
  # To use, include this file into your LocalSettings.php
  # To configure, set members of $wgRawHtml after the inclusion.
  #
  #   include 'RawHtml.php';
  #
  #   $wgRawHtml = array('JoeUser', 'JoeUserBot')
  #
  # Adapted from code by Jan Steinman <Jan@...>

  class raw_html_settings { };

  $wgRawHtml              = new raw_html_settings;
  $wgExtensionFunctions[] = 'wf_raw_html_ext';

  function wf_raw_html_ext() {

    global $wgParser;

    $wgParser->setHook('RawHtml', 'render_raw_html');
  }

  function render_raw_html($raw_html_src, $style='') {

    return $raw_html_src;
  }
?>
=============================
--
http://www.cfcl.com/rdm            Rich Morin
http://www.cfcl.com/rdm/resume     rdm@...
http://www.cfcl.com/rdm/weblog     [phone]

Technical editing and writing, programming, and web development
_______________________________________________
Wikitech-l mailing list
Wikitech-l@...
http://mail.wikipedia.org/mailman/listinfo/wikitech-l

[Ilmari Karonen]

Rich Morin wrote:

>
>   <p> These two images only show up in preview mode.
>
>   <p>C <img src='images/3/3a/Segwayabbeyroad.jpg' usemap='#foo'>
>   <p>D <img src='images_raw/Segwayabbeyroad.jpg' usemap='#foo'>
>
>   <p> These two images show up in both preview and save mode.
>
>   <p>E <img src='http://www.cfcl.com/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg' usemap='#foo'>
>   <p>F <img src='/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg' usemap='#foo'>

This shouldn't be a surprise.  In the first two examples above, you're
using _relative_ URLs.  The browser converts them to absolute URLs based
on the URL of the page you're viewing.  In preview mode that URL will be
something like:

   http://www.cfcl.com/rdm/mediawiki/index.php?title=Foo&action=submit

which will yield the expected image URLs.  When viewing the article in
normal mode, however, the page URL will look like:

   http://www.cfcl.com/rdm/wiki/Foo

which causes the browser to try to fetch an image named:

   http://www.cfcl.com/rdm/wiki/images_raw/Segwayabbeyroad.jpg

MediaWiki interprets that as a request for an _article_ named
"images_raw/Segwayabbeyroad.jpg", which obviously doesn't exists.  (And
even if it did, it would be an article, not an image file.)

--
Ilmari Karonen
_______________________________________________
Wikitech-l mailing list
Wikitech-l@...
http://mail.wikipedia.org/mailman/listinfo/wikitech-l