Blue Glass Arrow.svg MediaWiki-2020-logo.svg
This page should be moved to
Please do not move the page by hand. It will be imported by a administrator with the full edit history. In the meantime, you may continue to edit the page as normal.


This extension includes well known HTML Image-Maps to MediaWiki. Please note that i am a php beginner. Bugs might appear. I tested it with my Wiki, it works fine. But that doesn't mean it does for yours. Please report any bugs below. It should work with Version 1.4 and higher. Thanks.



  • [] - concerning the visible image, once
* source - where the image is located
* mapname - random name
* width - width of image
* height - of image
  • {}- concerning clickable points in image, unlimited (as much clickable points you want)
* shape - can be "rect", "circle" or "polygon"
* coords - "x,x,x,x" for rect; "x,x,x" for circle; "x,x,x,..." for polygon
* url - url where to link
* alt - alternative text

Maybe very confusing at the first time of use. Just look at any HTML Guide to ImageMaps for more Information. This extension just kind of translates the code, so u can use it in MediaWiki Software.



Result / further InformationEdit

Can not be shown here.


 # HTMLMap by Steven Rose (
 # visit
 # special thanks to anea of
 # Note: htmlmap includes imagemaps to mediawiki software
 #       usage is shown here:
 # Have fun
 $wgExtensionFunctions[] = "wfHtmlMap";
 function wfHtmlMap() {
  global $wgParser;
  $wgParser->setHook( "htmlmap", "renderHtmlMap" );
 function renderHtmlMap( $input ) {
  preg_match_all('/([\[\]{}])(.*?)([\[\]{}])/', $input, $matches, PREG_SET_ORDER);
  foreach($matches as $match) {
    $var[] = explode('|', $match[2]);
  foreach($var as $k=>$v) {
    if($k>0) {
      $a .= "<area shape=\"".$v[0]."\" coords=\"".$v[1]."\" href=\"".$v[2]."\" alt=\"".$v[3]."\">";
  $output = "<div><div><map name=\"".$var[0][1]."\">".$a."</map></div><p><img src=\"".$var[0][0]."\" width=\"".$var[0][2]."\" height=\"".$var[0][3]."\" alt=\"".$var[0][1]."\" usemap=\"#".$var[0][1]."\"></p></div>";
  return $output;


It would be very nice if u would report any bugs here. Thanks.

  • (reported by Benutzer:TeamChaos) = I'm sorry i fogot ONE (1) little point in the code. By effect just one Link was created. I fixed this. Source above corrected.


It would be nice too if u could post any feedback, where ur using my extension etc, in this discussions-page. Thanks.


Steven Rose