Ta objava vas bo naučila:
- Kaj so slikovni zemljevidi HTML?
- Kako ustvariti slikovne zemljevide v dokumentu HTML?
- Kako ustvariti slikovni zemljevid, povezan z drugo stranjo?
Kaj so slikovni zemljevidi HTML?
Slikovni zemljevid je slika s področji, ki jih je mogoče klikniti. Če želite narediti zemljevid slik v HTML, uporabite »
Sintaksa
Sintaksa za določanje slikovnih zemljevidov v dokumentu HTML je navedena spodaj:
< img src = 'images/img1.jpg' vse = 'prenosni računalnik' zemljevid uporabe = '#clickspace' >
< zemljevid ime = 'klikni prostor' >
< območje oblika = 'rect' koordinate = '224,37,422,312' href = 'prenosnik.html' >
< / zemljevid >
' ” je definiran z naslednjimi atributi:
- “ src ” določa pot slike.
- “ vse ” prikaže nadomestno besedilo, ko slike ni mogoče naložiti.
- “ zemljevid uporabe ” je določeno, da omogoči klikanje območij slike. Če želite narediti povezavo, mora biti njena vrednost enaka razredu ali ID-ju elementa “
'
- “ oblika « določa velikost območja HTML-ja «
” element. - “ koordinate ” določa koordinate območja, ki ga je mogoče klikniti.
- “ href ” določa URL vira.
Kako ustvariti slikovne zemljevide v dokumentu HTML?
Če želite ustvariti slikovni zemljevid v dokumentu HTML, si oglejte podana navodila:
- V HTML dodajte » ' in dodelite razred ' slika-zemljevid ”.
- Znotraj tega diva dodajte »
”, da dodate sliko, povezano z zgoraj obravnavanimi atributi.
- Nato dodajte HTML '
' in mu dodelite ' clickspace ” ime. - Upoštevajte, da je » zemljevid uporabe ' atributu je dodeljeno ime ' #clickspace «, ki kaže na » ime ” oznake “
- Znotraj dodajte »
< div razred = 'image-map' >” z zgoraj navedenimi atributi:
< img src = 'images/img1.jpg' vse = 'prenosni računalnik' zemljevid uporabe = '#clickspace' >
< zemljevid ime = 'klikni prostor' >
< območje oblika = 'rect' koordinate = '224,37,422,312' href = 'prenosnik.html' >
< / zemljevid >
< / div >Pomaknimo se proti razdelku CSS, da prilagodimo velikost slike.
Slog “
” v CSSUporabite ' .image-map ' za dostop do '
” in uporabite naslednje lastnosti CSS: .image-map {
premer : 700 slikovnih pik;
rob: avto;
}Tukaj je opis omenjenih lastnosti CSS:
- ' premer ” nastavi širino elementa div.
- ' marža ” lastnost doda več prostora okoli elementa.
Element sloga 'img'.
.image-map img {
premer : 100 %;
}Glejte koordinate območja, navedene v ' koordinate ” zdaj klikniti:
V naslednjem razdelku se bomo naučili, kako slikovni zemljevid povezati z drugim virom.
Kako ustvariti slikovni zemljevid, povezan z drugo stranjo?
Ustvarite drugo stran HTML s pripono ' .html « tako, da sledite spodnjim korakom:
- V našem primeru mu damo ime ' laptop.html ”.
- Dodajte element div in mu dodelite razred ' prenosnik-sl ”.
- Nato postavite sliko s pomočjo »
' in povežite element ' src « in » premer ' lastnosti.
- Nato določite odstavek z uporabo ' ” element:
< img src = '/images/laptop.jpg' premer = '400px' >
< str >Prenosni računalnik je prenosni računalnik, ki ga je mogoče premikati in uporabljati v različnih nastavitvah.< / str >
< / div >V CSS podajte naslednje lastnosti CSS za ' prenosnik-sl ” razred:
.laptop-img {
premer : 500 slikovnih pik;
rob: avto;
}Izhod
Zdaj bomo povezali » laptop.html »stran do slike«
< območje oblika = 'rect' koordinate = '310,57,590,470' href = 'prenosnik.html' >” element prve strani. Če želite to narediti, podajte URL strani v » href ” elementa “ ”, kot je prikazano spodaj: Izhod
Uspešno smo spoznali, kaj so slikovni zemljevidi in kako so povezani z drugimi viri.
Zaključek
HTML '
” se uporablja za ustvarjanje slikovnega zemljevida ali slike z območji, ki jih je mogoče klikniti. Če želite določiti področja slike, ki jih je mogoče klikniti, uporabite eno ali več ' ” so dodane oznake znotraj elementa “ - Znotraj tega diva dodajte »