Commons:Image map resources

From Wikimedia Commons, the free media repository
Jump to: navigation, search
Note. Commons: ('commons' followed by a colon) is a namespace for internal Commons work, and for resource pages on the Commons. See: {{resources}} and Category:Commons resources. One can search the Commons namespace via the advanced tab at Special:Search.

Image maps. Due to the PNG scaling problem it is sometimes better to use a GIF image for an image map. For more info see Commons:File types#Images.

From Category:Clickable maps: Load the image you want to make into a clickable map in the Image map editor. Then click "Polygon" and click where you want the corners of the polygon to be. Add a title for the polygon and where you want the area to link to. Then click "Polygon" again to create another clickable area. When you're all done, copy the wikicode that appears near the bottom of the page, and paste it into a new template in WikiMedia Commons.


Help, resources, and FAQs[edit]

  • Info on image maps from the W3C: [2].

Image Map Editors[edit]

  • Mcc HTML Mapper - Free and multi-platform software to create image maps for the web.
  • Image map editor from ImageMapEdit.
  • Online image map editor, supports all shapes, Extension:ImageMap compatible:
  • Basic on-line image mapper from
  • Clickable Image Map Maker - This web page allows the user to select an image file on his own local hard drive, then creates a second page using that image, and allows the user to very quickly generate the HTML code for an imagemap to be used in his own files. It also offers some handy pop-up menus to speed the process of coding the actual href. Complicated maps can be created in less than a minute (no kidding). Requires a Javascript and frames capable browser, designed and tested on a Mac using Netscape Navigator.
  • Mapedit. A WYSIWYG editor for imagemaps, available for Microsoft Windows and the X Window System. Use Mapedit to generate, or convert to, NCSA, CERN, or client-side map files.
  • Meracl ImageMap Generator - A free image map program.
  • GIMP - The GNU Image Manipulation Program.
  • Wikia Help:ImageMap - Help from a MediaWiki-based site.
  • Wikia Help:Image maps (Star Trek Wiki) - Simpler help from a MediaWiki-based site.
  • WYSIWYG Online Image Map Generator
  • Map Designer - utility to simplify creation of clickable image maps.
  • iMapBuilder = a Windows software to convert any image into clickable flash image map with clickable points, icons and mouse rollover effects.

Convert an HTML image map to a wiki image map[edit]

These are some short instructions for manually converting.

See this Wikia image map help link: [3]. Note the image map and the wikicode for it listed on the page. Here below are the essential parts of that wikicode. "Foo" can be the name of any image you intend to make into a clickable image map. Any image format can be used (GIF, PNG, JPG, etc.).


Find an image map on a web page, or create one. If the image is a free one, then upload it to the Commons to use in the wiki image map. Look at the HTML source code for the image map on the web page (View_menu/Page_source in Firefox). It will have poly, rect, and circle coordinates. Just copy those coordinates into a simple text editor such as Notepad that comes with the Windows operating system. Use the replace command to replace all the commas with spaces. There should be a single space between each number. Paste the coordinates after the poly, rect, and circle names in the above wikicode example. The poly lines must be first. Multiple poly, rect, and circle names may be needed. Make sure they start the line for each list of numbers for each clickable section of the image map. The numbers can wordwrap. Add a wikilink after each list of numbers. Either a wikilink to another page, or to a section in the page where the map will be used. To link to sections in the current page add a pound # symbol to the front of subheading titles, and then enclose the subheading title in double brackets as with any wikilink: [[#Subheading title]]. Preview or save the page, and then test the image map by clicking sections of it. Feel free to use sandboxes to test the image map too.