Underrail Wiki:Imagemap guide - Revision history

Wikiman at 14:49, 18 October 2020

2020-10-18T14:49:48Z

Wikiman at 17:29, 13 October 2020

2020-10-13T17:29:59Z

Wikiman: category

2020-10-13T17:27:43Z

Wikiman: new feature for editors

2020-10-13T17:25:46Z

new feature for editors

New page

We now have support for imagemaps! With this we can create imagemaps of each [[Global Map]] image with clickable links on each zone, leading into article or screenshot image of that zone. This will be a handy visual way of navigating through location articles. The work-intensive part is defining coordinates for all the link shapes. Hundreds of zones on the global maps, all of them polygon-shaped. There are various online tools to help with this, for example https://imagemap.org/

Of course, imagemaps can also be used on anything else you want.

== Syntax ==
See https://www.mediawiki.org/wiki/Extension:ImageMap for all the details.
* <code><nowiki>poly x y x y x y [[wikilink]]</nowiki></code> (with as many pairs of xy coordinates as necessary) for precise polygon shapes. Ideally use this to define link regions.
* <code><nowiki>circle x y radius [[wikilink]]</nowiki></code> for simple circles if you're too lazy for polygons. Just a spot in the center and a radius.
* <code><nowiki>rect x y x y [[wikilink]]</nowiki></code> (upper left, lower right) for rectangles. Not a very good option for global map work since the zones are rotated 45 degrees.
* The below SGS imagemap has examples of all.
* The coordinates map to the full size source image and automatically scale down when the image is thumbnailed into smaller size.
* Tip: you can visually check the shape of clickable areas on imagemaps by navigating links on the page with tab and shift+tab.

== Example ==
<imagemap>
File:Global Map SGS.png | 300px | 663px | left | thumb | Click on any zone to see the map image. Click on the arrows to move to a different map.
poly 161 12 167 14 167 37 181 42 181 22 187 24 175 2 [[Lower Underrail]]
poly 90 70 90 96 132 117 194 86 194 61 152 40 [[File:StationAlpha-Level2.png]]
circle 145 155 40 [[File:StationAlpha-Level3.png]]
circle 145 230 40 [[File:StationAlpha-Level4.png]]
circle 137 308 42 [[File:StationAlpha-Level5.png]]
circle 137 387 42 [[File:StationAlpha-Level6.png]]
rect 91 430 182 500 [[File:StationAlpha-Level7.png]]
rect 86 516 173 575 [[File:StationAlpha-Level8.png]]
poly 128 593 128 618 180 645 202 634 203 607 152 582 [[File:StationAlpha-Level9.png]]
poly 128 643 128 658 151 658 151 652 163 646 163 642 151 636 133 645 [[South Gate Station Docks]]
poly 192 644 192 648 204 654 204 660 226 660 227 644 222 647 204 638 [[Lower Caves]]
</imagemap>

@@ Line 1: / Line 1: @@
-We now have support for imagemaps! With this we can create imagemaps of each [[Global Map]] image with clickable links on each zone, leading into article or screenshot image of that zone. This will be a handy visual way of navigating through location articles. The work-intensive part is defining coordinates for all the link shapes. Hundreds of zones on the global maps, all of them polygon-shaped. Any image editor can be used to get the coordinates, but there are also various online tools to help with this. For example https://imagemap.org/ offers easy creation of imagemap link shapes but will require converting from html syntax to wiki syntax.
+__FORCETOC__
 Of course, imagemaps can also be used on anything else you want.
@@ Line 28: / Line 29: @@
 </imagemap>
 [[Category:Community]]

← Older revision		Revision as of 17:29, 13 October 2020
Line 1:		Line 1:
−	We now have support for imagemaps! With this we can create imagemaps of each [[Global Map]] image with clickable links on each zone, leading into article or screenshot image of that zone. This will be a handy visual way of navigating through location articles. The work-intensive part is defining coordinates for all the link shapes. Hundreds of zones on the global maps, all of them polygon-shaped. ~~There~~ are various online tools to help with this~~, for~~ example https://imagemap.org/	+	We now have support for imagemaps! With this we can create imagemaps of each [[Global Map]] image with clickable links on each zone, leading into article or screenshot image of that zone. This will be a handy visual way of navigating through location articles. The work-intensive part is defining coordinates for all the link shapes. Hundreds of zones on the global maps, all of them polygon-shaped. Any image editor can be used to get the coordinates, but there are also various online tools to help with this. For example https://imagemap.org/ offers easy creation of imagemap link shapes but will require converting from html syntax to wiki syntax.

	Of course, imagemaps can also be used on anything else you want.		Of course, imagemaps can also be used on anything else you want.

← Older revision		Revision as of 17:27, 13 October 2020
Line 27:		Line 27:
	poly 192 644 192 648 204 654 204 660 226 660 227 644 222 647 204 638 [[Lower Caves]]		poly 192 644 192 648 204 654 204 660 226 660 227 644 222 647 204 638 [[Lower Caves]]
	</imagemap>		</imagemap>
		+
		+
		+	[[Category:Community]]