Această postare te va învăța:
- Ce sunt Hărțile de imagine HTML?
- Cum se creează hărți imagine în document HTML?
- Cum se creează o hartă de imagine legată de altă pagină?
Ce sunt Hărțile de imagine HTML?
Harta imagine este o imagine cu zone pe care se poate face clic. Pentru a realiza o hartă imagine în HTML, „
Sintaxă
Sintaxa pentru specificarea hărților de imagine într-un document HTML este menționată mai jos:
< img src = „images/img1.jpg” Tot = 'laptop' harta de utilizare = „#clickspace” >
< Hartă Nume = 'clickspace' >
< zonă formă = 'rect' coordonate = „224,37,422,312” href = 'laptop.html' >
< / Hartă >
„ ” elementul este definit cu următoarele atribute:
- „ src ” specifică calea imaginii.
- „ Tot ” afișează un text alternativ atunci când o imagine nu se poate încărca.
- „ harta de utilizare ” este specificat pentru a face clic pe zonele imaginii. Pentru a crea o legătură, valoarea acesteia trebuie să fie aceeași cu clasa sau id-ul elementului „
”.
„
- „ formă ” specifică dimensiunea zonei unui HTML ”
' element. - „ coordonate ” definește coordonatele zonei pe care se poate face clic.
- „ href ” atributul a stabilit adresa URL a sursei.
Cum se creează hărți imagine în document HTML?
Pentru a crea o hartă imagine într-un document HTML, consultați instrucțiunile date:
- În HTML, adăugați un „ ” element și atribuiți o clasă ” imagine-hartă ”.
- În cadrul acestei div, adăugați un „
” element pentru a adăuga o imagine asociată cu atributele discutate mai sus.
- Apoi, adăugați un HTML „
” și atribuiți-i elementul „ clickspace ' Nume. - Rețineți că „ harta de utilizare ” atributului i se atribuie numele “ #clickspace ' arătând spre ' Nume ” atributul etichetei „
”. - În interiorul acestuia, adăugați „
< div clasă = 'harta-imagine' >” etichetă cu atributele menționate mai sus:
< img src = „images/img1.jpg” Tot = 'laptop' harta de utilizare = „#clickspace” >
< Hartă Nume = 'clickspace' >
< zonă formă = 'rect' coordonate = „224,37,422,312” href = 'laptop.html' >
< / Hartă >
< / div >Să ne îndreptăm către secțiunea CSS pentru a ajusta dimensiunea imaginii.
Stil „
” în CSSUtilizați „ .imagine-hartă ” pentru a accesa “
” și aplică următoarele proprietăți CSS: .imagine-hartă {
lăţime : 700px;
marginea: masina;
}Iată descrierea proprietăților CSS menționate:
- „ lăţime „proprietatea setează lățimea elementului div.
- „ marginea ” proprietatea adaugă mai mult spațiu în jurul elementului.
Element de stil „img”.
.imagine-hartă img {
lăţime : 100 %;
}A se vedea, coordonatele zonei specificate în „ coordonate ” sunt acum pe care se poate face clic:
În secțiunea următoare, vom afla cum să conectăm harta imaginii la o altă sursă.
Cum se creează o hartă de imagine legată de altă pagină?
Creați o altă pagină HTML cu extensia „ .html ” urmând pașii menționați mai jos:
- În cazul nostru, îi dăm numele „ laptop.html ”.
- Adăugați un element div și atribuiți-i o clasă „ laptop-img ”.
- Apoi, plasați o imagine folosind „
” și asociați elementul „ src ' și ' lăţime ” atribute.
- Apoi, specificați un paragraf folosind „ ' element:
< img src = „/images/laptop.jpg” lăţime = „400px” >
< p >Un laptop este un computer portabil care poate fi mutat și utilizat într-o varietate de setări.< / p >
< / div >În CSS, specificați următoarele proprietăți CSS la „ laptop-img ” clasa:
.laptop-img {
lăţime : 500px;
marginea: masina;
}Ieșire
Acum, vom lega „ laptop.html ' pagină la o imagine '
< zonă formă = 'rect' coordonate = „310.57.590.470” href = 'laptop.html' >” elementul primei pagini. Pentru a face acest lucru, specificați adresa URL a paginii la „ href ” atribut al elementului „ ”, după cum se arată mai jos: Ieșire
Am învățat cu succes ce sunt hărțile de imagine și cum sunt legate de alte surse.
Concluzie
HTML-ul „
” elementul este utilizat pentru a crea o hartă imagine sau o imagine cu zone pe care se poate face clic. Pentru a defini zonele pe care se poate face clic pe imagine, una sau mai multe „ etichetele sunt adăugate în cadrul elementului „ ”. Mai mult, atributele asociate etichetei „ ” sunt „ formă ”, “ coordonate ', și ' href ”. Această postare a ilustrat cum să creați hărți de imagine HTML cu un exemplu. - În cadrul acestei div, adăugați un „