Difference between revisions of "Underrail Wiki:Imagemap guide"

From Underrail Wiki
Jump to navigation Jump to search
 
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__
 +
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 http://maschek.hu/imagemap/imgmap/ offers easy creation of imagemap link shapes and supports wiki imagemap 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.
Line 28: Line 29:
 
</imagemap>
 
</imagemap>
  
 +
{{clear}}
 +
 +
== Future plans ==
 +
Once all the coordinate definitions for global map images are done, the plan is move those imagemaps to templates for easy utilization at multiple articles, do some CSS work on them (scale them to user's resolution), replace the gallery at [[Global Map]] and at other pages using the global map images.
 +
 +
Some far-off day in the future we may have a wiki article for each and every zone. Then the imagemaps can link into those instead of directly to zone screenshots.
 +
 +
Please drop a message at this page's talk if you have any comments, ideas, etc.
  
 
[[Category:Community]]
 
[[Category:Community]]

Latest revision as of 09:49, 18 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 http://maschek.hu/imagemap/imgmap/ offers easy creation of imagemap link shapes and supports wiki imagemap 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.

Example

Lower UnderrailFile:StationAlpha-Level2.pngFile:StationAlpha-Level3.pngFile:StationAlpha-Level4.pngFile:StationAlpha-Level5.pngFile:StationAlpha-Level6.pngFile:StationAlpha-Level7.pngFile:StationAlpha-Level8.pngFile:StationAlpha-Level9.pngSouth Gate Station DocksLower Caves
Click on any zone to see the map image. Click on the arrows to move to a different map.

Future plans

Once all the coordinate definitions for global map images are done, the plan is move those imagemaps to templates for easy utilization at multiple articles, do some CSS work on them (scale them to user's resolution), replace the gallery at Global Map and at other pages using the global map images.

Some far-off day in the future we may have a wiki article for each and every zone. Then the imagemaps can link into those instead of directly to zone screenshots.

Please drop a message at this page's talk if you have any comments, ideas, etc.