Extension:ImageMap/ja

ImageMap拡張機能を使うと、クリックできるイメージマップをつくることができます. イメージマップは、特定の画像内にある座標のリストで、それらによって指定された各領域それぞれに対し異なるリンク先にハイパーリンクが設定できます（画像の領域全体が単一の宛先に対しリンクされている通常の画像リンクとは対照的です）. 例えば、世界地図では、国ごとにその国に関する詳細な情報へのハイパーリンクが張られていることがあります. イメージマップは、画像を個別の画像ファイルに分割することなく、画像のさまざまな部分に対し簡単にリンクを設定する方法を提供することを目的としています.

例


説明文のない単純な例
上の例では、図内のどの部分をクリックしても Main Page にリンクしています. 画像に関するより詳しい情報を見るには、青い "i" のアイコン をクリックしてください. この拡張機能を使わずにこのようにリンクが設定された画像をつくるには、 のようなhtmlコードを記します.



説明文付きの複雑な例
この例では、幅500ピクセル、高さ250ピクセルのサムネイルを表示します. の大きさは 9,600 x 4800 ピクセルです. 各頂点は、元画像内の点を指す座標をピクセル単位で指定します. 例えば、「ユダ」（画像の右端から2番目）をとり囲む多角形の頂点は、水平座標（左からのピクセル数で計測）が1$、垂直座標（上からのピクセル数で計測）が2$となり、500×250 サイズのサムネイル表示範囲からは大きく外れているものの、9600×4800の元画像では範囲内に入っています. なお、「シモン」（画像右端）をとり囲む多角形の頂点のうち、座標 の頂点は、元画像の範囲9,600×4,800の外にあることに注意してください.

上の例は、クリックする場所によって、さまざまなページにリンクしています. 画像の詳細を確認するには、四角形が2つ重なったアイコンをクリックしてください.



書式の説明
The contents of an tag consists of blank lines, comments (starting with #) and logical lines.

The first logical line specifies the image to be displayed. This must be in the same format as an ordinary MediaWiki image link (see images help), except without the enclosing  and   markup.

If the first line specifies a " " or " " image, then the first line's caption and any alt parameter are treated as the image's caption and alt text in the usual way; otherwise, the first line's alt parameter (or, if absent, any caption) specifies the image's alt text.

In neither case does the image itself have title text (often used for tooltips); any title text is taken from the regions described in later lines.

Further lines are split into tokens, separated by whitespace. The function of each line is determined by the first token in the line.

A coordinate consists of two tokens. The first token is the horizontal (X) position and the second token is the vertical (Y) position. ''' All coordinates are according to the full-size image, not the visible image. ''' The X and Y tokens should be specified as distance from left edge (horizontal pixel count) and distance from top (vertical pixel count) of the full-size image.


 * desc
 * Specifies the location of a blue "i" icon Desc-i.svg, which links to the image description. Possible values:,   (default),  ,  ,  . This parameter is ignored for " " or " " images, which instead employ the usual double-rectangle icon Magnify-clip.png.


 * poly
 * A polygon. The coordinates of the vertices are given, followed by a link in square brackets.


 * rect
 * A rectangle. The parameters are the coordinates of the top-left and bottom-right corners, followed by a title to link to in square brackets.
 * 例


 * circle
 * A circle. The first two parameters are the coordinates of the center, the third is the radius. The coordinates are followed by a link in square brackets.


 * default
 * This gives the default link, where no other regions are specified.

All coordinates are specified relative to the source image. The image can be scaled using thumbnail syntax, in which case the image map coordinates will be automatically scaled as well.

All links are given in either the form Page title or description. In the latter case, the part after the pipe "|" becomes the title attribute of the link—in most browsers, it will pop up as a tooltip when the user hovers over it; the part after the pipe also becomes the alt text for the link. If no explicit link description is given, the page title is used.

Areas which overlap give precedence to the first link listed.

インストール
Make sure that uploads and ImageMagick are installed:


 * Troubleshooting
 * 1) Check to see if your php DOM is turned on. You may need to install it if it is not.
 * 2) Check whether  is installed, since this extension relies on /usr/bin/convert for the resizing. If it is not present, you could get a page with only XML errors (tip: use the back-button in the browser, because you can still edit the page).
 * 3) On OVH mutualized hosting   should be like:

Composer
You can also install this extension using built-in support.

composer require mediawiki/image-map @dev

Usage with templates, magic words, or parser functions
If you want this extension (as with most tag extensions) to parse template parameters, magic words, or parser functions, you will need to use  syntax, such as w:Template:Click did. In this case the vertical bar  must be replaced by a template , where the source text of the template is   (except when they appear inside links or parameters).


 * Example - standard form:


 * Example - with variable :


 * Example – Modified to accept an input parameter to control image size:

These modifications allow the template size to be adjusted on the edited (target) page and eliminate the need to create duplicate templates of various image sizes.

Where  is the input parameter “1” and a default image size of 640px.

Note: the input parameter requires a text string ending with “px” to function properly.

For example, calling a template  will display the template at 400 pixels.

 To convert the standard (existing) image maps to this optional format: 
 * Replace the initial with
 * Add  after the image name (change the default image size to match the currently existing size).
 *  Note: By changing the default size (640px in this example) to the current image size, none of the existing template calls will have to be modified and will display correctly. Existing template calls can still be modified later by using the input parameter. 


 * Replace the final with   (the trailing braces).



関連項目

 * Instructions
 * A simple guide on how to use the Image Map editor with the ImageMap extension can be found at ImageMapEdit Howto on Meta-Wiki.
 * A detailed guide for using the maschek image map editor can be found at this site.
 * Wikimedia Commons also has a resource page on image maps: Commons:Image map resources
 * Existing image maps examples: w:Category:Wikipedia image maps


 * Wiki tools
 * meta:User:Dapete/ImageMapEdit - ImageMapEdit script, a graphical tool to determine the coordinates that can be installed on any wiki.


 * Online tools
 * http://www.maschek.hu/imagemap/imgmap Online image map editor, supports all shapes, Extension:ImageMap compatible.
 * http://www.image-maps.com/index.php? Basic on-line image mapper.
 * http://summerstyle.github.io/summer/ - Open-source interactive online image mapper


 * Similar functionalities
 * - working with diagrams and drawings