Open main menu
English  • 日本語 • 中文
此扩展已绑定在MediaWiki 1.21及以上版本 因此您不需要再次下载。 然而,您仍需要跟随提供的其他指导。
MediaWiki扩展手册
OOjs UI icon advanced.svg
ImageMap
发布状态: 稳定版
实现 Tag
描述 允許可按的HTML圖像地圖
作者 Tim Starlingtalk
最新版本 continuous updates
MediaWiki 1.23+
PHP 5.4+
数据更新
Composer mediawiki/image-map
许可协议 GNU General Public License 2.0 or later
下载
log
例子 日文維基百科上的例子
翻译ImageMap扩展如果在translatewiki.net可用
检查使用和版本矩阵。
问题 开放的工作 · 报告错误

ImageMap擴展允許在Wiki中加入可按的HTML圖像地圖(Image Map)。圖像地圖是一系列對特定圖像的座標組合,而座標圍起來的區域允許以超連結的方式連結到多個頁面。舉例來說,一張世界地圖可能會記載100多個國家,而使用者可以藉由點擊該國的區域以獲得更多資訊。圖像地圖擴展提供一個方便的方式來為圖像做細部描述,而不用將圖像分割為多個圖像。

示例Edit

沒有說明文字的簡單例子Edit

<imagemap>
Image:Example2.png|150px|alt=替代文字
default [[Main Page|前往首頁]]
</imagemap>

上面的例子不管點擊何處皆會連結到首頁。要獲取更多關於圖像的資訊,使用者只須點擊藍色i圖示   即可。若不利用此擴展,請輸入[[Image:Example2.png|150px|alt=替代文字|title=前往首頁|link=Main Page]]

帶有說明文字的複雜例子Edit

<imagemap>
Image:JoshuaReynoldsParty.jpg|thumb|center|400px|alt=Dining room with nine men seated around a table. The dinner has been finished, and a large man at the head talks and gesticulates while the others eagerly listen. The men wear wigs and clothing of late 18th century Britain, and the furniture, hangings, and chandelier are of similar vintage. A liveried servant is entering with a tray bearing two high-shouldered decanters of wine.|[[:zh:約書亞·雷諾茲|約書亞·雷諾茲]]爵士的"文學派對"。1851年由[[:en:James William Edmund Doyle|詹姆斯·威廉·埃德蒙·杜爾尼]]繪。

poly 133 343 124 287 159 224 189 228 195 291 222 311 209 343 209 354 243 362 292 466 250 463 [[:zh:塞繆爾·詹森|塞繆爾·詹森 - «詹森字典»的作者]]
poly 76 224 84 255 43 302 62 400 123 423 121 361 137 344 122 290 111 234 96 225 [[:zh:詹姆士·包斯威爾|詹姆士·包斯威爾 - 傳記作家]]
poly 190 276 208 240 229 228 247 238 250 258 286 319 282 323 223 323 220 301 200 295 [[:zh:約書亞·雷諾茲|約書亞·雷諾茲爵士 - 主人]]
poly 308 317 311 270 328 261 316 246 320 228 343 227 357 240 377 274 366 284 352 311 319 324 [[:en:David Garrick|戴維·蓋瑞克 - 演員]]
poly 252 406 313 343 341 343 366 280 383 273 372 251 378 222 409 228 414 280 420 292 390 300 374 360 359 437 306 418 313 391 272 415 [[:zh:埃德蒙·伯克|埃德蒙·伯克 - 演說家]]
rect 418 220 452 287 [[:zh:帕斯夸萊·保利|帕斯夸萊·保利 - 科西嘉革命份子]]
poly 455 238 484 253 505 303 495 363 501 377 491 443 429 439 423 375 466 352 [[:en:Charles Burney|查爾斯·伯爾奈 - 作曲家]]
poly 501 279 546 237 567 239 572 308 560 326 537 316 530 300 502 289 [[:en:Thomas Warton|托馬斯·沃頓 - 詩人]]
poly 572 453 591 446 572 373 603 351 562 325 592 288 573 260 573 248 591 243 615 254 637 280 655 334 705 396 656 419 625 382 609 391 613 453 [[:zh:奧立佛·高德史密斯|奧立佛·高德史密斯 - 作家]]
rect 450 86 584 188 [[:zh:約書亞·雷諾茲|“The Infant Academy” (1782),約書亞·雷諾茲]]
rect 286 87 376 191 [[:zh:約書亞·雷諾茲|“Puck” (1789),約書亞·雷諾茲]]
circle 100 141 20 [[:zh:約書亞·雷諾茲|未知的繪畫]]
poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 [[:en:Francis Barber|法蘭西斯·巴柏 - 家僕]]
rect 12 10 702 500 [[:en:The Club (Literary Club)|將鼠標移至各個物品上獲取資訊。]]
</imagemap>
塞繆爾·詹森 - «詹森字典»的作者詹姆士·包斯威爾 - 傳記作家約書亞·雷諾茲爵士 - 主人戴維·蓋瑞克 - 演員埃德蒙·伯克 - 演說家帕斯夸萊·保利 - 科西嘉革命份子查爾斯·伯爾奈 - 作曲家托馬斯·沃頓 - 詩人奧立佛·高德史密斯 - 作家“The Infant Academy” (1782),約書亞·雷諾茲“Puck” (1789),約書亞·雷諾茲未知的繪畫法蘭西斯·巴柏 - 家僕將鼠標移至各個物品上獲取資訊。 
約書亞·雷諾茲爵士的"文學派對"。1851年由詹姆斯·威廉·埃德蒙·杜爾尼繪。

