Ez a bejegyzés megtanítja neked:
- Mik azok a HTML képtérképek?
- Hogyan készítsünk képtérképeket HTML-dokumentumban?
- Hogyan hozzunk létre egy másik oldalhoz kapcsolódó képes térképet?
Mik azok a HTML képtérképek?
A képtérkép egy olyan kép, amelyre kattintható területek vannak. Képtérkép HTML-ben történő elkészítéséhez a „
Szintaxis
A HTML-dokumentumban a képtérképek megadásának szintaxisa az alábbiakban található:
< img src = 'images/img1.jpg' minden = 'laptop' használati térkép = '#clickspace' >
< térkép név = 'clickspace' >
< terület alak = 'helyes' koordináták = '224,37,422,312' href = 'laptop.html' >
< / térkép >
Az ' ” elem a következő attribútumokkal van definiálva:
- ' src ” határozza meg a kép elérési útját.
- ' minden ” alternatív szöveget jelenít meg, ha a kép nem tölthető be.
- ' használati térkép ” van megadva, hogy a képterületek kattinthatóak legyenek. Hivatkozás létrehozásához annak értékének meg kell egyeznie a „
Az '
- ' alak ' megadja a HTML terület méretét'
” elemet. - ' koordináták ” attribútum határozza meg a kattintható terület koordinátáit.
- ' href ” attribútum határozza meg a forrás URL-jét.
Hogyan készítsünk képtérképeket HTML-dokumentumban?
Képtérkép HTML-dokumentumban történő létrehozásához kövesse az alábbi utasításokat:
- A HTML-ben adjon hozzá egy „ ' elemet, és rendeljen hozzá egy osztályt ' kép-térkép ”.
- Ebben a divben adjon hozzá egy „
” elemet a fent tárgyalt attribútumokhoz társított kép hozzáadásához.
- Ezután adjon hozzá egy HTML-t '
” elemet, és rendelje hozzá a „ clickspace ” névvel. - Vegye figyelembe, hogy a „ használati térkép ' attribútumhoz a név van hozzárendelve ' #clickspace ' mutatva a ' név ” attribútumot a „
” címke. - Adja hozzá a „
< div osztály = 'kép-térkép' >” címke a fenti attribútumokkal:
< img src = 'images/img1.jpg' minden = 'laptop' használati térkép = '#clickspace' >
< térkép név = 'clickspace' >
< terület alak = 'helyes' koordináták = '224,37,422,312' href = 'laptop.html' >
< / térkép >
< / div >Lépjünk a CSS rész felé a kép méretének beállításához.
Stílus „
” a CSS-benHasználd a ' .image-map ' osztály eléréséhez a '
” elemet, és alkalmazza a következő CSS-tulajdonságokat: .image-map {
szélesség : 700 képpont;
margó: autó;
}Itt található az említett CSS-tulajdonságok leírása:
- Az ' szélesség ” tulajdonság beállítja a div elem szélességét.
- Az ' árrés ” tulajdonság több helyet ad az elem körül.
Stílus „img” elem
.image-map img {
szélesség : 100 %;
}Lásd a „ koordináták ” attribútumok most kattinthatók:
A következő részben megtanuljuk, hogyan kapcsolhatjuk össze a képtérképet egy másik forrással.
Hogyan hozzunk létre egy másik oldalhoz kapcsolódó képes térképet?
Hozzon létre egy másik HTML oldalt a következő kiterjesztéssel .html ” az alábbi lépéseket követve:
- A mi esetünkben ezt a nevet adjuk laptop.html ”.
- Adjon hozzá egy div elemet, és rendeljen hozzá egy osztályt ' laptop-img ”.
- Ezután helyezzen el egy képet a „
' elemet, és társítsa a ' src ” és „ szélesség ” attribútumokat.
- Ezután adjon meg egy bekezdést a ' ” elem:
< img src = '/images/laptop.jpg' szélesség = '400 képpont' >
< p >A laptop egy hordozható számítógép, amely mozgatható és többféle beállításban használható.< / p >
< / div >A CSS-ben adja meg a következő CSS-tulajdonságokat a ' laptop-img ' osztály:
.laptop-img {
szélesség : 500 képpont;
margó: autó;
}Kimenet
Most összekapcsoljuk a „ laptop.html ' oldal egy képhez '
< terület alak = 'helyes' koordináták = '310,57,590,470' href = 'laptop.html' >” eleme az első oldalon. Ehhez adja meg az oldal URL-jét a „ href ” attribútum a „ ” elemhez, az alábbiak szerint: Kimenet
Sikeresen megtanultuk, mik azok a képtérképek, és hogyan kapcsolódnak más forrásokhoz.
Következtetés
A HTML '
” elem képtérkép vagy kattintható területekkel rendelkező kép létrehozására szolgál. A kép kattintható területeinek meghatározásához egy vagy több „ ” címkék hozzáadódnak a „ ” elemhez. Ezenkívül a „ ” címkéhez társított attribútumok „ alak ”, „ koordináták ”, és „ href ”. Ez a bejegyzés egy példával szemlélteti, hogyan lehet HTML képtérképeket létrehozni. - Ebben a divben adjon hozzá egy „