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.

Categories[edit]

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 Toolserver.org: ImageMapEdit.
  • Online image map editor, supports all shapes, Extension:ImageMap compatible: http://www.maschek.hu/imagemap/imgmap.
  • Basic on-line image mapper from mgwalk.com: http://www.image-maps.com.
  • 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.).

<imagemap>
Image:Foo.jpg
poly
poly 
rect 
circle 
</imagemap>

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.

Generate an image map using GIMP[edit]

This process involves 3 steps:

  1. Downloading the image and opening it in GIMP
  2. Generating the coordinate data
  3. Extracting the coordinate data and putting it in a wiki-style image map

The steps are described in further detail below. Note that there are two variations to step 2 (step 2a and step 2b) as well as corresponding variations to step 3 (step 3a and step 3b)

Note that GIMP instructions are based on GIMP 2.8.10 which is the latest GIMP as of time of writing

Step 1: Download the original image to your computer[edit]

  • Click on the image in the article. This should take you to the "File" page
  • Click on the image in the "File" page. This should take you to the original which should have a url starting with https://upload.wikimedia.org/wikipedia/commons
  • Save the file to your computer
  • Open the file in GIMP

Step 2a: Generating through the ImageMap tool[edit]

The ImageMap tool is easier to use. Note that it does require manually drawing each shape, which can be error-prone and cumbersome -- especially if there are a lot of irregular shapes.

  • Using the menu bar, select Filters -> Web -> ImageMap
  • Pick a shape from the left-hand bar: rect, circle, poly
  • Draw the appropriate shapes on your image
  • When finished, select View -> Source

Step 3a: Extracting coordinates from the ImageMap tool[edit]

  • Copy the source to a text editor
  • For each shape, find the "shape" and "coords" attribute and place it on a separate line

Step 2b: Generating through the Fuzzy-select approach[edit]

The Fuzzy-select approach is more difficult to use. However it has the advantage of quickly drawing extremely accurate shapes. It is particularly useful for images with clearly defined borders, such as geographic boundaries. For an example, see https://en.wikipedia.org/w/index.php?title=Benin&oldid=618376512

  • Using the menu bar, select Tools -> Selection Tools -> Fuzzy Select. Multiple shapes will be outlined on the image
  • Open up the Path Toolbox using Windows -> Dockable Dialogs -> Paths
  • Select Select -> To Path. Note that a selection will now show up in the Path Toolbox
  • Right click on the selection and select Export Path
  • Save the file. Note that it is an SVG file

Step 3b: Extracting coordinates from the Fuzzy-select approach[edit]

  • Open the file in a text editor
  • Look for the attribute starting with "d="
  • Extract everything between the quotes to a new document
  • Replace all commas with spaces
  • Remove all initial whitespace from the lines by highlighting the entire selection and repeatedly pressing shift-tab
  • Remove all new lines (you'll need a text editor that does regular expression replacements)
  • Remove all "M"s. Note that this is the start of the path. (M means Move to)
  • Remove all "C"s. Note that this is the second point in the path (C means Curve to)
  • Replace all "Z"s with a new line. Note that Z is the termination marker. (Z means Close path)
  • You will now have each path on a single line
  • Add "poly" to the start of every line.
  • Add a temporary anchor to the end of every line. For example, [[a]] to line 1; [[b]] to line 2; etc.
  • Add the necessary <imagemap> tags as well as the first line for the file name (EX: File:A.png)
  • Copy the source to the Wikipedia Sandbox and Preview
  • Hover over each shape, and use the temporary anchors to identify each shape
  • Replace the temporary anchors with the actual anchor