- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : w:Help:ImageMap。
イメージマップ (ImageMap) 拡張機能を使うことで、クライアントサイドでページにクリッカブル・イメージマップを入れることができます。
既に画像の挿入のしかたがわかっているなら、複数のページへリンクする、多角形、長方形、円形の領域を画像に追加する機能を使うことができます。
ソフトウェア側でHTMLの<map>や<area>のタグを吐き出すので、イメージマップを理解できるウェブブラウザを使えば、このマップが利用できます。
使い方[]
この機能は、<imagemap></imagemap>タグとタグ内で指定された構文により動作します。 Further lines are split into tokens, separated by whitespace. The function of each line is determined by the first token in the line. All coordinates are in relation to the full-size image, not the visible image.
以下に、簡単な例を示します。
<imagemap> 画像:Imagemap_sample.png|それぞれのアイコンをクリックしてみましょう。 # コメント # poly(多角形)は、rect(長方形)やcircle(円形)の前に記述しなければなりません。 poly 69 10 60 50 15 55 50 83 40 130 80 105 120 130 143 55 95 50 [[w:ja:Fandom]] rect 162 14 280 130 [[ヘルプ:保護]] circle 81 213 62 [[w:ja:メインページ]] default [[ヘルプ:FAQ|FAQ]] desc bottom-right </imagemap>
- 一行目
- 一行目では必ずイメージマップで使用する画像の指定を行ってください。具体的には、通常の画像使用で使われるフォーマット(たとえば、[[画像:Sample.png|thumb|right|200px|test]])から"[["と"]]"を外した形で指定します(前の例であれば、画像:Sample.png|thumb|right|200px|test)。
- マッピング
- 画像中のどのエリアにどこへのリンクを張るか、座標を指定してを決めます。座標は、画像の一番左上が (0,0) になります。座標の指定は、拡大縮小後ではなく元の画像の大きさに対して行ってください。
- poly(多角形)
- 指定された座標を順に直線でつないだ多角形です。文法は "poly <X座標> <Y座標> <X座標> <Y座標> <X座標> <Y座標> <X座標> <Y座標> ..... [[リンク]]" となっていて、一番最初の座標の組から順にそれぞれの座標を直線でつないだ多角形型のリンクが作成されます。上の例では、星の頂点とへこんでいる部分を順に指定することで星型のリンクを作成しています。このリンクは、下の二つのリンク(rectとcircle)より先に指定してください。
- rect(長方形)
- 長方形型です。文法は "poly <左上X座標> <左上Y座標> <右下X座標> <右下Y座標> [[リンク]]" となっていて、最初に指定された座標を長方形の左上の頂点、次に指定された座標を長方形の右下の頂点とした形のリンクが作成されます。
- circle(円形)
- 円型です。文法は "circle <円の中心のX座標> <円の中心のY座標> <円の半径>" となっていて、最初に指定された座標を中心とし次に指定された値を半径とする円形のリンクが作成されます。
- default
- 上の三つで指定されていないエリアをクリックした際のリンクを決定します。未指定の場合はリンク無しになります。
- desc
- イメージマップで使用されている画像の画像情報ページへのリンクを置くかどうか、置く場合のリンクの位置を決定します。指定できる値としては、"top-right"(右上)、"bottom-right"(右下)、"bottom-left"(左下)、 "top-left"(左上)、 none(無し)の五つで、none以外が指定されると青地に白抜きの"i"というアイコンが指定された位置に現れ、そのアイコンをクリックすると画像の情報ページ飛ぶことができます。未指定の場合は bottom-right がデフォルトとして適用されます。
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 [[Page title|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. If no explicit link description is given, the page title will be used.
関連情報[]
- 詳細は、MW:Extension:ImageMap/jaをご覧ください。
- Example page for how to format an image map.
- ウィキメディア・コモンズの Image map resources (英語)
- http://maschek.hu/imagemap/imgmap/ - Wiki用の文字列が使えるオンラインのイメージマップエディタ
- A graphical tool to determine the coordinates of an image map by Dapete at MetaWiki
その他のヘルプとフィードバック[]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。