Tämä viesti opettaa sinulle:
- Mitä ovat HTML-kuvakartat?
- Kuinka luoda kuvakarttoja HTML-dokumenttiin?
- Miten luodaan toiselle sivulle linkitetty kuvakartta?
Mitä ovat HTML-kuvakartat?
Kuvakartta on kuva, jossa on alueita, joita voi napsauttaa. Jos haluat tehdä kuvakartan HTML:ssä, '
Syntaksi
Syntaksi kuvakarttojen määrittämiseksi HTML-dokumentissa on mainittu alla:
< img src = 'images/img1.jpg' kaikki = 'kannettava tietokone' käyttökartta = '#clickspace' >
< kartta nimi = 'clickspace' >
< alueella muoto = 'oikea' koordinaatit = '224,37,422,312' href = 'kannettava tietokone.html' >
< / kartta >
' ”-elementti määritellään seuraavilla määritteillä:
- ' src ” määrittää kuvan polun.
- ' kaikki ” näyttää vaihtoehtoisen tekstin, kun kuvaa ei voi ladata.
- ' käyttökartta ' on määritetty, jotta kuva-alueet voidaan klikata. Linkin tekeminen edellyttää, että sen arvo on sama kuin '
'
- ' muoto 'määrittää HTML:n alueen koon'
”elementtiä. - ' koordinaatit ”-attribuutti määrittää napsautettavan alueen koordinaatit.
- ' href ” -attribuutti määrittää lähteen URL-osoitteen.
Kuinka luoda kuvakarttoja HTML-dokumenttiin?
Voit luoda kuvakartan HTML-dokumenttiin tutustumalla annettuihin ohjeisiin:
- Lisää HTML-koodiin ' ' -elementti ja määritä luokka ' kuva-kartta ”.
- Lisää tähän jakoon '
” -elementti lisätäksesi kuvan, joka liittyy edellä käsiteltyihin määritteisiin.
- Lisää sitten HTML '
' -elementti ja anna sille ' clickspace ”nimi. - Huomaa, että ' käyttökartta 'attribuutille on annettu nimi' #clickspace 'osoittaa' nimi '
- Lisää sen sisään '
< div luokkaa = 'kuvakartta' >”-tunniste yllä mainituilla attribuutilla:
< img src = 'images/img1.jpg' kaikki = 'kannettava tietokone' käyttökartta = '#clickspace' >
< kartta nimi = 'clickspace' >
< alueella muoto = 'oikea' koordinaatit = '224,37,422,312' href = 'kannettava tietokone.html' >
< / kartta >
< / div >Siirrytään kohti CSS-osiota säätääksesi kuvan kokoa.
Tyyli “
” CSS:ssäKäytä ' .image-map ' luokka päästäksesi '
”-elementti ja käytä seuraavia CSS-ominaisuuksia: .image-map {
leveys : 700px;
margin: auto;
}Tässä on kuvaus mainituista CSS-ominaisuuksista:
- ' leveys ”-ominaisuus määrittää div-elementin leveyden.
- ' marginaali ”-ominaisuus lisää tilaa elementin ympärille.
Tyyli 'img' Element
.image-map img {
leveys : 100 %;
}Katso kohdassa ' koordinaatit '-attribuutit ovat nyt napsautettavissa:
Seuraavassa osiossa opimme linkittämään kuvakartan toiseen lähteeseen.
Miten luodaan toiselle sivulle linkitetty kuvakartta?
Luo toinen HTML-sivu, jonka laajennus on ' .html ' noudattamalla alla mainittuja vaiheita:
- Meidän tapauksessamme annamme sille nimen ' kannettava tietokone.html ”.
- Lisää div-elementti ja määritä sille luokka ' kannettava kuva ”.
- Aseta sitten kuva käyttämällä '
' -elementti ja liitä ' src ' ja ' leveys ” attribuutteja.
- Määritä seuraavaksi kappale käyttämällä ' ”elementti:
< img src = '/images/laptop.jpg' leveys = '400px' >
< s >Kannettava on kannettava tietokone, jota voidaan siirtää ja käyttää useissa eri asetuksissa.< / s >
< / div >Määritä CSS:ssä seuraavat CSS-ominaisuudet ' kannettava kuva ”luokka:
.laptop-img {
leveys : 500px;
margin: auto;
}Lähtö
Nyt yhdistämme ' kannettava tietokone.html 'sivulta kuvaksi'
< alueella muoto = 'oikea' koordinaatit = '310,57,590,470' href = 'kannettava tietokone.html' >”-elementti ensimmäisellä sivulla. Voit tehdä tämän määrittämällä sivun URL-osoitteen ' href ' '-elementin attribuutti alla olevan kuvan mukaisesti: Lähtö
Olemme onnistuneesti oppineet, mitä kuvakartat ovat ja miten ne linkitetään muihin lähteisiin.
Johtopäätös
HTML '
” -elementtiä käytetään luomaan kuvakartta tai kuva, jossa on napsautettavat alueet. Voit määrittää kuvan napsautettavat alueet yhden tai useamman ' ' -tunnisteet lisätään ' - Lisää tähän jakoon '