Difference between revisions of "Wiki:Werken met Imagemap"

From Venlo Samenwerkingswijzer
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 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.
  
−
<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>
  
−
Tip: Gebruik het originele bestand. Als het bestand is geüpload op de wiki, kun je dit ophalen via (bestand) in de [[Speciaal:Bestandenlijst]].
+
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==
+
== Het Imagemap-sjabloon ==
 
Gebruik aan sjabloon om een Imagemap te maken.  
 
Gebruik aan sjabloon om een Imagemap te maken.  
 +
<pre>{{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!'''
 +
}}</pre>
  
−
Bijvoorbeeld:
+
== Voorbeeld ==
 +
'''Anker'''
 +
<pre>{{Anker|Bestand=Definitie van governance.png}}[[File:Definitie van governance.png|link=|400px]]</pre>
  
 +
'''Imagemap'''
 
<pre>{{Imagemap
 
<pre>{{Imagemap
 
|File=Venlo-Samenwerkingswijzer.png
 
|File=Venlo-Samenwerkingswijzer.png
Line 21: Line 43:
 
rect 4 1076 1076 2240 [[#Definitie van governance.png]]
 
rect 4 1076 1076 2240 [[#Definitie van governance.png]]
 
}}</pre>
 
}}</pre>
−
 
−
Dit levert het volgende op:
 
−
 
−
{{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 [[#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>
 
−
 
−
;Demo
 
−
Test dit uit door in het voorbeeld hierboven te clicken op het deel linksonder van de imagemap. Je wordt dan doorgestuurd naar de afbeelding hieronder.
 
−
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
 
−
 
−
{{Anker|Bestand=Definitie van governance.png}}<!---
 
−
  --->[[File:Definitie van governance.png|link=|400px]]
 

Revision as of 18:15, 8 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]]

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 [[#Definitie van governance.png]]
}}
Retrieved from "http://venlo.samenwerkingswijzer.nl/index.php?title=Wiki:Werken_met_Imagemap&oldid=1061"