Help:Composite images

From Meta, a Wikimedia project coordination wiki
(Redirected from Composite images)
Jump to: navigation, search
MediaWiki Handbook: Contents, Readers, Editors, Moderators, System admins +/-

Texts (also with links) and images can be positioned such that they partly cover an image with code like:

<div style="position: relative">[[Image:Map South Holland.png]]
<div style="position: absolute; left: 244px; top: 67px">[[Image:Tst.png]]</div>
<div style="position: absolute; left: 249px; top: 72px">[[Image:Tst.png]]</div>
<div style="position: absolute; left: 264px; top: 112px">[[Image:Tst.png]]</div>
<div style="position: absolute; left: 10px; top: 10px">[[Image:Text North Sea transparent.png]]</div>
<div style="position: absolute; left: 10px; top: 50px">
{| style="background:transparent"
|- 
|[[w:en:South Holland|South Holland]] (Netherlands)
|}
</div>
</div>

giving:

Map South Holland.png
Tst.png
Tst.png
Tst.png
Text North Sea transparent.png
South Holland (Netherlands)

This can be used for locator maps.

As demonstrated, the small images can also cover each other, so the order in which they are listed matters.

Example where all map labels are superimposed:

<div style="position: relative">[[Image:Zeeuws Vlaanderen.png]]
<div style="position: absolute; left: 5px; top: 25px">
{| style="background:transparent"
|- 
|[[w:en:Sluis|Sluis]]
|}
</div>
<div style="position: absolute; left: 50px; top: 40px">
{| style="background:transparent"
|- 
|[[w:en:Terneuzen|Terneuzen]]
|}
</div>
<div style="position: absolute; left: 100px; top: 25px">
{| style="background:transparent"
|- 
|[[w:en:Hulst|Hulst]]
|}
</div>
</div>

gives

Zeeuws Vlaanderen.png
Sluis
Terneuzen
Hulst

In starmaps:

<div style="position: relative">[[Image:Cassiopeia constellation map.png|300px]]

<div style="position: absolute; left: 115px; top: 140px">[[Image:Locator Dot2.gif]]</div>
<div style="position: absolute; left: 140px; top: 120px">
{| style="background:transparent"
|- 
|[[w:en:Gamma Cassiopeiae-variabe|Gamma Cassiopeiae-variabe]]<br>(Cassiopeia)
|}
</div>
</div>
Cassiopeia constellation map.png
Locator Dot2.gif
Gamma Cassiopeiae-variabe
(Cassiopeia)

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.

This has the advantage that labels can be linked, and that it is much easier to edit the map with regard to:

  • adding, deleting, moving, and changing symbols for e.g. towns
  • adding, deleting, moving, and changing texts and changing their fonts
  • changing the background map to another version, keeping what is overlaying it

Note that the result also depends on user settings such as:

  • character size (as much as possible, avoid overlaps, even if the user uses a large font)
  • whether the user uses a background color for links (these may override the background "transparent")
  • 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)

See also[edit]


+/-

Links to other help pages[edit]

Help contents
Meta · Wikinews · Wikipedia · Wikiquote · Wiktionary · Commons: · Wikidata · MediaWiki · Wikibooks · Wikisource · MediaWiki: Manual · Google
Versions of this help page (for other languages see further)
What links here on Meta or from Meta · Wikipedia · MediaWiki
Reading
Go · Search · Stop words · Namespace · Page name · Section · Backlinks · Redirect · Category · Image page · Special pages · Printable version
Tracking changes
Recent changes (enhanced) | Related changes · Watching pages · Diff · Page history · Edit summary · User contributions · Minor edit · Patrolled edit
Logging in and preferences
Logging in · Preferences · User style
Editing
Starting a new page · Advanced editing · Editing FAQ · Edit toolbar · Export · Import · Shortcuts · Edit conflict · Page size
Referencing
Links · URL · Piped links · Interwiki linking · Footnotes
Style and formatting
Wikitext examples · CSS · Reference card · HTML in wikitext · Formula · List · Table · Sorting · Colors · Images and file uploads
Fixing mistakes
Show preview · Testing · Reverting edits
Advanced functioning
Expansion · Template · Advanced templates · Parser function · Parameter default · Variable · System message · Substitution · Array · Calculation · Embed page
Others
Special characters · Renaming (moving) a page · Preparing a page for translation · Talk page · Signatures · Sandbox · Legal issues for editors
Languages: English