Forum - Topic

Onderwerp: Image mapping - Hulp & uitleg

Lorenzorisack
Topposter
Offline
Berichten: 1698
Gepost op 15-07-2009 om 21:28u
Image mapping guide, opgesteld door Trabbo , nagekeken en wijzigingen aangebracht door lorenzorisack .

Chapter 1: Wat is Image mapping?

Image mapping is het aanklikbaar maken van bepaalde delen van plaatjes om op deze wijze door te linken naar bepaalde pagina's. Je kan zo bijvoorbeeld een stadsplan maken waar bepaalde gebouwen aanklikbaar zullen zijn en zo zullen doorlinken naar bepaalde speloptie's .

Chapter 2: Waar is Image mapping goed voor?

Image mapping is handig voor ruimte te besparen op je website, het is namelijk zo dat je al je spelopties kan inbouwen in een simpele kaart . Maar het geeft natuurlijk ook een grafisch tintje aan je spel . Zelf gemaakte kaarten zullen dan ook weer zeer uniek zijn , het uniek zijn is dan ook weer een belangrijke vereiste voor een goed spel..

Chapter 3: Hoe maak ik een aanklikbaar plaatje?

Een aanklikbaar plaatje kan al heel makkelijk gemaakt worden met een klein HTML code :

Html code:
1
2
<A HREF="http://www.yourcrime.nl"><IMG SRC="http://yourcrime.net/images/watermerk/headers/12328.jpg" STYLE="border-style:none;" ALT="Yourcrime logo" WIDTH="250" HEIGHT="150"></A>
<A HREF="http://www.yourcrime.nl"><IMG SRC="http://yourcrime.net/images/watermerk/headers/12328.jpg" STYLE="border-style:solid; border-width:5px;" ALT="yourcrime logo" WIDTH="250" HEIGHT="150"></A>


Hier volgt de uitleg,

de
Html code:
1
<A HREF="http://www.yourcrime.nl">


De HREF is de link, waar het plaatje dus naar toe moet linken, verander dus de www.yourcrime.nl dus naar jou site.

de
Html code:
1
<IMG SRC="http://yourcrime.net/images/watermerk/headers/12328.jpg"[code]1


naar:

Html code:
1
STYLE="border-style:solid; border-width:5px;"


De width kan je veranderen, naar bijvoorbeeld 1px.

De ALT="Yourcrime logo" is niet belangrijk, zet daar bijvoorbeeld gewoon de naam van je site. Dit zorgt ervoor , dat indien de afbeelding niet kan weergegeven worden door de webbrowser , de tekst deze zal vervangen.

De WIDTH="250" HEIGHT="150" lijkt mij ook wel van zelf sprekend, daaraan kan je de breedte en de hoogte van je plaatje veranderen in pixels .

Let op: als je deeltjes van deze code neemt, en niet helemaal. Vergeet de <a> en de </a> niet, anders linkt je plaatje niet! de <a> aan het begin en de </a> aan t einde.

Chapter 4: Hoe maak ik er meer, bijvoorbeeld een rechthoek met plaatjes die doorlinken?

Dit gedeelte is iets moeilijker, maar als je het goed volgt kom je er wel!

Html code:
1
2
3
4
5
6
7
8
<MAP NAME="arrows">
<AREA SHAPE="circle" COORDS="28,28,15" HREF="lists.php" ALT="Lijsten">
<AREA SHAPE="rect" COORDS="70,15,100,45" HREF="index.php" ALT="Inhoudsopgave" TITLE="Ga naar de inhoudsopgave">
<AREA SHAPE="poly" COORDS="141,8,161,28,141,48,121,28,141,8" HREF="tables.php" ALT="Tabellen">
<AREA SHAPE="rect" COORDS="0,0,170,57" NOHREF ALT="Niets">
</MAP>
 
<IMG SRC="plaatje.gif" WIDTH="170" HEIGHT="57" USEMAP="#arrows" ALT="De Imagemap">


Zoals je ziet, word hier gewerkt met Coordinaten. Deze kan je bijvoorbeeld bepalen via photoshop , door daar met je muis te bewegen kan de coordinaten teweten komen.

De
Html code:
1
2
MAP NAME="arrows">
<AREA SHAPE="circle" COORDS="28,28,15" HREF="lists.php" ALT="Lijsten">


De MAP NAME is de naam van heel je plaatje, of laten we zeggen van heel je IMAGE MAP.

de
Html code:
1
<AREA SHAPE="circle"
circle word het figuur van je eerste IMAGE MAP, verander dit in anderen engelse namen van figuren en je zult een ander krijgen.

De COORDS heb ik al eerder verteld hiervoor, dit kan ik niet uitleggen.

De
Html code:
1
HREF="lists.php" ALT="Lijsten">
HREF is natuurlijk weer de link waar het plaatje naartoe moet linken. Als je dit voor YC gaat gebruiken, werkt het niet als je alleen winkel.php doet bijvoorbeeld, hiervoor moet je dan naar de winkel en dan de link bovenaan je browser overnemen en vervangen met lists.php

ALT="Lijsten"> als het cirkel naar je vliegveld moet linken, vervang je LIJSTEN naar vliegveld, als je dan met je pijl op het rondje gaat staan komt er tevoorschijn vliegveld. Als je alles goed gedaan heb en je klikt erop dan ga je naar het vliegveld.

Zo gaat het ook met de andere codes, behalve de IMG SRC=" plaatje.gif" WIDTH="170" HEIGHT="57" USEMAP="#arrows" ALT="De Imagemap"

De plaatje.gif is het plaatje waar de cirkel, en de pijl enzo komt te staan. Vervang dit door een plattegrond, knoei wat aan de coords en klaar.

De width en height heb ik al uitgelegt hiervoor, dit is gewoon de breedte en hoogte van het plaatje.

De ALT="De Imagemap" is weer gewoon de naam van je IMAGE MAP

Bron: Klik


Belangrijke opmerkingen van lorenzorisack:
1. De gegeven naam in " <MAP NAME="arrows"> " deze code moet overeen komen met de "usemap" in de code van de afbeelding, deze m.a.w. " USEMAP="#arrows" " .

2. Voor het maken van imagemaps kan het ook handig zijn programma's te gebruiken die dit voor je mogelijk maken. Even googlen en je vindt er echt een pak ! Let er wel op dat deze programma's ook de mogelijkheid hebben om met veelhoeken te werken , vele programma's bieden deze mogelijkheid niet.


Met vriendelijke groet & nogmaals mijn bedanking aan Trabbo , die deze guide samenstelde.

Dit topic gesloten.