Tento príspevok vás naučí:
- Čo sú to obrázkové mapy HTML?
- Ako vytvoriť obrázkové mapy v dokumente HTML?
- Ako vytvoriť obrázkovú mapu prepojenú s inou stránkou?
Čo sú to obrázkové mapy HTML?
Obrazová mapa je obrázok s oblasťami, na ktoré je možné kliknúť. Ak chcete vytvoriť obrázkovú mapu v HTML, „
Syntax
Syntax na zadanie obrázkových máp v dokumente HTML je uvedená nižšie:
< img src = 'images/img1.jpg' všetko = 'notebook' mapu použitia = '#clickspace' >
< mapa názov = 'clickspace' >
< oblasť tvar = 'rect' súradnice = '224,37,422,312' href = 'laptop.html' >
< / mapa >
' ” prvok je definovaný s nasledujúcimi atribútmi:
- “ src “ určuje cestu obrázka.
- “ všetko ” zobrazuje alternatívny text, keď sa obrázok nedá načítať.
- “ mapu použitia ” je špecifikované, aby sa oblasti obrázka dali kliknúť. Ak chcete vytvoriť odkaz, jeho hodnota musí byť rovnaká ako trieda alebo id prvku „
'
- “ tvar “ určuje veľkosť oblasti HTML “
' prvok. - “ súradnice ” definuje súradnice klikateľnej oblasti.
- “ href ” určuje URL zdroja.
Ako vytvoriť obrázkové mapy v dokumente HTML?
Ak chcete vytvoriť obrázkovú mapu v dokumente HTML, prečítajte si uvedené pokyny:
- V HTML pridajte „ 'prvok a priradiť triedu' obrázková mapa “.
- V rámci tohto divu pridajte „
” na pridanie obrázka spojeného s vyššie uvedenými atribútmi.
- Potom pridajte kód HTML „
“ a priraďte mu “ klikací priestor ' názov. - Všimnite si, že „ mapu použitia ” atribútu je priradený názov “ #clickspace “ ukazujúce na „ názov ” atribútu značky “
- Vnútri pridajte „
< div trieda = 'image-map' >” tag s vyššie uvedenými atribútmi:
< img src = 'images/img1.jpg' všetko = 'notebook' mapu použitia = '#clickspace' >
< mapa názov = 'clickspace' >
< oblasť tvar = 'rect' súradnice = '224,37,422,312' href = 'laptop.html' >
< / mapa >
< / div >Prejdime k sekcii CSS, aby sme upravili veľkosť obrázka.
Štýl „
“ v CSSVyužite „ .image-map ” pre prístup k “
” a použite nasledujúce vlastnosti CSS: .image-map {
šírka : 700px;
marža: auto;
}Tu je popis spomenutých vlastností CSS:
- ' šírka vlastnosť nastavuje šírku prvku div.
- ' marža “ vlastnosť pridáva viac priestoru okolo prvku.
Prvok štýlu „img“.
.image-map img {
šírka : 100 %;
}Pozrite si, súradnice oblasti špecifikované v „ súradnice ” je teraz možné kliknúť:
V ďalšej časti sa naučíme, ako prepojiť obrazovú mapu s iným zdrojom.
Ako vytvoriť obrázkovú mapu prepojenú s inou stránkou?
Vytvorte ďalšiu HTML stránku s príponou “ .html “ podľa nižšie uvedených krokov:
- V našom prípade mu dáme názov „ laptop.html “.
- Pridajte prvok div a priraďte mu triedu “ laptop-img “.
- Potom umiestnite obrázok pomocou „
prvok a priradiť prvok src “ a „ šírka “ atribúty.
- Ďalej špecifikujte odsek pomocou „ ' prvok:
< img src = '/images/laptop.jpg' šírka = '400 pixelov' >
< p >Prenosný počítač je prenosný počítač, ktorý možno presúvať a používať v rôznych nastaveniach.< / p >
< / div >V CSS zadajte nasledujúce vlastnosti CSS do „ laptop-img ' trieda:
.laptop-img {
šírka : 500px;
marža: auto;
}Výkon
Teraz prepojíme „ laptop.html “strana k obrázku”
< oblasť tvar = 'rect' súradnice = '310,57,590,470' href = 'laptop.html' >” prvok prvej strany. Ak to chcete urobiť, zadajte adresu URL stránky do „ href ” prvku “ ”, ako je uvedené nižšie: Výkon
Úspešne sme sa naučili, čo sú obrazové mapy a ako sú prepojené s inými zdrojmi.
Záver
HTML '
” prvok sa používa na vytvorenie obrázkovej mapy alebo obrázka s klikateľnými oblasťami. Ak chcete definovať klikateľné oblasti obrázka, jednu alebo viacero „ ” tagy sú pridané v rámci elementu “ - V rámci tohto divu pridajte „