Wikimore

All categories and pages that start with "Commons" in the name are for internal Commons work. They contain resources, help, tools, instructions, links, FAQs, examples, labs, software, etc.. They are not for categorization of images and media files used outside of internal Commons work. Please do not categorize regular image or media files here. Instead, see the main categories and subcategories at the Main Page and here. See also: Category help and category search. Search the Commons namespace at Special:Search.

Image-map. Vanwege het PNG-schaalprobleem is het soms beter om een GIF-afbeelding te gebruiken voor een image-map. Meer informatie.

Categorieën

Hulp, bronnen en veelgestelde vragen

Extensie ImageMap - beschrijft de op Commons geïnstalleerde extensie
Image-maps - W3C spec voor image-maps in HTML 4.0. De wikitext-opmaak voor de extensie gebruikt vergelijkbare concepten maar een andere syntaxis.

ImageMapEdit op Commons

Een gadget op Commons genaamd "ImageMapEdit" helpt bij het maken van een image-map uit elk afbeeldingsbestand. Zodra ingeschakeld, zal elke afbeeldingspagina de link ImageMap > eronder weergeven. Zie de documentatie.

Ander image-map bewerkingsprogramma's

Mcc HTML Mapper - Vrij en multi-platform software om image-maps voor het Web te maken.
Online editor, ondersteunt alle vormen, Extensie ImageMap compatibel: http://www.maschek.hu/imagemap/imgmap.
Basis on-line image-mapper van mgwalk.com: http://www.image-maps.com.
Clickable Image Map Maker - Op deze webpagina kan de gebruiker een afbeeldingsbestand selecteren op zijn eigen computer, vervolgens een tweede pagina maken met die afbeelding, en kan de gebruiker zeer snel de HTML-code genereren voor een image-map die in zijn eigen bestanden kan worden gebruikt. Het biedt ook handige pop-up-menu's om het coderen van de eigenlijke href te versnellen. Ingewikkelde maps kunnen in minder dan een minuut worden gemaakt. Vereist een browser die JavaScript en frames ondersteunt, ontworpen en getest op een Mac met Netscape Navigator.
GIMP - Zeer bekend programma voor het bewerken van afbeeldingen.
Wikia Help:ImageMap - Help van een op MediaWiki-gebaseerde website.
Wikia Help:Image maps (Star Trek Wiki) - Eenvoudige help op een op MediaWiki-gebaseerde website.
iMapBuilder - Windows-software om een afbeelding te omzetten in een klikbare flash-image-map met klikbare punten, iconen en muis-rolover-effecten.

Een HTML-image-map naar een wiki-image-map converteren

Dit zijn enkele korte instructies voor het handmatig converteren.

Zie deze link voor de hulp met de Wikia-image-map: . Zie dat de wikicode hiervoor op de pagina staat. "Foo" kan de naam zijn van elke afbeelding die u wilt maken in een klikbare image-map. Er kan elk afbeeldingsformaat worden gebruikt (GIF, PNG, JPG, enz.).

<imagemap>
Image:Foo.jpg
poly
poly 
rect 
circle 
</imagemap>

Zoek een image-map op een webpagina, of maak er een. Als de afbeelding gratis is, upload deze dan naar de Commons om te gebruiken in de wiki-image-map. Bekijk de HTML-broncode van de image-map op de webpagina (Extra/Browserhulpmiddelen/Paginabron in Firefox). Het zal poly-, rect- en cirkelcoördinaten hebben. Kopieer die coördinaten gewoon naar een eenvoudige teksteditor zoals Notepad in Windows. Gebruik het vervangcommando om alle komma's te vervangen door spaties. Er moet één spatie tussen elk nummer staan. Plak de coördinaten na de poly-, rect- en cirkelnamen in het bovenstaande wikicode-voorbeeld. De poly-lijnen moeten eerst zijn. Meerdere poly-, rect- en cirkelnamen kunnen nodig zijn. Zorg ervoor dat ze de regel beginnen voor elke lijst met cijfers voor elk klikbaar gedeelte van de image-map. De cijfers kunnen zich verwoorden. Voeg een wikilink toe na elke lijst met nummers. Ofwel een wikilink naar een andere pagina, of naar een sectie op de pagina waar de kaart gebruikt zal worden. Om naar secties in de huidige pagina te linken, voegt u een #-symbool toe aan de voorkant van de titel van de subkop, en sluit u de subtitel vervolgens tussen haakjes zoals bij elke wikilink: [[#Subheading title]]. Bekijk of sla de pagina op, en test vervolgens de image-map door op delen ervan te klikken. Voel u vrij om ook zandbakken te gebruiken om de image-map te testen.

Meer functionaliteit, o.a. tooltips

Deze gratis hulpmiddelen bieden meer manieren om op maps te klikken voor meer informatie, tooltips, enzovoort.