上方的例子連接到許多頁面,取決於使用者點擊的位置。要獲取更多資訊,點擊右下角雙矩形標誌  

Syntax descriptionEdit

The contents of an <imagemap> 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 "thumb" or "frame" 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. All coordinates are according to the full-size image, not the visible image. They should be specified as distance from left edge (horizontal pixel count), distance from top (vertical pixel count).

desc 
Specifies the location of a blue "i" icon  , which links to the image description. Possible values: top-right, bottom-right (default), bottom-left, top-left, none. This parameter is ignored for "thumb" or "frame" images, which instead employ the usual double-rectangle icon  .
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.
Example
<imagemap>
Image:PolierMartinWombwellZoffany.jpg|thumb|200px|Colonel Antoine Polier
rect 269 140 344 305 [[Claude Martin]]
rect 124 147 181 298 [[Antoine Polier|Antoine-Louis Polier]]
desc none
</imagemap>
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 [[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; 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.

InstallationEdit

This extension is bundled with MediaWiki 1.21 and above. Thus you do not have to download it again.

Make sure that uploads and ImageMagick are installed:

$wgEnableUploads = true;
$wgUseImageMagick = true;
$wgImageMagickConvertCommand = "/usr/bin/convert"; 
  • 下载文件,并将其放置在您extensions/文件夹中的ImageMap目录内。
  • 将下列代码放置在您的LocalSettings.php的底部:
    wfLoadExtension( 'ImageMap' );
    
  •   完成 – 在您的wiki上导航至Special:Version,以验证扩展已成功安装。

致使用MediaWiki 1.24或更早版本的用户:

上面的说明介绍的是安装此扩展的新方法,它使用wfLoadExtension()。 如果您需要在早期版本(MediaWiki 1.24和更早版本)中安装此扩展,而不是wfLoadExtension( 'ImageMap' );,您需要使用:

require_once "$IP/extensions/ImageMap/ImageMap.php";
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 ImageMagick 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).

ComposerEdit

For MediaWiki 1.22+, you may install this extension using built-in Composer support. MediaWiki versions prior to 1.22 can use Composer via Extension:ExtensionInstaller.

composer require mediawiki/image-map @dev
Using Composer to install this extension will cause installation of the latest development version of this extension each time you do a "composer update --no-dev" command.

Usage with templates, magic words, or parser functions.Edit

If you want this extension (as with most tag extensions) to parse template parameters, magic words, or parser functions, you will need to use #tag 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
<imagemap>
Image:ExamplePlant80.png|60px|ExamplePlant
rect 0 107 294 260 [[Plants/ExamplePlant|ExamplePlant]]
desc none
</imagemap>
Example - with variable {{PAGENAME}}
{{#tag:imagemap|
Image:ExamplePlant80.png{{!}}60px{{!}}ExamplePlant
rect 0 107 294 260 [[{{PAGENAME}}/ExamplePlant|ExamplePlant]]
desc none
}}
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.

{{#tag:imagemap|
Image:Examplename.jpg {{!}}{{{1|640px}}}
rect 0 107 294 260
circle 360 114 70
poly 357 216 363 417 211
desc none
}}

Where {{{1|640px}}} 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 {{TemplateName|400px}} will display the template at 400 pixels.

To convert the standard (existing) image maps to this optional format:

  • Replace the initial <imagemap> with {{#tag:imagemap|
  • Add {{!}}{{{1|640px}}} 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 </imagemap> with }} (the trailing braces).



See alsoEdit

Instructions
Wiki tools
  • ImageMapEdit script - A graphical tool to determine the coordinates that can be installed on any wiki.
Online tools
Similar functionalities