Conexiuni imagine Html

Am văzut cum să creăm o conexiune hipertext folosind text și am învățat, de asemenea, cum să folosim imaginile în paginile noastre web. Acum vom învăța cum să folosim imaginile pentru a crea hyperlink-uri.







Acest lucru va oferi următoarele, unde puteți face clic pe imagini pentru a ajunge la pagina de pornire a consultării.

Faceți clic pe următorul link

Acesta a fost cel mai simplu mod de a crea hyperlink-uri folosind imagini. Apoi vedem cum putem crea o conexiune de imagine sensibilă la mouse.

Imagini sensibile la mouse

Standardele HTML și XHTML oferă o caracteristică care vă permite să încorporați multe linkuri diferite într-o singură imagine. Puteți crea conexiuni diferite pe o singură imagine pe baza coordonatelor diferite disponibile în imagine. Odată ce conexiunea este atașată la diferite coordonate, putem face clic pe diferitele părți ale imaginii pentru a deschide documentele țintă. Astfel de imagini sensibile la mușchi, cum ar fi hărțile de imagini.

2 moduri de a crea hărți imagine:

  • Imagini de pe hărți de pe hărți - aceasta este activată de atributul tag-ului ismap și necesită acces la server și la o aplicație de procesare a imaginilor asociate.
  • Hărțile de imagini de pe partea clientului sunt create cu atributul usemap al etichetei , împreună cu etichetele corespunzătoare și .

Harta de imagini de pe server

Aici pur și simplu puneți imaginea în interiorul conexiunii hyper și utilizați atributul ismap care o face o imagine specială și atunci când utilizatorul face clic pe un spațiu din imagine, browserul transmite coordonatele indicatorului mouse-ului împreună cu adresa URL specificată în etichetă la serverul web. Serverul utilizează coordonatele mouse-pointer pentru a determina ce document să fie readus în browser.

Când se utilizează ismap, atributul href care conține etichetele trebuie să conțină adresa URL a aplicației de server ca cgi sau script etc. PHP gestionează cererea primită pe baza coordonatelor trecute.







Coordonate ale poziției mouse-ului pixelii de ecran numărați din colțul din stânga sus al imaginii, începând cu (0,0). Coordonatele precedate de un semn de întrebare sunt adăugate la sfârșitul adresei URL.

De exemplu, dacă utilizatorul dă clic pe 20 pixeli peste și 30 de pixeli în jos din colțul din stânga sus al următoarei imagini.

Faceți clic pe următorul link

Ce a fost produs de următorul fragment de cod:

După aceea, browserul trimite următorii parametri pentru a căuta serverul de web, care poate fi procesat de cartela script sau arhiva ismap.cgi și vă puteți conecta orice documente vă place la aceste coordonate:

În acest fel, puteți atribui conexiuni diferite la diferite coordonate ale imaginilor și când se face clic pe aceste coordonate, puteți deschide documentul asociat corespunzător. Pentru a afla mai multe despre atributul ismap. puteți verifica modul de utilizare a imaginilor ismap?

Notă: Veți învăța programarea CGI când studiați programarea Perl. Puteți scrie scriptul pentru a procesa aceste coordonate traversate folosind PHP sau orice alt script, de asemenea. Pentru moment, ne vom concentra atenția asupra învățării HTML și mai târziu puteți revizui această secțiune.

Hărți imagine de pe hărți

Hărțile pentru imaginile de pe partea clientului sunt permise de atributul usemap al etichetei

și definite prin etichete speciale de extensie și .

Imaginea care urmează să formeze harta este introdusă în pagină utilizând eticheta

ca imagine obișnuită, cu excepția faptului că poartă un atribut extra-numit usemap. Valoarea valorii atributului usemap care trebuie utilizată în etichetă la etichetele cărții și imaginile conexiunilor. împreună cu etichetele determină toate coordonatele fotografiei aeriene și conexiunile corespunzătoare.

etichetă în interiorul etichetei hărții, specificați forma și coordonatele pentru a defini limitele fiecărui punct de acces pe care se poate da clic pe imaginea disponibilă. Iată un exemplu dintr-o hartă de imagini:

Sistem de coordonate

Valoarea naturală a coordonate depinde în întregime de forma în cauză. Iată un rezumat, urmat de exemple detaliate:

x1 și y1 ale colțului din stânga sus al dreptunghiului; x2 și y2 sunt coordonatele colțului din dreapta jos.

xc și yc sunt coordonatele centrului cercului, iar raza este raza cercului. Un cerc centrat la 200.50 cu o rază de 25 ar avea un coeficient = "200.50.25"

Diferite perechi x-y definesc nodurile (puncte) poligon cu „linia“ fiind trasată de la un punct la punctul următor. Diamond la sol cu ​​punctul său de top la 20,20 și 40 de pixeli orizontali în etapele sale mai late ar fi coords = „20,20,40,40,20,60,0,40“ atribut.

Toate coordonatele sunt relative la colțul din stânga sus al imaginii (0,0). Fiecare formular are o adresă URL similară. Puteți utiliza orice software de imagine pentru a cunoaște coordonatele diferitelor locații.







Articole similare

Trimiteți-le prietenilor: