Hallo. Onlangs kreeg ik de kans om met zo'n specifieke html-functie als een image map aan de slag te gaan. Eerlijk gezegd heb ik niet vaak de gelegenheid gehad om er gebruik van te maken, en meestal gebeurde alles in rechthoekige zones. Maar dit was niet hetzelfde geval. De taak was om links naar individuele regio's van de afbeelding te plaatsen, wat een kaart van het land was, en helaas was er geen sprake van doeken of SVG. Alleen html alleen hardcore! De taak is dus ingesteld, Google is geactiveerd en we kunnen beginnen.
Theorie
Laten we beginnen met de theorie: waar zouden we zijn zonder? De imagemap bevat twee tags: kaart- kaarthouder en gebied- selectiezone. De kaart is niet beperkt tot één zone en kan een onbeperkt aantal zones bevatten. Label gebied Naast standaardattributen heeft het ook zijn eigen:- coördinaten- coördinaten van het selectiegebied
- href- link waarnaar u gaat als u op de zone klikt
- neehref- geeft aan dat de zone geen link bevat
- vorm- selectieformulier
- cirkel- selectiegebied in de vorm van een cirkel
- standaard- selecteert het gehele beeldgebied
- veel- selectiegebied in de vorm van een veelhoek
- rect- selectiegebied in de vorm van een rechthoek
- doel- bepaalt waar de link wordt geopend
Omdat mijn selectiegebied veelhoekig moest zijn, specificeren we de waarde van het vormattribuut, de gebiedstag, als poly - veelhoekig gebied. In deze modus worden de coördinaten van het punt ten opzichte van de linkerbovenhoek aangegeven, gescheiden door komma's - x,y. De punten worden ook gescheiden door komma's, wat in eerste instantie voor verwarring zorgt bij het lezen van dergelijke code.
Wij schrijven verf
Ik was niet blij met het vooruitzicht Photoshop te gebruiken om de coördinaten van elk punt te vinden, de getallen handmatig vanuit het Info-venster te herschrijven, en de tools die ik op Google tegenkwam waren te monsterlijk. We besloten om ons eigen kleine script te schrijven, waarmee we punten konden plaatsen door simpelweg op het gewenste gebied in de afbeelding te klikken, en de voltooide code zouden weergeven.Laten we eerst de lay-out voorbereiden:
Knoppen voor het besturen van verf worden in #bar ingevoegd.
De gegenereerde html-code wordt weergegeven in #info.
Body ( marge: 0; opvulling: 20px; lettertypefamilie: Arial, Helvetica, sans-serif; ) img (rand: geen; omtrek: geen; weergave: blok; -moz-user-select: geen; -webkit-user -select: geen; door gebruiker geselecteerd: geen; ) .canvas (rand: 2px effen #333; opvulling: 2px; marge-onder: 16px; weergave: inline-block; //display: inline; //zoom:1; ) .canvas.draw (randkleur: #3C0; ) .canvas .inner ( positie: relatief; ) .canvas .point ( breedte: 1px; hoogte: 1px; achtergrondkleur: #fff; rand: 1px effen #000 ; overloop: verborgen; positie: absoluut; .bar (marge-onder: 16px; ) .info (achtergrondkleur: #FCFCFC; rand: 1px gestippeld #CCC; lettergrootte: 12px; lettertype: cursief; opvulling: 8px; woordomloop: breekwoord;
In javascript is alles vrij eenvoudig. Tijdens het schrijfproces heb ik mijn eigen gevechtsbibliotheek gebruikt, dus wees niet verrast door niet-standaardfuncties. Laten we eerst een mousedown-gebeurtenis aan #canvas toevoegen, waarin een punt op de afbeelding staat zal worden weergegeven en de coördinaten zullen worden vastgelegd.
Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, node = knooppunten["canvas"].appendChild(_.node("div", ("class"punt"))); +"px"; node.style.left = x-1+"px"; points.push(("x": x, "y": y, "node": node)); ;
Vervolgens zullen we een functie schrijven die de html-code van onze kaart genereert.
Var renderInfo = function())( var text; _.clearNode(nodes["info"]); knooppunten["info"].appendChild(_.node("span", " "));
};
) tekst += "">"; knooppunten["info"].appendChild(_.node("span", tekst)); knooppunten["info"].appendChild(_.node("br")); ) ) knooppunten["info"].appendChild(_.node("span", "
Laten we alles in een klasse plaatsen, een paar helperfuncties, dat is alles. Ik hoop dat deze tool voor iemand nuttig zal zijn.
In de laatste videoles zijn we net begonnen kennis te maken met image maps in HTML. We hebben gekeken hoe het er uiteindelijk uit moest zien, zij het met behulp van scripts. We hebben wat over coördinaten gesproken. Dat wil zeggen, hoe we ze zullen definiëren. Zoals je je misschien herinnert, heb ik een van de methoden gekozen, dit is de methode die het ismap-attribuut gebruikt, omdat naar mijn mening deze methode voor het bepalen van coördinaten de eenvoudigste en minst complexe is, wat betekent dat deze bij ons past.
Als resultaat hebben we in de laatste video een linkfoto gemaakt. En vervolgens hebben we van de afbeelding een serverafbeeldingskaart gemaakt, die ons zal helpen bij het bepalen van de coördinaten van actieve gebieden.
Nu is het tijd om daadwerkelijk te beginnen met het maken van de image map in HTML. In deze video behandelen we heel wat informatie, beginnend met de theorie en vervolgens naar de praktijk.
Laten we beginnen met nog twee HTML-tags te leren, dit zijn de tags
HTML-tagkaart.
Label
Deze tag heeft een vereist naamattribuut. Waarin we de naam van onze image map moeten specificeren. Bovendien is het vermeldenswaard dat deze tag geen blokelement is, wat betekent dat hij in een blokelement moet worden geschreven, zoals een paragraaftag of een universele div-tag.
HTML-taggebied.
Label is verantwoordelijk voor het specificeren van actieve gebieden in de container
Hier wil ik ook iets vermelden dat ik in de videoles vergat te zeggen, namelijk dat deze tag eenvoudig kan worden vervangen door een tag voor het aangeven van hyperlinks in een HTML-document. Dat wil zeggen: het label . Als je het je herinnert, dan staat het bij het label Er zijn precies dezelfde vorm- en coördinatenattributen, die specifiek bedoeld zijn om de basisvorm en de coördinaten ervan aan te geven.
Bepaling van de coördinaten van een vierkant, rechthoek, cirkel en veelhoek.
Ook in deze videoles zullen we gedetailleerd bekijken hoe je de coördinaten voor een bepaald figuur correct kunt bepalen. Hoeveel coördinaten moeten er zijn voor een bepaald figuur? Dit komt door het feit dat elke basisfiguur zijn eigen set coördinaten heeft en de volgorde waarin ze worden verkregen.
Eerst zullen we in detail in theorie bekijken hoe je de coördinaten voor een vierkant kunt bepalen, vervolgens voor een cirkel en ten slotte voor een veelhoek.
Vervolgens bepalen we aan de hand van een live voorbeeld de coördinaten van een vierkant en een rechthoek. Vervolgens bepalen we de coördinaten van de cirkel. En ten slotte geven we de coördinaten van de driehoek aan, die op zijn beurt de rol van een veelhoek speelt.
Over het algemeen zal deze video een zeer nuttige gids zijn voor diegenen die geïnteresseerd zijn in het onderwerp van het maken van image maps in HTML.
Videoles: Een imagemap maken in HTML.
De HTML-map en ander materiaal kunnen en moeten worden gedownload!
In de volgende videoles zullen we eindelijk het onderwerp van het maken van image maps bestuderen, we zullen het hebben over het laatste tag-attribuut usemap , waarmee we de afbeelding kunnen associëren met de image map. En laten we nog een paar live voorbeelden bekijken van image maps in verschillende afbeeldingen.
In een HTML-document.
Laten we nu eens kijken wat een image map is.
Met een imagemap kunt u ervoor zorgen dat wanneer u op verschillende delen van dezelfde afbeelding klikt, u naar verschillende pagina's wordt geleid. Een beeldkaart wordt door sommigen ook wel een navigatiekaart genoemd.
Ik begrijp dat dit moeilijk in woorden te begrijpen is, dus ik stel voor om een voorbeeld te bekijken van hoe een image map er in het echt uitziet.
Let wel op: het beeld is hetzelfde, maar de gebieden en het overgangspad zijn anders.
Wees niet bang, het is helemaal niet moeilijk. Het belangrijkste is om de theorie te begrijpen en deze te consolideren met de praktijk.
Nou, laten we naar de theorie gaan.
Beeldkaarten (navigatiekaarten) worden gespecificeerd door de tag
.
Label - dit is een doos waarin tags worden geplaatst
.
Label is bedoeld om een geometrisch gebied te definiëren met een referentie aan elk gebied.
Gebiedsattributen
1. vorm attribuut
vorm – definieert de vorm van het gebied ( rechthoek, cirkel, veelhoek).
Rechthoek - "recht". Voorbeeld: vorm = " rect";
cirkel - "cirkel". Voorbeeld: vorm = " cirkel";
veelhoek - "poly". Voorbeeld: vorm = " poly"
2. coördinaten attribuut
coördinaten is de opstelling van een geometrische vorm.
Laten we een voorbeeld bekijken waarbij de geometrische vorm van een rechthoek wordt gebruikt.
U weet al dat als u een rechthoekige vorm nodig heeft, u de waarde in het vormattribuut moet instellen « rect ».
Het referentiepunt begint in de linkerbovenhoek van de afbeelding, waarvan de coördinaten (0;0) zijn.
Dit betekent dat u de coördinaten van het werkgebied van de rechthoek, de linkerbovenhoek en de rechteronderhoek, moet opgeven.
Neem voor het voorbeeld met rechthoek nr. 1 de volgende coördinaten:
x1=25, y1=36, x2=114, y2=98
Dit is hoe de code eruit zal zien:
Tot nu toe gaat het goed. Maar nu moeten we de afbeelding aan de kaart koppelen.
Om dit te doen, bedenkt u een naam voor de kaart, bijvoorbeeld 'karta1', en schrijft u deze in de tag
Laten we nu de kaart met de afbeelding verbinden. Om dit te doen, gebruiken we het usemap attribuut.
Schrijven voorbeeld:
usemap=" #map_name"
In ons geval zal het er als volgt uitzien:
Laten we nu alles samenvoegen en de coördinaten opschrijven voor een andere rechthoek nr. 2 met dezelfde gegevens (x1=153, y1=11, x2=219, y2=127).
Kijk nu naar het resultaat. Klik op rechthoek #1 en op rechthoek #2
Eerst moet u het gebiedstype opgeven. Om dit te doen, stelt u de waarde “cirkel” in het vormattribuut in.
Laten we nu verder gaan met de coördinaten.
Om coördinaten voor een cirkelvormig gebied te maken, moet u gegevens invoeren voor het midden (xy) en de lengte van de straal (R) opgeven.
De volgorde van het vastleggen van coördinaten voor het attribuut coördinaten is als volgt:
Neem voor cirkel nr. 1 de volgende coördinaten:
x=46, y=48; en de straallengte is R=35
Laten we nu alles samenvoegen en de coördinaten voor cirkel nr. 2 opschrijven met de volgende gegevens x=158, y=75, R=53.
Kijk nu naar het resultaat. Klik op cirkel #1 en cirkel #2:
Het veelhoekige gebied is het meest complexe gebied op de navigatiekaart.
Eerst moet u het gebiedstype opgeven. Om dit te doen, stelt u de waarde “poly” in het vormattribuut in
Laten we nu verder gaan met de coördinaten.
De volgorde van het vastleggen van coördinaten voor het attribuut coördinaten is als volgt:
Uitleg:
x1,y1 -
coördinaten van de eerste hoek;
x2,y2 -
coördinaten van de tweede hoek;
xN,yN -
coördinaten van de laatste hoek
Dat wil zeggen, voor veelhoek nr. 2 ziet het er als volgt uit:
Laten we nu de kaart een naam geven en de kaart aan de afbeelding koppelen:
Laten we nu alles samenvoegen en de coördinaten voor hexagon nr. 1 opschrijven met de volgende gegevens: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4= 96, x5= 54, y5=96, x6=16, y6=58.
Kijk nu naar het resultaat. Klik op polygoon #1 en op polygoon #2:
Mogelijkheid tot combinatie
Er zijn gevallen waarin u verschillende gebieden tegelijkertijd in één afbeelding moet gebruiken, bijvoorbeeld een cirkel en een rechthoek:
Optelling met TITLE
Voor elk gebied kunt u tooltips toevoegen met behulp van het titelattribuut.
Kijk nu naar het resultaat. Beweeg uw muis over de cirkel en vervolgens over de rechthoek:
Dat is het. We hebben de imagemap in HTML (navigatiekaart) uitgezocht.
HTML-tagsBetekenis en toepassing
Label
Browser-ondersteuning
| Label | Opera | IExplorer | Rand |
|||
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Ja | Ja |
Kenmerken
Kenmerken taggen we geven zowel de coördinaten van het gebied aan (coords attribuut) als het type vorm dat we nodig hebben (shape attribuut):
Gebruiksvoorbeeld
Laten we eens kijken naar een voorbeeld waarin wanneer u op een bepaalde vorm in een afbeelding klikt, u naar verschillende webpagina's gaat die deze vormen beschrijven (links naar Wikipedia):
Kies een figuur:
En dus in volgorde, wat we in dit voorbeeld deden:
- Heb een afbeelding geplaatst (tag
), die we later zullen gebruiken bij het maken van een image map. In het usemap attribuut moet u de naam opgeven van de kaartafbeelding die we in het element gaan gebruiken
- Plaats de kaartafbeelding (tag
- Plaats vier tags , die interactieve gebieden in de kaartafbeelding definiëren:
- Eerst wij vragen rechthoekig gebied(vormattribuut met waarde "rect"), het komt overeen met onze Eerst afbeelding ( eerste twee de waarden komen overeen met de linkerbovenhoek, het volgende twee waarden bepalen de rechterbovenhoek en de rechteronderhoek).
- Seconde aanwijzen rond gebied(vormattribuut met waarde "cirkel"), het komt overeen met onze seconde afbeelding ( Eerst waarde komt overeen met ascoördinaten X en de tweede langs de as j, de derde bepaalt radius).
- Met betrekking tot derde En vierde figuur, dan worden ze volgens het principe samengesteld veelhoekig gebied(vormattribuut met waarde "poly"). U bepaalt het benodigde aantal punten in de afbeelding, berekent de coördinaten van deze punten (grafische editor) en geeft ze in een zodanige volgorde aan dat de browser ze met één lijn kan verbinden. Met een driehoek als voorbeeld (derde afbeelding): Eerst punt (coördinaten X En j hoekpunten), seconde punt (coördinaten X En j linker benedenhoek) en derde punt (coördinaten X En j rechter benedenhoek).
Ik vestig uw aandacht op het feit dat als de tag
