Registered User mNo edit summary |
Registered User (Merge articles) |
||
Line 3: | Line 3: | ||
The [[Template:ImageMap|ImageMap]] template is used '''to enhance images with dynamic contents''' (explanations and links) using '''image maps''' (aka "clickable images"). An image map is a list of coordinates in an image, that links areas of the image to multiple destinations. In the STM32 MPU wiki, the image maps rely on: | The [[Template:ImageMap|ImageMap]] template is used '''to enhance images with dynamic contents''' (explanations and links) using '''image maps''' (aka "clickable images"). An image map is a list of coordinates in an image, that links areas of the image to multiple destinations. In the STM32 MPU wiki, the image maps rely on: | ||
* the MediaWiki ImageMap extension<ref>[https://www.mediawiki.org/wiki/Extension:ImageMap MediaWiki Extension:ImageMap]</ref> | * the MediaWiki ImageMap extension<ref>[https://www.mediawiki.org/wiki/Extension:ImageMap MediaWiki Extension:ImageMap]</ref> | ||
* the | * the MediaWiki:Imagemap-Highlight.js script, embedded in the ST BlueSpice extension | ||
Usage: <nowiki>{{</nowiki>ImageMap | File:{{HighlightParam|<filename>}}.{{HighlightParam|<extension>}} <nowiki>{{</nowiki>!}} {{HighlightParam|<options>}} <nowiki>{{</nowiki>!}} {{HighlightParam|<caption>}} | Usage: <nowiki>{{</nowiki>ImageMap | File:{{HighlightParam|<filename>}}.{{HighlightParam|<extension>}} <nowiki>{{</nowiki>!}} {{HighlightParam|<options>}} <nowiki>{{</nowiki>!}} {{HighlightParam|<caption>}} | ||
Line 9: | Line 9: | ||
}} | }} | ||
Where: | Where: | ||
* {{HighlightParam|<filename>}}, {{HighlightParam|<extension>}}, {{HighlightParam|<options>}} and {{HighlightParam|<caption>}} are defined in the [[Contributors:Images|images help]] page | * {{HighlightParam|<filename>}}, {{HighlightParam|<extension>}}, {{HighlightParam|<options>}} and {{HighlightParam|<caption>}} are defined in the [[contributor-manual:Contributors:Images|images help]] page | ||
* {{HighlightParam|<list of coordinates>}} are the coordinates of forms (rectangles, circles...) in the image | * {{HighlightParam|<list of coordinates>}} are the coordinates of forms (rectangles, circles...) in the image | ||
* {{HighlightParam|<list of explanations and links>}} are the explanations and links associated with these forms | * {{HighlightParam|<list of explanations and links>}} are the explanations and links associated with these forms | ||
Line 44: | Line 44: | ||
* Do not use <code><nowiki><br></nowiki></code>, but <code><nowiki><br/></nowiki></code> in image maps | * Do not use <code><nowiki><br></nowiki></code>, but <code><nowiki><br/></nowiki></code> in image maps | ||
}} | }} | ||
==Maintenance== | |||
This template is a template common to all ST wikis. <br> | |||
Modifications must be done into the [[stwikimodel:Template:ImageMap|WikiModel]]. They must be reviewed by all ST wikis maintainers.<br> | |||
When approved, the template can be pushed/merged towards all ST wikis. | |||
==References== | ==References== |
Latest revision as of 18:24, 8 July 2021
1. Usage[edit source]
The ImageMap template is used to enhance images with dynamic contents (explanations and links) using image maps (aka "clickable images"). An image map is a list of coordinates in an image, that links areas of the image to multiple destinations. In the STM32 MPU wiki, the image maps rely on:
- the MediaWiki ImageMap extension[1]
- the MediaWiki:Imagemap-Highlight.js script, embedded in the ST BlueSpice extension
<filename>.<extension> {{!}} <options> {{!}} <caption> <list of coordinates> <list of explanations and links> }}Usage: {{ImageMap | File:
Where:
- <filename>, <extension>, <options> and <caption> are defined in the images help page
- <list of coordinates> are the coordinates of forms (rectangles, circles...) in the image
- <list of explanations and links> are the explanations and links associated with these forms
2. Basic examples[edit source]
You type |
{{ImageMap | File:Image_map_example.png {{!}} frame {{!}} center {{!}} Add your text legend here
rect 160 2 248 77 [https://www.st.com/content/st_com/en.html Rectangle example: external link to STMicroelectronics]
poly 292 228 312 187 387 188 407 229 386 271 313 269 292 228 [[Contributors:Fake article | Polygon example: internal link to "Fake article"]]
circle 47 225 44 [[#Fake anchor | Circle example: an explanation about this area]]
poly 87 155 129 105 120 96 160 93 162 130 152 125 108 180 83 159 83 160 [[Contributors:Fake article | Polygons example: internal link to "Fake article"]]
poly 137 225 162 199 163 212 253 212 252 243 163 242 163 253 137 225 [[Contributors:Fake article | Polygons example: internal link to "Fake article"]]
poly 261 110 300 162 294 167 290 168 330 176 334 140 334 137 325 144 283 88 259 106 [[Contributors:Fake article | Polygons example: internal link to "Fake article"]]
}}
|
---|---|
You get |
![]() Add your text legend here |
3. Maintenance[edit source]
This template is a template common to all ST wikis.
Modifications must be done into the WikiModel. They must be reviewed by all ST wikis maintainers.
When approved, the template can be pushed/merged towards all ST wikis.
4. References[edit source]
5. Code[edit source]
Error: Must specify an image in the first line.