Grafikkort html. Tegn et billedkort med musen
HTML - Lektion 15. Navigationskort - kort
Mange HTML-sider bruger såkaldte billedkort til at organisere links. Med denne tilgang tager du et billede og vedhæfter links til forskellige områder af det. Det mest almindelige eksempel er turistkort over verden; du klikker på en del af det med et land, og du bliver ført til en side dedikeret til det land.Sådanne billedkort kan være klient- eller server-side. Klientkortlinks gemmes i selve dokumentet, og ved at klikke med musen bestemmer browseren selv, hvilket område koordinaterne til dette punkt hører til og navigerer til det ønskede link.
Med serverversionen sendes disse koordinater først til serveren, behandles der af et specielt program, og først derefter følges linket. Naturligvis er klientnavigationskort at foretrække. Vi vil overveje dem.
Lad os for eksempel forestille os, at vi er en butik med husholdningsapparater, og i overskriften på vores hjemmeside har vi følgende billede:
Lad os lave et navigationskort ud af det, dvs. når du klikker på køleskabet, bliver du omdirigeret til en side dedikeret til køleskabe (med modeller, beskrivelser og priser), når du klikker på støvsugeren og vaskemaskinen, bliver du ført til deres tilsvarende sider.
For at gøre dette skal vi beskrive de områder på dette billede, der vil være links. Tags bruges til at beskrive sådanne områder med kun én parameter navn, som angiver navnet på linkkortet og derefter bruges til at linke til dette kort.
Vores kort skal være forbundet med vores billede, for dette i tagget
At beskrive specifikke områder i tags tags bruges . Dette tag har følgende parametre:
- form- definerer områdets form, kan tage følgende værdier:
- rekt- areal i form af et rektangel,
- cirkel- område i form af en cirkel,
- poly- areal i form af en polygon,
- Standard- hele regionen.
- cootds- indstiller koordinaterne for et separat område:
- Til rekt koordinaterne for det øverste venstre og nederste højre hjørne af rektanglet er specificeret,
- Til cirkel koordinaterne for cirkelcentrum og radius er specificeret,
- Til poly koordinaterne for polygonhjørnerne er angivet i den påkrævede rækkefølge.
- href- definerer linkadressen.
- mål- bruges ved brug af rammer og angiver den ramme, som siden skal indlæses i.
- alt- sætter alternativ tekst for området.
Nu skal vi tage stilling til koordinaterne for disse områder. Faktisk er dette den mest tidskrævende proces. I vores eksempel besluttede vi, at områderne ville være rektangulære og gjorde vores opgave meget lettere, men forestil dig, hvor mange punkter du skal angive, for eksempel for at skitsere et land på et kort. Vi skal dog angive koordinaterne for det øverste venstre og nederste højre hjørne af de tre rektangler.
Til disse formål bruges normalt et eller andet program, for eksempel Image Ready, som har et særligt værktøj til at skitsere områder og automatisk bygger beskrivelser af disse områder. Hensyn til driften af disse programmer er ikke inkluderet i HTML-kurset, så her vil vi sætte koordinaterne "efter øje". Tag et kig på vores billede igen:
Bredden af vores billede er 738 pixels og højden er 192 pixels. Lad os trække linjer langs grænserne af vores regioner og groft bestemme koordinaterne. Nu er vi klar til at tilføje disse parametre til vores tags .
Resultat:
Nu er vores områder blevet til links (hvis du flytter musemarkøren, bliver den til en håndflade). Der er ingen sider på denne side dedikeret til køleskabe, så linkene fører dig til den samme side, men hvis du opretter de sider, du ønsker, vil et klik på området føre dig til siden.
Dette afslutter vores lektioner. Du er blevet fortrolig med alle HTML-sprogets muligheder. For at konsolidere dine færdigheder, tjek de to lektioner Lav et websted - tabellayout.
Til sidst må jeg sige, at der er yderligere to vidunderlige elementer i HTML - tags
I et html-dokument.
Lad os nu finde ud af, hvad et billedkort er.
Med et billedkort kan du gøre det sådan, at når du klikker på forskellige områder af samme billede, bliver du ført til forskellige sider. Et billedkort kaldes også for et navigationskort af nogle.
Jeg forstår, at dette er svært at forstå med ord, så jeg foreslår, at du ser på et eksempel på, hvordan et billedkort ser ud i det virkelige liv.
Bare vær opmærksom: billedet er det samme, men områderne og overgangsvejen er forskellige.
Vær ikke bange, det er slet ikke svært. Det vigtigste er at forstå teorien og konsolidere den med praksis.
Nå, lad os komme ned til teorien.
Billedkort (navigationskort) er angivet af tagget
.
Tag - dette er en boks, hvori tags er placeret
.
Tag er beregnet til at definere et geometrisk område med en reference knyttet til hver region.
Område attributter
1. form attribut
form – definerer formen på området ( rektangel, cirkel, polygon).
Rektangel - "rekt". Eksempel: shape=" ret";
cirkel - "cirkel". Eksempel: shape=" cirkel";
polygon - "poly". Eksempel: shape=" poly"
2. coords attribut
coords er arrangementet af en geometrisk form.
Lad os se på et eksempel ved hjælp af den geometriske form af et rektangel.
Du ved allerede, at hvis du har brug for en rektangelform, så skal du indstille værdien i formattributten « rekt ».
Referencepunktet starter fra det øverste venstre hjørne af billedet, hvis koordinater er (0;0)
Dette betyder, at du skal angive koordinaterne for rektanglets arbejdsområde, det øverste venstre og nederste højre hjørne.
For eksemplet med rektangel nr. 1, tag følgende koordinater:
x1=25, y1=36, x2=114, y2=98
Sådan kommer koden til at se ud:
Så langt så godt. Men nu skal vi forbinde billedet med kortet.
For at gøre dette skal du finde et hvilket som helst navn til kortet, for eksempel "karta1" og skrive det i tagget
Lad os nu forbinde kortet med billedet. For at gøre dette bruger vi usemap-attributten.
Skriveeksempel:
usemap=" #map_name"
I vores tilfælde vil det se sådan ud:
Lad os nu sætte alt sammen og skrive koordinaterne ned for endnu et rektangel nr. 2 med de samme data (x1=153, y1=11, x2=219, y2=127).
Se nu på resultatet. Klik på rektangel #1 og på rektangel #2
Først skal du angive områdetypen. For at gøre dette skal du indstille værdien "cirkel" i formattributten.
Lad os nu gå videre til koordinaterne.
For at oprette koordinater for et cirkulært område skal du indtaste data til midten (xy) og angive længden af radius (R).
Rækkefølgen for registrering af koordinater for attributten coords vil være som følger:
For cirkel nr. 1 skal du tage følgende koordinater:
x=46, y=48; og radiuslængden er R=35
Lad os nu sætte alt sammen og nedskrive koordinaterne for cirkel nr. 2 med følgende data x=158, y=75, R=53.
Se nu på resultatet. Klik på cirkel #1 og cirkel #2:
Det polygonale område er det mest komplekse område på navigationskortet.
Først skal du angive områdetypen. For at gøre dette skal du indstille værdien "poly" i formattributten
Lad os nu gå videre til koordinaterne.
Rækkefølgen for registrering af koordinater for attributten coords vil være som følger:
Forklaring:
x1,y1 -
koordinater for det første hjørne;
x2,y2 -
koordinater af det andet hjørne;
xN,yN -
sidste hjørne koordinater
Det vil sige, for polygon nr. 2 ser det sådan ud:
Lad os nu give kortet et navn og knytte kortet til billedet:
Lad os nu sætte alt sammen og nedskrive koordinaterne for sekskant nr. 1 med følgende data: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4= 96, x5= 54, y5=96, x6=16, y6=58.
Se nu på resultatet. Klik på polygon #1 og på polygon #2:
Mulighed for kombination
Der er tilfælde, hvor du skal bruge forskellige områder på samme tid i ét billede, for eksempel en cirkel og et rektangel:
Tilføjelse ved hjælp af TITLE
For hvert område kan du tilføje værktøjstip ved hjælp af title-attributten.
Se nu på resultatet. Hold musen over cirklen og derefter over rektanglet:
Det er alt. Vi fandt ud af billedkortet i HTML (navigationskort).
HTML billeder tilføjet til websider ved hjælp af et tag . Brugen af grafik gør websider mere visuelt tiltalende. Billeder hjælper bedre med at formidle essensen og indholdet af et webdokument.
Brug af HTML-tags
Indsættelse af billeder i et HTML-dokument
1. Tag ![]()
Element repræsenterer et billede og dets reserveindhold, som tilføjes ved hjælp af alt-attributten. Siden elementet
er små bogstaver, anbefales det at placere det inde i et blokelement, f.eks.
Eller
Tag har en påkrævet src-attribut, hvis værdi er den absolutte eller relative sti til billedet:
Til tag Følgende attributter er tilgængelige:
| Attribut | Beskrivelse, accepteret værdi |
|---|---|
| alt | Alt-attributten tilføjer alternativ tekst til et billede. Vises, hvor billedet vises, før det indlæses, eller når grafik er deaktiveret, og vises også som et værktøjstip, når du holder musen over billedet. Syntaks: alt="billedbeskrivelse" . !} |
| krydsoprindelse | Crossorigin-attributten giver dig mulighed for at indlæse billeder fra ressourcer på et andet domæne ved hjælp af CORS-anmodninger. Billeder indlæst på lærred ved hjælp af CORS-anmodninger kan genbruges. Tilladte værdier: anonym - Cross-origin-anmodning foretages ved hjælp af en HTTP-header, og der sendes ingen legitimationsoplysninger. Hvis serveren ikke leverer legitimationsoplysninger til den server, hvorfra indholdet anmodes om, vil billedet blive beskadiget, og dets brug vil være begrænset. brug-legitimationsoplysninger — Cross-origin-anmodning udføres ved at overføre legitimationsoplysninger. Syntaks: crossorigin="anonym" . |
| højde | Højde-attributten angiver højden af billedet i px. Syntaks: height="300" . |
| ismap | ismap-attributten angiver, at billedet er en del af et kortbillede placeret på serveren (et kortbillede er et billede med klikbare områder). Når du klikker på et kortbillede, sendes koordinaterne til serveren som en URL-forespørgselsstreng. ismap-attributten er kun tilladt, hvis elementet Syntaks: ismap. |
| longdesc | En udvidet billedbeskrivelses-URL, der komplementerer alt-attributten. Syntaks: longdesc="http://www.example.com/description.txt" . |
| src | src-attributten angiver stien til billedet. Syntaks: src="flower.jpg" . |
| størrelser | Indstiller billedstørrelsen afhængigt af visningsmulighederne. Virker kun, når srcset-attributten er angivet. Attributværdien er en eller flere strenge, adskilt af kommaer. |
| srcset | Opretter en liste over billedkilder, der vil blive valgt baseret på skærmopløsning. Kan bruges sammen med eller i stedet for src-attributten. Attributværdien er en eller flere strenge, adskilt af kommaer. 
|
| brugskort | Usemap-attributten angiver billedet som et billedkort. Værdien skal begynde med #-symbolet. Værdien er knyttet til værdien af taggets navn eller id-attribut |
| bredde | Bredde-attributten angiver bredden af billedet i px. Syntaks: width="500" . |
1.1. Billedadresse
Billedadressen kan angives fuldt ud (absolut URL), for eksempel:
url(http://anysite.ru/images/anyphoto.png)
Eller via en relativ vej fra dokument eller rodmappe internet side:
url(../images/anyphoto.png) - relativ sti fra dokumentet,
url(/images/anyphoto.png) - relativ sti fra rodmappen.
Dette tolkes som følger:
../ - betyder gå et niveau op, til rodmappen,
billeder/ - gå til mappen med billeder,
anyphoto.png - peger på en billedfil.
1.2. Billeddimensioner
Uden indstilling af billedmålene vises tegningen på siden i dens faktiske størrelse. Du kan redigere billedets dimensioner ved at bruge bredde- og højdeattributterne. Hvis kun én af attributterne er angivet, vil den anden blive beregnet automatisk for at bevare billedets proportioner.
1.3. Grafiske filformater
JPEG-format (Joint Photographic Experts Group). JPEG-billeder er ideelle til fotografier og kan indeholde millioner af forskellige farver. Billeder komprimeres bedre end GIF'er, men tekst og store områder med ensfarvede farver kan blive plettet.
GIF-format (Graphics Interchange Format). Ideel til at komprimere billeder, der har områder med ensfarvede farver, såsom logoer. GIF'er giver dig mulighed for at indstille en af farverne til at være gennemsigtig, så baggrunden på en webside kan vises gennem en del af billedet. GIF'er kan også inkludere simpel animation. GIF-billeder indeholder kun 256 nuancer, hvilket får billederne til at se plettede og urealistiske ud i farver, som plakater.
PNG-format (Bærbar netværksgrafik). Indeholder de bedste funktioner i GIF- og JPEG-formater. Indeholder 256 farver og gør det muligt at gøre en af farverne gennemsigtig, samtidig med at billeder komprimeres til en mindre størrelse end en GIF-fil.
APNG-format (Animeret bærbar netværksgrafik). Et billedformat baseret på PNG-formatet. Giver dig mulighed for at gemme animation og understøtter også gennemsigtighed.
SVG-format (Skalerbar vektorgrafik). En SVG-tegning består af et sæt geometriske former beskrevet i XML-format: linje, ellipse, polygon osv. Både statisk og animeret grafik understøttes. Sættet af funktioner omfatter forskellige transformationer, alfamasker, filtereffekter og muligheden for at bruge skabeloner. SVG-billeder kan ændres størrelse uden at miste kvalitet.
BMP-format (Bitmapbillede). Det er et ukomprimeret (originalt) bitmapbillede, hvis skabelon er et rektangulært gitter af pixels. En bitmapfil består af en header, en palet og grafiske data. Headeren gemmer information om det grafiske billede og filen (pixeldybde, højde, bredde og antal farver). Paletten er kun angivet i de Bitmap-filer, der indeholder paletbilleder (8 eller færre bits) og ikke består af mere end 256 elementer. Grafiske data repræsenterer selve billedet. Farvedybden i dette format kan være 1, 2, 4, 8, 16, 24, 32, 48 bits pr. pixel.
ICO format (Windows-ikon). Filikonlagringsformat i Microsoft Windows. Desuden bruges Windows-ikonet som et ikon på websteder på internettet. Det er et billede af dette format, der vises ved siden af hjemmesidens adresse eller bogmærke i browseren. En ICO-fil indeholder et eller flere ikoner, hvis størrelse og farve kan indstilles separat. Ikonstørrelsen kan være enhver størrelse, men de mest almindelige er firkantede ikoner med sider på 16, 32 og 48 pixels.
2. Tag
Tag
Tagget har en tilgængelig navneattribut, som angiver navnet på kortet. Værdien af navneattributten for tagget
Element
3. Tag
Tag beskriver kun én aktiv region som en del af et billedkort på klientsiden. Elementet har ikke et afsluttende tag. Hvis et aktivt område overlapper et andet, vil det første link fra listen over områder blive implementeret.
| Attribut | Kort beskrivelse |
|---|---|
| alt | Indstiller alternativ tekst til det aktive kortområde. |
| koordinater | Bestemmer placeringen af området på skærmen. Koordinater er angivet i længdeenheder og adskilt med kommaer: Til cirkel— koordinater for cirklens centrum og radius; Til rektangel— koordinater for det øverste venstre og nederste højre hjørne; Til polygon— koordinater for polygonens toppunkter i den påkrævede rækkefølge; det anbefales også at angive de sidste koordinater, lig med den første, for den logiske fuldførelse af figuren. |
| Hent | Komplementerer href-attributten og fortæller browseren, at ressourcen skal indlæses i det øjeblik, brugeren klikker på linket, i stedet for for eksempel at skulle åbne det først (som en PDF-fil). Ved at angive et navn til en attribut, giver vi således et navn til det indlæste objekt. Det er tilladt at bruge en attribut uden at angive dens værdi. |
| href | Angiver URL'en for linket. En absolut eller relativ linkadresse kan angives. |
| hreflang | Angiver sproget for det tilknyttede webdokument. Bruges kun sammen med href-attributten. Accepterede værdier er en forkortelse bestående af et par bogstaver, der angiver sprogkoden. |
| medier | Bestemmer, hvilke typer enheder filen vil blive optimeret til. Værdien kan være en hvilken som helst medieforespørgsel. |
| rel | Udvider href-attributten med oplysninger om forholdet mellem det aktuelle og relaterede dokument. Accepterede værdier: alternativ - link til en alternativ version af dokumentet (f.eks. en udskrevet form af siden, en oversættelse eller et spejl). forfatter — link til forfatteren af dokumentet. bogmærke - Permanent URL brugt til bogmærker. hjælp - link til hjælp. licens - link til copyright-oplysninger for dette webdokument. next/prev - angiver forholdet mellem individuelle URL'er. Takket være denne markering kan Google fastslå, at indholdet på disse sider er relateret i en logisk rækkefølge. nofollow - forhindrer søgemaskinen i at følge links på en given side eller et specifikt link. noreferrer - angiver, at når du følger et link, skal browseren ikke sende en HTTP-anmodningsheader (Referrer), som registrerer information om, hvilken side den besøgende på siden kom fra. prefetch - angiver, at måldokumentet skal cachelagres, dvs. Browseren i baggrunden downloader indholdet af siden til sin cache. søgning - Angiver, at måldokumentet indeholder et søgeværktøj. tag - angiver nøgleordet for det aktuelle dokument. |
| form | Angiver formen på det aktive område på kortet og dets koordinater. Kan tage følgende værdier: rect — rektangulært aktivt område; cirkel — aktivt område i form af en cirkel; poly — aktivt område i form af en polygon; standard — det aktive område optager hele billedets område. |
| mål | Angiver, hvor dokumentet skal downloades, når der klikkes på linket. Accepterer følgende værdier: _self — siden indlæses i det aktuelle vindue; _blank — siden åbnes i et nyt browservindue; _parent — siden indlæses i den overordnede ramme; _top - siden indlæses i hele browservinduet. |
| type | Angiver MIME-typen for linkfilerne, dvs. filtypenavn. |
4. Eksempel på oprettelse af et billedkort
1) Marker det originale billede i aktive områder med den ønskede form. Områdernes koordinater kan beregnes ved hjælp af et fotobehandlingsprogram, f.eks. Adobe Photoshop eller Maling.
Ris. 1. Eksempel på billedmarkering for at oprette et kort 2) Indstil navnet på kortet ved at tilføje det til tagget
Jpg" alt="blomster_foto" width="680" height="383" usemap="#flowers">
!}
Ris. 2. Et eksempel på oprettelse af et billedkort, når du klikker med musemarkøren på en blomst, går du til en side med en beskrivelse
Tag
Inde i beholderen
- et eller flere elementer< >. Disse elementer har intet indhold, men definerer de geometriske områder af billedkortet og de hyperlinks, der er knyttet til hver region
- indhold på blokniveau. Dette indhold bør indeholde< >, som specificerer de geometriske områder af kortet og de links, der er knyttet til hver region
Hvis tag
Hvis områder overlapper hinanden, har det element, der definerer området, der vises tidligere i dokumentet, forrang.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Syntaks
Egenskaber
| klasse | definerer navnet på den klasse, der skal bruges |
|---|---|
| dir | bestemmer retningen af tegnene:
|
| id | unik identifikator |
| lang | definerer sproget for det viste dokument |
| navn | navn på billedkortet. Bruges som værdien af taggets usemap-parameter |
| onblur | element mister fokus |
| onclick | klik på et element |
| ondblklik | dobbeltklik på et element |
| fokus | element får fokus |
| onkeydown | tryk på en tast, når elementet har fokus |
| abepres | at trykke og slippe en tast, når et element har fokus |
| onkeyup | slippe en tidligere trykket tast, når elementet har fokus |
| onmousedown | at klikke på en museknap, når et element har fokus |
| onmousemove | musemarkørbevægelse, når et element har fokus |
| onmouseout | flytte musemarkøren væk fra et element |
| over musen | placere musemarkøren på et element |
| onmouseup | at slippe en tidligere trykket museknap, når et element har fokus |
| stil | angiver et indlejret typografiark |
| titel | værktøjstip |
Eksempel
- afsluttende tag er påkrævet ()
- id-attribut er påkrævet
- Det anbefales at give et tekstalternativ til et grafikkort i tilfælde, hvor grafik ikke er tilgængelig, eller brugeren ikke kan få dem
- Det anbefales ikke at bruge billedkortet som hovednavigation på grund af dårlig support i ældre browsere og stemmebrowsere
Tag — blokniveauelement, dvs. Indholdet af tagget starter altid på en ny linje. Et linjeskift tilføjes også efter tagget.
fordele
- Billedkort giver dig mulighed for at definere enhver form for referenceområdet, hvilket er særligt nyttigt til at angive et geografisk område. Derfor bruges billedkort oftest i geografiske områder.
- Det er mere bekvemt at arbejde med ét billede - du behøver ikke bekymre dig om at samle individuelle fragmenter, når du skærer, og billedet kan nemt placeres på det rigtige sted.
Minusser
- Når linkområdet har en kompleks form, øges mængden af HTML-kode. Konturen tilnærmes af et sæt lige segmenter; for hvert punkt i et sådant segment skal der angives to koordinater, og det samlede antal af sådanne punkter kan være ret stort.
- Følgelig øges kompleksiteten ved at specificere koordinater. Det er ikke praktisk at angive dem manuelt, så du skal bruge specielle programmer, der visuelt viser områder og giver dig mulighed for at redigere dem.
- Når du for eksempel ændrer billedet, når du øger skalaen, skal du nulstille koordinaterne for alle referenceområder.
- Du kan ikke anvende forskellige effekter på billedkort, der er tilgængelige, når du skærer ét billede i fragmenter: rullende effekt, delvis animation, individuel optimering af billeder til hurtig indlæsning.
- Der er ingen klart definerede linkgrænser. Derfor skal disse grænser fremhæves ved hjælp af forskellige midler direkte i billedet. Hvis billedet af en eller anden grund ikke indlæses, bliver det meget problematisk at forstå sættet af links.
Fra et brugervenligt synspunkt har billedkort kun én fordel - medtagelsen af links af forskellige former. Dette tilføjer klarhed til præsentationen af information - vi er ikke begrænset til linkets rektangulære form og kan bruge links med kompleks konfiguration til vores egne formål.
Billedkort er implementeret i to forskellige versioner - server og klient. Når du bruger serverindstillingen, sender browseren en anmodning til serveren om at få adressen på det valgte link og venter på et svar med de nødvendige oplysninger. Denne tilgang kræver ekstra tid til at vente på resultatet og separate filer for hvert billedkort.
I klientversionen er kortet placeret i samme HTML-dokument som linket til billedet. For at angive, at et billede er et kort, skal du bruge elementets usemap-attribut . Værdien er en pegepind til beskrivelsen af kortkonfigurationen, som indstilles ved hjælp af elementet
Eksempel 1: Oprettelse af et billedkort
Inde i beholderen
Element har følgende egenskaber.
- form - definerer formen på det aktive område. Formen kan være i form af en cirkel (cirkel), rektangel (rekt), polygon (poly).
- alt - Tilføjer alternativ tekst for hvert område. Fungerer kun som kommentar til linket, da det ikke vises på skærmen. Påkrævet attribut, hvis href er til stede.
- titel - viser et værktøjstip, når du holder musemarkøren over et område.
- href - angiver adressen på det dokument, der skal gå til; dets virkning ligner en lignende elementattribut .
- koordinater - indstiller koordinaterne for det aktive område. Koordinaterne måles i pixels fra det øverste venstre hjørne af billedet, hvilket svarer til værdien 0, 0. Det første tal er den vandrette koordinat, det andet er den lodrette koordinat. Listen over koordinater afhænger af områdets form.
For en cirkel er der angivet tre tal - koordinaterne for cirklens centrum og radius.