Tento příspěvek vás naučí:
- Co jsou to obrázkové mapy HTML?
- Jak vytvořit obrázkové mapy v dokumentu HTML?
- Jak vytvořit obrázkovou mapu propojenou s jinou stránkou?
Co jsou to obrázkové mapy HTML?
Obrazová mapa je obrázek s oblastmi, na které lze kliknout. Chcete-li vytvořit obrazovou mapu v HTML, „
Syntax
Syntaxe pro specifikaci obrazových map v dokumentu HTML je uvedena níže:
< img src = 'images/img1.jpg' všechno = 'notebook' mapa použití = '#clickspace' >
< mapa název = 'clickspace' >
< plocha tvar = 'pravý' souřadnice = '224,37,422,312' href = 'laptop.html' >
< / mapa >
' ” prvek je definován s následujícími atributy:
- “ src “ určuje cestu obrazu.
- “ všechno ” zobrazuje alternativní text, když nelze načíst obrázek.
- “ mapa použití ” je specifikováno, aby bylo možné na oblasti obrázku kliknout. Chcete-li vytvořit odkaz, jeho hodnota musí být stejná jako třída nebo id prvku „
'
- “ tvar “ určuje velikost oblasti HTML “
prvek. - “ souřadnice ” definuje souřadnice oblasti, na kterou lze kliknout.
- “ href ” určuje URL zdroje.
Jak vytvořit obrázkové mapy v dokumentu HTML?
Chcete-li vytvořit obrazovou mapu v dokumentu HTML, přečtěte si uvedené pokyny:
- V HTML přidejte „ 'prvek a přiřadit třídu' obrazová mapa “.
- Do tohoto divu přidejte „
” pro přidání obrázku spojeného s výše uvedenými atributy.
- Poté přidejte HTML „
prvek “ a přiřaďte mu “ klikací prostor ' název. - Všimněte si, že „ mapa použití 'atributu je přiřazen název' #clickspace “ ukazující na „ název ” tagu “
- Uvnitř přidejte „
< div třída = 'image-map' >” tag s výše uvedenými atributy:
< img src = 'images/img1.jpg' všechno = 'notebook' mapa použití = '#clickspace' >
< mapa název = 'clickspace' >
< plocha tvar = 'pravý' souřadnice = '224,37,422,312' href = 'laptop.html' >
< / mapa >
< / div >Přesuneme se k sekci CSS a upravíme velikost obrázku.
Styl „
“ v CSSVyužijte „ .image-map ” třídy pro přístup k “
” a použijte následující vlastnosti CSS: .image-map {
šířka : 700px;
okraj: auto;
}Zde je popis zmíněných vlastností CSS:
- ' šířka Vlastnost ” nastavuje šířku prvku div.
- ' okraj “ vlastnost přidává více prostoru kolem prvku.
Styl prvek „img“.
.image-map img {
šířka : 100 %;
}Podívejte se, souřadnice oblasti uvedené v „ souřadnice ” je nyní možné kliknout:
V další části se naučíme, jak propojit obrazovou mapu s jiným zdrojem.
Jak vytvořit obrázkovou mapu propojenou s jinou stránkou?
Vytvořte další HTML stránku s příponou „ .html “ podle níže uvedených kroků:
- V našem případě tomu dáme název „ laptop.html “.
- Přidejte prvek div a přiřaďte mu třídu “ laptop-img “.
- Poté umístěte obrázek pomocí „
prvek a přidružit prvek „ src ' a ' šířka ' atributy.
- Dále určete odstavec pomocí „ prvek:
< img src = '/images/laptop.jpg' šířka = '400px' >
< p >Laptop je přenosný počítač, který lze přemisťovat a používat v různých nastaveních.< / p >
< / div >V CSS zadejte následující vlastnosti CSS do „ laptop-img “třída:
.laptop-img {
šířka : 500px;
okraj: auto;
}Výstup
Nyní propojíme „ laptop.html “stránka k obrázku”
< plocha tvar = 'pravý' souřadnice = '310,57,590,470' href = 'laptop.html' >” prvek první stránky. Chcete-li tak učinit, zadejte adresu URL stránky do „ href ” prvku “ ”, jak je znázorněno níže: Výstup
Úspěšně jsme se naučili, co jsou obrazové mapy a jak jsou propojeny s jinými zdroji.
Závěr
HTML'
” prvek se používá k vytvoření obrázkové mapy nebo obrázku s klikacími oblastmi. Chcete-li definovat oblasti obrázku, na které lze kliknout, použijte jednu nebo více „ ” tagy jsou přidány do elementu “ - Do tohoto divu přidejte „