Harta imagini in html
Bună ziua tuturor. Cu tine Bernatsky Andrew.
In acest tutorial voi vorbi despre modul de a crea hărți imagine în HTML.
Harta-imagine - este orice imagine poate fi o imagine care are mai multe zone active,.
De exemplu, atunci când faceți clic pe mouse-ul pe zona activă merge la o adresă URL. Dacă stați în vkontakte.ru, există un exemplu de imagine hartă - este atunci când într-o fotografie, și atunci când treceți cursorul mouse-ului peste o persoană, marcată pe o fotografie care arată numele și prenumele său, precum și trecerea la pagina de această persoană făcând clic pe mouse-ul.
HTML5 și CSS3 practica de la zero la rezultatul!
Acest lucru se face totul este destul de simplu. Ia orice imagine cu prietenii. Este mai bine să-l inserați în propria unitate
Am luat o fotografie, de exemplu.
Pentru ID-ul div este specificat pentru ca am putea atribui orice indentare sau alta care va avea nevoie. Sunt în exemplul meu, nu voi cere nimic.
Parametrul principal în tag-ul img, în acest caz - este usemap = "# img-nav". El indică cartela cu orice nume care ne referim.
Apoi a crea o imagine de hartă. Tag creează o hartă
Să mergem în ordine.
Următoarea etichetă - el spune că distinge acum nucleul.
tag-ul formă Parametru - arata ce tip este zona noastră. De fapt, ceea ce va fi zona noastră, arată valoarea parametrului formă:
HTML5 și CSS3 practica de la zero la rezultatul!
RECT - indică faptul că zona va fi sub forma unui dreptunghi.
poli - poligon arbitrar.
cerc - zona va fi un cerc.
Parametrul Coords conține coordonatele zonei noastre.
Dacă forma = "RECT". indică coordonatele colțul din stânga sus și dreapta jos. Aceasta este, prima pereche de numere care indică stânga sus, iar a doua pereche de numere - în colțul din dreapta jos.
Dacă forma = „poli“. indică coordonatele fiecărui nod poligon. forma = "poli" coords = "80,100,150,100,210,40,300,40,300,110", în acest caz, coordonatele primului nodul va fi 80.100, 150.100 secunde, a treia - 210.40, al patrulea - 300.40, a cincea - 300.110.
Dacă forma = „cerc“. Noi indică coordonatele centrului și raza. forma = „cerc“ coords = „300300100“ sunt coordonatele centrului și raza de 100 300.300.
title = "Andrey" alt = "Andrey" setări familiare. Nu voi insista asupra lor.
Codul complet este după cum urmează:
Acum, când mouse-ul se face clic pe imagine pentru mine, va trece la www.webformyself.com.
Dacă aveți nevoie de mai multe zone active de, apoi pur și simplu adăugați etichete noi
și descrie-le ca va fi nevoie.
Pe această problemă este dedicat crearea de hărți cu imagini în HTML, complet.
Ne vedem în următoarele lecții.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
