HTML slikovne karte

Html Slikovne Karte



Često ste možda posjećivali web stranice na kojima ste mogli pronaći poveznicu poput ove: ' Posjetite poveznicu da saznate više ”. Kao rezultat toga, ako kliknete na ovo, odvest ćete se na drugu web stranicu. Na isti način, HTML-ova funkcija mapiranja slika omogućuje nam dodavanje poveznica koje se mogu kliknuti slikama. Stranica će nas uputiti na drugi izvor kada kliknete na to određeno područje.

Ovaj će vas post naučiti:

Što su HTML slikovne karte?

Karta slike je slika s područjima na koja se može kliknuti. Da biste napravili mapu slika u HTML-u, ' ” koristi se element. Štoviše, jedan ili više ' ” dodaju se oznake unutar elementa “” za određivanje područja.





Sintaksa



Sintaksa za određivanje mapa slika u HTML dokumentu navedena je u nastavku:



< img src = 'slike/img1.jpg' sve = 'laptop' mapa korištenja = '#clickspace' >

< karta Ime = 'klikni prostor' >

< područje oblik = 'pravo' koordinate = '224,37,422,312' href = 'laptop.html' >

< / karta >

' ” element je definiran sa sljedećim atributima:



  • “ src ” određuje putanju slike.
  • “ sve ” prikazuje alternativni tekst kada se slika ne može učitati.
  • “ mapa korištenja ” navedeno je kako bi se na područja slike moglo kliknuti. Da biste napravili poveznicu, njezina vrijednost mora biti ista kao klasa ili id ​​elementa “”.

' ” dodaje se element sa sljedećim atributima:

  • “ oblik ” određuje veličinu područja HTML-a “ ” element.
  • “ koordinate ” atribut definira koordinate područja na koje se može kliknuti.
  • “ href ” postavlja URL izvora.

Kako stvoriti mape slika u HTML dokumentu?

Za izradu slikovne karte u HTML dokumentu pogledajte dane upute:



  • U HTML dodajte '
    ' element i dodijelite klasu ' slika-mapa ”.
  • Unutar ovog diva dodajte ' ” za dodavanje slike povezane s gore navedenim atributima.
  • Zatim dodajte HTML ' ' i dodijelite mu ' klik prostor ' Ime.
  • Imajte na umu da ' mapa korištenja ” atributu se dodjeljuje naziv “ #clickspace ' pokazujući na ' Ime ” atribut oznake “”.
  • Unutar njega dodajte ' ” s gore navedenim atributima:
< div razreda = 'image-map' >

< img src = 'slike/img1.jpg' sve = 'laptop' mapa korištenja = '#clickspace' >

< karta Ime = 'klikni prostor' >

< područje oblik = 'pravo' koordinate = '224,37,422,312' href = 'laptop.html' >

< / karta >

< / div >

Idemo prema odjeljku CSS da prilagodimo veličinu slike.

Stil “
” u CSS-u

Iskoristite ' .slika-mapa ' za pristup '

” i primijenite sljedeća CSS svojstva:

.slika-mapa {

širina : 700 px;

margina: auto;

}

Ovdje je opis spomenutih CSS svojstava:

  • ' širina ” Svojstvo postavlja širinu elementa div.
  • ' margina ” svojstvo dodaje više prostora oko elementa.

Element stila 'img'.

.image-map img {

širina : 100 %;

}

Pogledajte, koordinate područja navedene u ' koordinate ” sada se može kliknuti:

U sljedećem odjeljku naučit ćemo kako povezati slikovnu kartu s drugim izvorom.

Kako stvoriti mapu slika povezanu s drugom stranicom?

Napravite drugu HTML stranicu s ekstenzijom ' .html ” slijedeći dolje navedene korake:

  • U našem slučaju, dajemo mu naziv ' prijenosno računalo.html ”.
  • Dodajte element div i dodijelite mu klasu ' prijenosno računalo-sl ”.
  • Zatim postavite sliku koristeći ' ' element i pridružite ' src ' i ' širina ” atributi.
  • Zatim navedite odlomak pomoću '

    ” element:

< div razreda = 'laptop-img' >

< img src = '/images/laptop.jpg' širina = '400 px' >

< str >Laptop je prijenosno računalo koje se može premještati i koristiti u različitim postavkama.< / str >

< / div >

U CSS-u odredite sljedeća CSS svojstva za ' prijenosno računalo-sl ” klasa:

.laptop-img {

širina : 500 px;

margina: auto;

}

Izlaz

Sada ćemo povezati ' prijenosno računalo.html ” stranica do slike ” ” element prve stranice. Da biste to učinili, navedite URL stranice na ' href ” elementa “ ” kao što je prikazano u nastavku:

< područje oblik = 'pravo' koordinate = '310,57,590,470' href = 'laptop.html' >

Izlaz

Uspješno smo naučili što su slikovne karte i kako se povezuju s drugim izvorima.

Zaključak

HTML ' ” element se koristi za izradu slikovne karte ili slike s područjima na koja se može kliknuti. Da biste definirali područja slike koja se mogu kliknuti, jedno ili više ' ” oznake se dodaju unutar elementa “”. Štoviše, atributi povezani s oznakom “ ” su “ oblik ”, “ koordinate ', i ' href ”. Ovaj post na primjeru ilustrira kako izraditi HTML mape slika.

ostalo

Kategorija

Popularni Postovi

Zašto se %c koristi u C programiranju

Koji su koraci za preimenovanje datoteke u Gitu?

Kako ažurirati sve pakete na Pop!_OS

Kako nabaviti Roblox Studio?

Kako mogu kopirati imenik iz spremnika na host?

Donja funkcija PostgreSQL

Što je Headless WordPress i kako započeti

iTunes se ne otvara u sustavu Windows 10? Evo 5 rješenja za popravak! 2022

Kako dohvatiti ID kliknutog gumba koristeći JavaScript/jQuery?

Kako stvoriti prikaz podataka u Elasticsearchu?

Što je Event Viewer i kako ga koristiti u sustavu Windows

Kako učinkovito koristiti aplikaciju Smart Switch na Androidu

Provjerite ima li event.target specifičnu klasu koristeći JavaScript

Funkcija MySQL Round().

Kako oporaviti nespremljene Word dokumente u sustavu Windows 10?

Čemu služi efemerna pohrana?

Kako ukloniti Discover traku na Androidu

Kako postaviti parametre definicije zadatka u AWS ECS?

Postavite Jenkins poslužitelj pomoću Dockera

Kako postaviti Varnish cache na Ubuntu 18.04