https://www.tfcmud.com/wiki/index.php?action=history&feed=atom&title=Help%3AComposite_images
Help:Composite images - Revision history
2026-05-12T01:55:43Z
Revision history for this page on the wiki
MediaWiki 1.36.1
https://www.tfcmud.com/wiki/index.php?title=Help:Composite_images&diff=216&oldid=prev
Tynian: 1 revision: Import helps
2011-01-10T23:24:20Z
<p>1 revision: Import helps</p>
<p><b>New page</b></p><div>{{h:h}}<br />
Texts (also with links) and images can be positioned such that they partly cover an image with code like:<br />
<br />
<pre><div style="position: relative">[[Image:Map South Holland.png]]<br />
<div style="position: absolute; left: 244px; top: 67px">[[Image:Tst.png]]</div><br />
<div style="position: absolute; left: 249px; top: 72px">[[Image:Tst.png]]</div><br />
<div style="position: absolute; left: 264px; top: 112px">[[Image:Tst.png]]</div><br />
<div style="position: absolute; left: 10px; top: 10px">[[Image:Text North Sea transparent.png]]</div><br />
<div style="position: absolute; left: 10px; top: 50px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:South Holland|South Holland]] (Netherlands)<br />
|}<br />
</div><br />
</div><br />
</pre><br />
<br />
giving:<br />
<br />
<div style="position: relative">[[Image:Map South Holland.png]]<br />
<div style="position: absolute; left: 244px; top: 67px">[[Image:Tst.png]]</div><br />
<div style="position: absolute; left: 249px; top: 72px">[[Image:Tst.png]]</div><br />
<div style="position: absolute; left: 264px; top: 112px">[[Image:Tst.png]]</div><br />
<div style="position: absolute; left: 10px; top: 10px">[[Image:Text North Sea transparent.png]]</div><br />
<div style="position: absolute; left: 10px; top: 50px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:South Holland|South Holland]] (Netherlands)<br />
|}<br />
</div><br />
</div><br />
<br />
This can be used for locator maps.<br />
<br />
As demonstrated, the small images can also cover each other, so the order in which they are listed matters.<br />
<br />
Example where all map labels are superimposed:<br />
<br />
<pre><br />
<div style="position: relative">[[Image:Zeeuws Vlaanderen.png]]<br />
<div style="position: absolute; left: 5px; top: 25px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Sluis|Sluis]]<br />
|}<br />
</div><br />
<div style="position: absolute; left: 50px; top: 40px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Terneuzen|Terneuzen]]<br />
|}<br />
</div><br />
<div style="position: absolute; left: 100px; top: 25px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Hulst|Hulst]]<br />
|}<br />
</div><br />
</div><br />
</pre><br />
gives<br />
<br />
<div style="position: relative">[[Image:Zeeuws Vlaanderen.png]]<br />
<div style="position: absolute; left: 5px; top: 25px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Sluis|Sluis]]<br />
|}<br />
</div><br />
<div style="position: absolute; left: 50px; top: 40px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Terneuzen|Terneuzen]]<br />
|}<br />
</div><br />
<div style="position: absolute; left: 100px; top: 25px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Hulst|Hulst]]<br />
|}<br />
</div><br />
</div><br />
<br />
In starmaps:<br />
<pre><br />
<div style="position: relative">[[Image:Cassiopeia constellation map.png|300px]]<br />
<br />
<div style="position: absolute; left: 115px; top: 140px">[[Image:Locator Dot2.gif]]</div><br />
<div style="position: absolute; left: 140px; top: 120px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Gamma Cassiopeiae-variabe|Gamma Cassiopeiae-variabe]]<br>(Cassiopeia)<br />
|}<br />
</div><br />
</div><br />
</pre><br />
<div style="position: relative">[[Image:Cassiopeia constellation map.png|300px]]<br />
<br />
<div style="position: absolute; left: 115px; top: 140px">[[Image:Locator Dot2.gif]]</div><br />
<div style="position: absolute; left: 140px; top: 120px"><br />
{| style="background:transparent"<br />
|- <br />
|[[w:en:Gamma Cassiopeiae-variabe|Gamma Cassiopeiae-variabe]]<br>(Cassiopeia)<br />
|}<br />
</div><br />
</div><br />
Thus all labels and all standard symbols (such as a dot for a town) can be superimposed on a map, and the map image itself needs to show only the curves for coasts, rivers, boundaries, roads, railways, etc., possibly with areas filled with colors.<br />
<br />
This has the advantage that labels can be linked, and that it is much easier to edit the map with regard to:<br />
*adding, deleting, moving, and changing symbols for e.g. towns<br />
*adding, deleting, moving, and changing texts and changing their fonts<br />
*changing the background map to another version, keeping what is overlaying it<br />
<br />
Note that the result also depends on user settings such as:<br />
*character size (as much as possible, avoid overlaps, even if the user uses a large font) <br />
*whether the user uses a background color for links (these may override the background "transparent")<br />
*whether images are shown with an edge, e.g. because of being a link (for a separate image this is a minor thing, for an image inside another image this looks quite different)<br />
<br />
==See also==<br />
*[[w:Template:Annotated image]]<br />
*{{tiw|Location map}}<br />
*[[Help:Navigational image]]<br />
{{h:f|enname=Composite images}}</div>
Tynian