Difference between revisions of "Underrail Wiki:Imagemap guide"
m (category) |
|||
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. | + | 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. |
Revision as of 12:29, 13 October 2020
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.
Syntax
See https://www.mediawiki.org/wiki/Extension:ImageMap for all the details.
poly x y x y x y [[wikilink]]
(with as many pairs of xy coordinates as necessary) for precise polygon shapes. Ideally use this to define link regions.circle x y radius [[wikilink]]
for simple circles if you're too lazy for polygons. Just a spot in the center and a radius.rect x y x y [[wikilink]]
(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.