Difference between revisions of "Wiki:Werken met Imagemap"

From Venlo Samenwerkingswijzer
Line 16: Line 16:
 
Stap 1: Om vanuit de imagemap te linken naar een afbeelding, bijv. Definitie van governance.png, moet eerst een anker aanwezig zijn waarnaartoe gelinkt kan worden.  Het anker wordt toegevoegd voor de afbeelding.
 
Stap 1: Om vanuit de imagemap te linken naar een afbeelding, bijv. Definitie van governance.png, moet eerst een anker aanwezig zijn waarnaartoe gelinkt kan worden.  Het anker wordt toegevoegd voor de afbeelding.
 
<pre>{{Anker|Bestand=Definitie van governance.png}}[[File:Definitie van governance.png|link=|400px]]</pre>
 
<pre>{{Anker|Bestand=Definitie van governance.png}}[[File:Definitie van governance.png|link=|400px]]</pre>
: {{Fa|lightbulb}} Tip! Je kunt ook gebruik maken van het Afbeelding sjabloon. Daarmee wordt automatisch een anker gemaakt. Bijvoorbeeld:
+
: {{Fa|light-o}} Tip! Je kunt ook gebruik maken van het Afbeelding sjabloon. Daarmee wordt automatisch een anker gemaakt. Bijvoorbeeld:
 
<pre>{{Afbeelding
 
<pre>{{Afbeelding
 
|Bestand=Definitie van governance.png
 
|Bestand=Definitie van governance.png

Revision as of 18:18, 9 November 2016

Aanmaken van een Imagemap

1. Zorg dat de afbeelding die je wilt gebruiken in de bestandenlijst van de wiki staat en er een anker voor is aangemaakt.
2. Klik op de afbeelding totdat je de grote versie ervan in beeld ziet. Kopieer die url.
3. Ga naar http://maschek.hu/imagemap/imgmap/
4. Kies bovenin bij ‘select source’ voor de optie: OR an image on the internet en plak daar de url van je afbeelding.
5. Kies onder ‘image map areas’ bij Output voor Wiki imagemap
6. Kies bij ‘image map areas’ voor het groene plusje links om gebieden te gaan selecteren. De rectangle is hiervoor het makkelijkst.
voor het gemak kun je hier de zoom functie aanpassen naar gelang je wensen, zodat je fijn kunt werken.
7. Selecteer de gebieden altijd van links boven tot rechts onder. De coördinaten worden automatisch ingevuld.
8a. Indien pagina: Vul bij de Href de paginanaam in zonder _ tussen de letters. Alt is de alternatieve tekst (tekst die wordt vertoond bij mouse-over en voor slechtzienden) en kan identiek zijn als de paginanaam.
8b: Indien plaatje: Vul bij Href de paginanaam én de naam van de afbeelding in zoals bij de anker gekozen. Alt laat je leeg! Bijvoorbeeld bij Href: Afwegingskader en gereedschapskist governance/#Definitie van governance.png
9. Als je klaar bent klik je onder het plaatje op ‘Code’. Er verschijnt dan een code in beeld. Kopieer alleen de coördinaten van deze code
10. Ga naar de locatie in de wiki waar je de imagemap wilt opnemen. Gebruik vervolgens het onderstaande sjabloon en vul deze verder in.

Imagemap linken naar plaatje

Stap 1: Om vanuit de imagemap te linken naar een afbeelding, bijv. Definitie van governance.png, moet eerst een anker aanwezig zijn waarnaartoe gelinkt kan worden. Het anker wordt toegevoegd voor de afbeelding.

{{Anker|Bestand=Definitie van governance.png}}[[File:Definitie van governance.png|link=|400px]]
Tip! Je kunt ook gebruik maken van het Afbeelding sjabloon. Daarmee wordt automatisch een anker gemaakt. Bijvoorbeeld:
{{Afbeelding
|Bestand=Definitie van governance.png
|Afmetingen=400px
|Titel=Definitie van governance
}}

Stap 2: Gebruik als Href voor de Imagemap een hashtag (#) gevolgd door de naam van het plaatje. Bijvoorbeeld in bovenstaand geval: #Definitie van governance.png

Het Imagemap-sjabloon

Gebruik aan sjabloon om een Imagemap te maken.

{{Imagemap
|File=Venlo-Samenwerkingswijzer.png '''noteer hier de naam van je plaatje'''
|Dimensions=650px '''kies hier de gewenste grote'''
|Alt=Samenwerkingswijzer Venlo afbeelding met links '''kies hier de alternatieve tekst die je eventueel wil noemen (kort en bondig samenvatten wat er in de afbeelding staat. Eventueel titel van de afbeelding.'''
|Coordinates= '''Kopieer hier de coördinaten!'''
}}

Voorbeeld

Anker

{{Anker|Bestand=Definitie van governance.png}}[[File:Definitie van governance.png|link=|400px]]

Imagemap

{{Imagemap
|File=Venlo-Samenwerkingswijzer.png
|Dimensions=650px
|Alt=Samenwerkingswijzer Venlo afbeelding met links
|Coordinates=rect 1784 1836 2836 2244 [[Afwegingskader en gereedschapskist governance|Afwegingskader en gereedschapskist governance]]
rect 0 0 1756 1072 [[Sturen en controleren van samenwerking vanuit overzicht|Sturen en controleren van samenwerking vanuit overzicht]]
rect 1760 4 2996 1212 [[Actueel overzicht over huidige samenwerking|Actueel overzicht over huidige samenwerking]]
rect 1076 1216 3004 2240 [[Organisatie en werkwijzen om tot goede samenwerking te komen]]
rect 4 1076 1076 2240 [[Organisatie en werkwijzen om tot goede samenwerking te komen#Definitie van governance.png]]
}}

Dit resulteert in de onderstaande afbeelding. (Gedeelte linksonder verwijst naar de afbeelding Definitie van governance.png in de pagina Organisatie en werkwijzen om tot goede samenwerking te komen)

Afwegingskader en gereedschapskist governanceSturen en controleren van samenwerking vanuit overzichtActueel overzicht over huidige samenwerkingOrganisatie en werkwijzen om tot goede samenwerking te komenOrganisatie en werkwijzen om tot goede samenwerking te komen#Definitie van governance.pngSamenwerkingswijzer Venlo afbeelding met links
About this image