Novice web-master tutorial HTML pentru incepatori, face frecvent imagini de referință

Manual pe HTML pentru începători. Cel mai simplu.

Card. Ca parte a imaginii pentru a face o referință.

Avem posibilitatea de a face acest lucru atunci când faceți clic pe diferite zone (părți) ale aceleiași imagini, te duci la o altă pagină, este numit - o hartă de navigație.

Hărțile de navigație sunt specificate containere . etichetă tag-ul include (i) . care definesc zona geometrică în cadrul hărții (avem va fi dreptunghiuri) și referințele asociate fiecărei regiuni (de exemplu, în cazul în care veți obține atunci când faceți clic pe oricare dintre harti).

În continuare trece la exemple vizuale. Pentru a începe, avem nevoie de o imagine. Luați acest lucru:

Știm deja că zona geometrică și este în cazul în care utilizatorul va primi atunci când faceți clic pe ele, determină o etichetă folosind atributele lor. Se atribuie formă și coords.

Caracteristica forma - definește forma suprafeței: dacă va fi un dreptunghi (forma = „rect“), un cerc (forma = „cerc“) sau un poligon (formă = „poli“). Acum vom lucra cu o suprafață dreptunghiulară, astfel:

Caracteristica coords - determină coordonatele (x și y poziție a formelor geometrice noastre). Numărul de coordonate și ordinea lor depind de valorile formei alese.

Numărarea din colțul din stânga sus al imaginii, ia în considerare originea (0, 0). Dacă vom lucra cu o suprafață dreptunghiulară, avem nevoie de coordonatele colțurilor din stânga sus și dreapta-jos al zonei. Procedura de înregistrare a coordonatelor coords atribut, după cum urmează:

În exemplul nostru, dreptunghiul №1 coordonatele sunt:
x1 = 25, y1 = 36, x2 = 114, y2 = 98

Deci, codul va fi după cum urmează:


Acum prescrie în cazul în care regiunea noastră se va referi, pentru aceasta avem nevoie de href atribut deja familiar:



Dar acea parte a imaginii a devenit o referință, trebuie, de asemenea, pentru a specifica numele hartă și să o asociați cu o imagine. Noi etichetați este un nume de atribut - carte de nume, să numim carte - karta1:


Pentru a lega cardul cu imaginea, este necesar să se utilizeze un atribut usemap = „# imya_karty“ la imagine:

Novice web-master tutorial HTML pentru incepatori, face frecvent imagini de referință

. O grămadă de text și tot conținutul, sau orice altceva.


A se vedea rezultatul (click pe dreptunghi №1):

Acum mount-te dreptunghi №2 pentru formare (x1 = 153, y1 = 11, x2 = 219, y2 = 127) și apoi merge mai departe.

articole similare