Det här inlägget kommer att lära dig:
- Vad är HTML-bildkartor?
- Hur skapar man bildkartor i HTML-dokument?
- Hur skapar man en bildkarta länkad till annan sida?
Vad är HTML-bildkartor?
Bildkartan är en bild med områden som går att klicka på. För att göra en bildkarta i HTML, '
Syntax
Syntaxen för att ange bildkartor i ett HTML-dokument nämns nedan:
< img src = 'images/img1.jpg' allt = 'bärbar dator' använd kartan = '#clickspace' >
< Karta namn = 'klicksteg' >
< område form = 'rätt' koordinater = '224,37,422,312' href = 'laptop.html' >
< / Karta >
den ' element definieras med följande attribut:
- ' src ” anger bildsökvägen.
- ' allt ” visar en alternativ text när en bild inte kan laddas.
- ' använd kartan ” anges för att göra bildområdena klickbara. För att skapa en länk måste dess värde vara detsamma som klassen eller id för elementet '
den '
- ' form ' anger areastorleken för en HTML '
' element. - ' koordinater ” attribut definierar koordinaterna för det klickbara området.
- ' href ”-attributet anger källans URL.
Hur skapar man bildkartor i HTML-dokument?
För att skapa en bildkarta i ett HTML-dokument, kolla in de givna instruktionerna:
- I HTML lägger du till ett ' ' element och tilldela en klass ' bild-karta ”.
- Inom denna div, lägg till en '
”-element för att lägga till en bild som är kopplad till de ovan diskuterade attributen.
- Lägg sedan till en HTML '
' element och tilldela det ' klickutrymme ' namn. - Observera att ' använd kartan ' attribut tilldelas namnet ' #clickspace ' pekar på ' namn ' attribut för taggen '
- Inuti den lägger du till '
< div klass = 'image-map' >' taggen med ovan angivna attribut:
< img src = 'images/img1.jpg' allt = 'bärbar dator' använd kartan = '#clickspace' >
< Karta namn = 'klicksteg' >
< område form = 'rätt' koordinater = '224,37,422,312' href = 'laptop.html' >
< / Karta >
< / div >Låt oss gå mot CSS-sektionen för att justera storleken på bilden.
Stil '
' i CSSAnvänd ' .image-map ' klassen för att komma åt '
' element och tillämpa följande CSS-egenskaper: .image-map {
bredd : 700px;
marginal: bil;
}Här är beskrivningen av de nämnda CSS-egenskaperna:
- den ' bredd egenskapen anger div-elementets bredd.
- den ' marginal ” egenskapen lägger till mer utrymme runt elementet.
Stil 'img' Element
.image-map img {
bredd : 100 %;
}Se, de områdeskoordinater som anges i ' koordinater ”-attribut är nu klickbara:
I nästa avsnitt kommer vi att lära oss hur du länkar bildkartan till en annan källa.
Hur skapar man en bildkarta länkad till annan sida?
Skapa ytterligare en HTML-sida med tillägget ' .html ” genom att följa stegen nedan:
- I vårt fall ger vi det namnet ' laptop.html ”.
- Lägg till ett div-element och tilldela det en klass ' laptop-img ”.
- Placera sedan en bild med hjälp av '
' element och associera ' src ' och ' bredd ' attribut.
- Ange sedan ett stycke med ' ' element:
< img src = '/images/laptop.jpg' bredd = '400px' >
< sid >En bärbar dator är en bärbar dator som kan flyttas och användas i en mängd olika inställningar.< / sid >
< / div >I CSS, ange följande CSS-egenskaper till ' laptop-img ' klass:
.laptop-img {
bredd : 500px;
marginal: bil;
}Produktion
Nu kommer vi att länka ' laptop.html ' sida till en bild '
< område form = 'rätt' koordinater = '310,57,590,470' href = 'laptop.html' >” element på första sidan. För att göra det, ange webbadressen till sidan till ' href ' attribut för elementet ' ' som visas nedan: Produktion
Vi har framgångsrikt lärt oss vad bildkartor är och hur de är kopplade till andra källor.
Slutsats
HTML '
”-elementet används för att skapa en bildkarta eller en bild med klickbara områden. För att definiera bildens klickbara områden, en eller flera ' '-taggar läggs till i elementet ' - Inom denna div, lägg till en '