Difference between revisions of "Wiki:Werken met Imagemap"

From Venlo Samenwerkingswijzer
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==De juiste coördinaten verkrijgen==
+
== Aanmaken van een Imagemap ==
Maak gebruik van deze handige online tool:
+
1.  Zorg dat de afbeelding die je wilt gebruiken als image map in de bestandenlijst van de wiki staat.<br />
 +
2.  Klik op de afbeelding totdat je de grote versie ervan in beeld ziet. Kopieer die url.<br />
 +
3.  Ga naar http://maschek.hu/imagemap/imgmap/<br />
 +
4.  Kies bovenin bij ‘select source’ voor de optie: OR an image on the internet en plak daar de url van je afbeelding.<br />
 +
5.  Kies onder ‘image map areas’ bij Output voor Wiki imagemap<br />
 +
6.  Kies bij ‘image map areas’ voor het groene plusje links om gebieden te gaan selecteren. De rectangle is hiervoor het makkelijkst. <br />
 +
voor het gemak kun je hier de zoom functie aanpassen naar gelang je wensen, zodat je fijn kunt werken.<br />
 +
7.  Selecteer de gebieden altijd van links boven tot rechts onder. De coördinaten worden automatisch ingevuld.<br />
 +
8a. Indien naar andere 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. Indien je verwijst naar een kop binnen dezelfde pagina volstaat: #titel van de kop (koppen krijgen automatisch een anker mee)<br />
 +
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<br />
 +
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<br />
 +
10. Ga naar de locatie in de wiki waar je de imagemap wilt opnemen. Gebruik vervolgens het onderstaande sjabloon voor imagemap en vul deze verder in.<br />
  
<big>http://maschek.hu/imagemap/imgmap/ </big>
+
== 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.
 +
<pre>{{Anker|Bestand=Definitie van governance.png}}[[File:Definitie van governance.png|link=|400px]]</pre>
 +
: {{Fa|lightbulb-o}} Tip! Je kunt ook gebruik maken van het Afbeelding sjabloon. Daarmee wordt automatisch een anker gemaakt. Bijvoorbeeld:
 +
<pre>{{Afbeelding
 +
|Bestand=Definitie van governance.png
 +
|Afmetingen=400px
 +
|Titel=Definitie van governance
 +
}}</pre>
 +
 
 +
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 sjabloon voor de imagemap ==
 +
Maak gebruik van het afbeeldingssjabloon om een Imagemap te maken:
  
Tip: Vul de volledige afbeeldingsgrootte in. Als het bestand is geüpload op de wiki, kun je de grootte achterhalen via [[Speciaal:Bestandenlijst]].
+
<pre>{{Afbeelding
 +
|Bestand=Venlo-Samenwerkingswijzer.png '''noteer hier de naam van je plaatje'''
 +
|Afmetingen=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.'''
 +
|Coordinaten= '''Kopieer hier de coördinaten met de links!'''
 +
}}</pre>
  
==Het Imagemap-sjabloon==
+
== Voorbeeld ==
Gebruik aan sjabloon om een Imagemap te maken.  
+
'''Anker'''
 +
<pre>{{Anker|Bestand=Definitie van governance.png}}[[File:Definitie van governance.png|link=|400px]]</pre>
  
Bijvoorbeeld:
+
'''Imagemap'''
  
<pre>{{Imagemap
+
<pre>{{Afbeelding
|File=Venlo-Samenwerkingswijzer.png
+
|Bestand=Venlo-Samenwerkingswijzer.png
|Dimensions=650px
+
|Afmetingen=650px
 
|Alt=Samenwerkingswijzer Venlo afbeelding met links
 
|Alt=Samenwerkingswijzer Venlo afbeelding met links
|Coordinates=rect 1784 1836 2836 2244 [[Afwegingskader en gereedschapskist governance|Afwegingskader en gereedschapskist governance]]
+
|Coordinaten=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 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 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 1076 1216 3004 2240 [[Organisatie en werkwijzen om tot goede samenwerking te komen]]
rect 4 1076 1076 2240 [[#Definitie van governance.png]]
+
rect 4 1076 1076 2240 [[Organisatie en werkwijzen om tot goede samenwerking te komen#Definitie van governance.png]]
}}</pre>
+
}}
 +
</pre>
  
Dit levert het volgende op:
+
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'')
{{Imagemap
+
{{Afbeelding
|File=Venlo-Samenwerkingswijzer.png
+
|Bestand=Venlo-Samenwerkingswijzer.png
|Dimensions=650px
+
|Afmetingen=650px
 
|Alt=Samenwerkingswijzer Venlo afbeelding met links
 
|Alt=Samenwerkingswijzer Venlo afbeelding met links
|Coordinates=rect 1784 1836 2836 2244 [[Afwegingskader en gereedschapskist governance|Afwegingskader en gereedschapskist governance]]
+
|Coordinaten=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 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 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 1076 1216 3004 2240 [[Organisatie en werkwijzen om tot goede samenwerking te komen]]
rect 4 1076 1076 2240 [[#Definitie van governance.png]]
+
rect 4 1076 1076 2240 [[Organisatie en werkwijzen om tot goede samenwerking te komen#Definitie van governance.png]]
 
}}
 
}}
 
==Linken naar afbeeldingen op de pagina==
 
;Stap 1
 
Om vanuit de imagemap hierboven te linken naar een afbeelding, bijv. Definitie van governance.png, moet eerst een anker aanwezig zijn waarnaartoe gelinkt kan worden. In het hoofdstuk staat bijv.
 
<pre>{{Anker|Bestand=Definitie van governance.png}}<!---
 
  --->[[File:Definitie van governance.png|link=|400px]]</pre>
 
 
;Stap 2
 
Om vanuit de imagemap in de introductie van een onderwerp te kunnen linken naar dit gedeelte van het hoofdstuk, maak dan gebruik van een link in de vorm:
 
<pre>[[#Definitie van governance.png]]</pre>
 
 
(zie het voorbeeld hierboven)
 
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
 
 
{{Anker|Bestand=Definitie van governance.png}}<!---
 
  --->[[File:Definitie van governance.png|link=|400px]]
 

Latest revision as of 16:05, 15 November 2016

Aanmaken van een Imagemap

1. Zorg dat de afbeelding die je wilt gebruiken als image map in de bestandenlijst van de wiki staat.
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 naar andere 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. Indien je verwijst naar een kop binnen dezelfde pagina volstaat: #titel van de kop (koppen krijgen automatisch een anker mee)
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 voor imagemap 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 sjabloon voor de imagemap

Maak gebruik van het afbeeldingssjabloon om een Imagemap te maken:

{{Afbeelding
|Bestand=Venlo-Samenwerkingswijzer.png '''noteer hier de naam van je plaatje'''
|Afmetingen=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.'''
|Coordinaten= '''Kopieer hier de coördinaten met de links!'''
}}

Voorbeeld

Anker

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

Imagemap

{{Afbeelding
|Bestand=Venlo-Samenwerkingswijzer.png
|Afmetingen=650px
|Alt=Samenwerkingswijzer Venlo afbeelding met links
|Coordinaten=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
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
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