Commons:Image map resources

From Wikimedia Commons, the free media repository

Jump to: navigation, 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.

Contents


[edit] Categories

[edit] Help, resources, and FAQs

  • How to Use the MediaWiki ImageMap Extension - Wikihow page.
  • mw:Extension:ImageMap
  • mw:Extension:ImageMap (McNaught)
  • mw:Extension:ImageMap (Alternate)
  • mw:Extension:ImageMapConversion - convert HTML-format image maps to wiki image maps. See mw:Extension talk:ImageMapConversion for notes on its use. This extension is not yet on Wikipedia. This extension can be found and used here: [1].
  • Image map editor from Toolserver.org: [2].
  • Online image map editor, supports all shapes, Extension:ImageMap compatible: [3].
  • Basic on-line image mapper from mgwalk.com: [4].
  • Info on image maps from the W3C: [5].
  • Clickable Image Map Maker [6]. - 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 [7]. - 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 [8]. - A free image map program.
  • GIMP [9]. - The GNU Image Manipulation Program.
  • Wikia Help:ImageMap [10]. Help from a MediaWiki-based site.
  • Wikia Help:Image maps (Star Trek Wiki) [11]. Simpler help from a MediaWiki-based site.

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

These are some short instructions for manually converting.

See this Wikia image map help link: [12]. 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.

Retrieved from "http://commons.wikimedia.org/wiki/Commons:Image_map_resources"
Personal tools