Help:Composite images
From Eugene Neighbors
{{#if: Help|{{#if:|Other languages:}} Template:H-langs:
{{#if: Help||}}|{{#if:|Other languages:}} Template:H-langs: {{#if: Help||}}}} 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:
Image:Map South Holland.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
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)
[edit] See also
{{#if: Help|{{#if: Help|Template:Ph:Composite images}}
[edit] Links to other help pages
- Help contents (all help pages)
- Meta | Wikinews | Wikipedia | Wikiquote | Wiktionary | commons: | mw: | b: | s:
- Versions of this help page (for other languages see below)
- Meta | Wikinews | {{#if:|{{#if:Wikipedia|Wikipedia|w:Help:Composite_images#}}|{{#if:Wikipedia|Wikipedia|w:Help:Composite_images}}}} | Wikiquote | Wiktionary
- Links to this page from Meta (int) Meta (ext) Wikipedia MediaWiki
- Reading
- Go | Search | Stop words | URL | Namespace | Page name | Section
- Backlinks | Link | Piped link | Interwiki link | Redirect | Category | Image page
- Logging in and preferences
- Logging in | Preferences | User style
- Editing
- Advanced editing | Editing FAQ | Editing toolbar | Export | Import
- Editing tips and tricks | Editing shortcuts
- Tracking changes
- Recent changes (enhanced) | Related changes | Watching pages | Diff
- Page history | Edit summary | User contributions | Minor edit | Patrolled edit
- Style & formatting
- Wikitext examples | Wikitext reference | Reference card
- HTML in wikitext | HTML elements
- List | Table | Sorting
- Special input and output
- Inputbox | Special characters | Displaying a formula | Images and other uploaded files | EasyTimeline
- Advanced functioning
- Template | Advanced templates | Parser function | ParserFunctions | Parameter default | Variable | Magic word | System message | Substitution
- Array | Calculation
- Page management
- Starting a new page | Renaming (moving) a page | Maintenance | Merging and moving pages | Protecting pages
- Resolving disputes | Deleting a page
- Special pages
- Talk page | Testing | Sandbox
- Lists of resources
- Lists of Categories | Copyrights | Infobox
- Redirect | Reference Desk | Shortcuts | Stub types
Other languages: Template:H-langs:Composite images |{{#if: Help|Template:Ph:Composite images}}
[edit] Links to other help pages
- Help contents (all help pages)
- Meta | Wikinews | Wikipedia | Wikiquote | Wiktionary | commons: | mw: | b: | s:
- Versions of this help page (for other languages see below)
- Meta | Wikinews | {{#if:|{{#if:Wikipedia|Wikipedia|w:Help:Composite_images#}}|{{#if:Wikipedia|Wikipedia|w:Help:Composite_images}}}} | Wikiquote | Wiktionary
- Links to this page from Meta (int) Meta (ext) Wikipedia MediaWiki
- Reading
- Go | Search | Stop words | URL | Namespace | Page name | Section
- Backlinks | Link | Piped link | Interwiki link | Redirect | Category | Image page
- Logging in and preferences
- Logging in | Preferences | User style
- Editing
- Advanced editing | Editing FAQ | Editing toolbar | Export | Import
- Editing tips and tricks | Editing shortcuts
- Tracking changes
- Recent changes (enhanced) | Related changes | Watching pages | Diff
- Page history | Edit summary | User contributions | Minor edit | Patrolled edit
- Style & formatting
- Wikitext examples | Wikitext reference | Reference card
- HTML in wikitext | HTML elements
- List | Table | Sorting
- Special input and output
- Inputbox | Special characters | Displaying a formula | Images and other uploaded files | EasyTimeline
- Advanced functioning
- Template | Advanced templates | Parser function | ParserFunctions | Parameter default | Variable | Magic word | System message | Substitution
- Array | Calculation
- Page management
- Starting a new page | Renaming (moving) a page | Maintenance | Merging and moving pages | Protecting pages
- Resolving disputes | Deleting a page
- Special pages
- Talk page | Testing | Sandbox
- Lists of resources
- Lists of Categories | Copyrights | Infobox
- Redirect | Reference Desk | Shortcuts | Stub types
Other languages: Template:H-langs:Composite images }}