JQVMap - jQuery Vector Maps. - JQVMap is een jQuery-plugin die Vector Maps rendert. De pagina jQuery geeft aan dat jQuery sinds versie 1.16 ook wordt gebruikt in MediaWiki.
ImageMapster.
jVectorMap. Veel kaarten van de wereld, wereldregio's, landen en steden zijn beschikbaar om te downloaden op deze site. Ze zijn allemaal gemaakt van data uit het publieke domein of data die onder de vrije licenties is gelicenseerd, dus u kunt ze gratis voor elk doel gebruiken.

Geavanceerde mogelijkheden

Zie deze klikbare, scrollbare wereldkaart:

Wereldkaart van Criminaliteitsindex voor 2015 midden in het jaar. Let op hoe het kleurenspectrum bij het onderwerp past. "Go" en "no go" gebieden. Groen voor "gaan". Rood voor "no go". Scroll over de kaart en let op de pop-ups. Let ook op het gladde, continue spectrum van de legende en hoe dit een breed bereik beslaat. Dit type kaart zou een nuttig model zijn voor sommige Wikipedia-paginakaarten.

Een image-map met GIMP genereren

Dit proces bestaat uit drie stappen:

Het downloaden van de afbeelding en het openen in GIMP
Het genereren van de coördinaatgegevens
Het extraheren van de coördinaatgegevens en het in een image-map in wiki-stijl plaatsen

De stappen worden hieronder in detail beschreven. Let op dat er twee variaties zijn van stap 2 (stap 2a en stap 2b) en overeenkomstige variaties van stap 3 (stap 3a en stap 3b)

De GIMP-instructies zijn gebaseerd op GIMP 2.8.10, de nieuwste GIMP op het moment van schrijven.

Stap 1: Download de originele afbeelding naar uw computer

Klik op de afbeelding in het artikel. Dat moet u naar de bestandspagina brengen.
Klik op de afbeelding op de bestandspagina. Dat moet u naar het origineel brengen dat een URL moet hebben die begint met https://upload.wikimedia.org/wikipedia/commons
Bewaar het bestand op uw computer
Open het bestand in GIMP

Stap 2a: Het hulpmiddel ImageMap gebruiken

Het hulpmiddel ImageMap is makkelijk te gebruiken. Merk op dat het elke vorm handmatig getekend moet worden, wat foutengevoelig en lastig kan zijn, vooral als er veel onregelmatige vormen zijn.

Selecteer in de menubalk, Filters -> Web -> ImageMap
Kies een vorm uit de linkerbalk: rechthoek, cirkel, polyvorm
Trek de juiste vormen op uw afbeelding
Als u klaar bent, bekijk dan de bron

Stap 3a: Coördinaten extraheren met het hulpmiddel ImageMap

Kopieer de bron naar een teksteditor
Voor elke vorm, zoek de attributen "shape" en "coords" en plaats ze op een aparte regel

Stap 2b: De aanpak Fuzzy-select gebruiken

De Fuzzy-select-benadering is moeilijker te gebruiken. Het heeft echter het voordeel dat het snel extreem nauwkeurige vormen tekent. Het is vooral nuttig voor afbeeldingen met duidelijk gedefinieerde grenzen, zoals geografische grenzen. Zie bijvoorbeeld https://en.wikipedia.org/w/index.php?title=Benin&oldid=618376512

Selecteer in de menu-balk Tools -> Selectie-tools -> Fuzzy Select. Er zullen meerdere vormen op de afbeelding staan.
Open de Path Toolbox met gebruik van Windows -> Dockable Dialogs -> Paths
Selecteer Select -> To Path. Let op dat een selectie nu verschijnt in de Path Toolbox
Klik met de rechterkant op de selectie en selecteer Export Path
Bewaar het bestand. NB: dit is een SVG-bestand

Stap 3b: Coördinaten extraheren met de aanpak Fuzzy-select

Open het bestand in een teksteditor
Zoek naar het attribuut dat begint met "d="
Het extraheren van alles tussen de quotes in een nieuw document
Vervang alle komma's door spaties
Verwijder alle begin witte-ruimte van de regel door de hele selectie te benadrukken en herhaaldelijk op het shift-tab te drukken
Verwijder alle nieuwe regels (u heeft een teksteditor nodig die reguliere expressie vervangingen doet)
Verwijder alle "M's". Let op dat dit het begin van het pad is. (M staat voor Verplaatsen naar)
Verwijder alle "C's". Let op dat dit het tweede deel van het pad is (C staat voor Curve to)
Vervang alle "Z"'s door een nieuwe regel. Merk op dat Z de markering van het eind is. (Z staat voor Close path)
U zult nu elk pad op een enkele regel hebben
Voeg "poly" toe aan het begin van elke regel.
Voeg een tijdelijk 'anchor ' toe aan het einde van elke regel. Bijvoorbeeld, [[a]] bij regel 1;[[b]] bij regel 2; enzovoort.
Voeg de noodzakelijke <imagemap> tags toe en de eerste regel voor de bestandsnaam (Voorbeeld: File:A.png)
Kopieer de bron naar de Wikipedia Zandbak en doe een voorvertoning
Zweef over elke vorm en gebruik de tijdelijke anchors om elke vorm te identificeren
Vervang de tijdelijke anchors met de werkelijke anchors

Category:Commons image resources/Translations