Carduri grafice HTML. Joacă harta Mouse Mouse

Sprijiniți browserele

Atributes.

Exemplu de utilizare

Să luăm în considerare un exemplu în care, atunci când faceți clic pe o anumită figură într-o singură imagine, există o tranziție către diferite pagini web care descriu aceste cifre (legături cu Wikipedia):

Alegeți o cifră:

"4 cifre sunt disponibile pentru alegere"

Și astfel, în scopul a ceea ce am făcut în acest exemplu:

În acest articol, vom lua în considerare cum să facem o carte de imagine client, când faceți clic pe o anumită zonă din care, vom putea merge la o anumită legătură. Maparea hărților pot fi rareori găsite pe site-uri, deoarece acest proces este destul de consumator de timp, dar dacă doriți să vă surprindeți vizitatorii cu un formular neobișnuit pentru referințe și aveți timp liber pentru auto-educație, atunci acest articol este pentru dvs.

Etichetă

Exemplu de utilizare

Să luăm în considerare un exemplu în care, atunci când faceți clic pe o anumită figură într-o singură imagine, există o tranziție către diferite pagini web care descriu aceste cifre (legături cu Wikipedia):

Alegeți o cifră:

"4 cifre sunt disponibile pentru alegere"

Și astfel, în scopul a ceea ce am făcut în acest exemplu:

prompt: Pentru a obține coordonatele imaginii, utilizați editorul de imagini, chiar cel mai simplu editor, de exemplu, A picta.Afișează coordonatele cursorului. Scrieți coordonatele pe foaie sau într-un fișier separat și efectuați valorile de pe pagină.

Dacă întâmpinați dificultăți în efectuarea unei sarcini, verificați codul paginii prin deschiderea unui exemplu într-o fereastră separată și citiți-o cu atenție.

Vlad Merzehevich.

Cardurile de imagine vă permit să legeți legăturile către diferite zone ale unei imagini. Este implementat în două versiuni diferite - server și client. Dacă serverul este aplicat, browserul trimite o solicitare către server pentru a obține adresa linkului selectat și așteaptă un răspuns la informațiile solicitate. Această abordare necesită timp suplimentar pentru a aștepta rezultatul și fișierele individuale pentru fiecare carte de imagine.

În versiunea client, harta este situată în același document HTML ca link-ul cu imaginea.

Client imagine de imagine

Pentru a specifica că imaginea este o hartă, utilizați atributul de etichetă USMAP . Valoarea indică legătura cu descrierea configurației hărții.

Exemplu 1. Utilizarea unei imagini de hartă

Pentru a specifica browserul pe care imaginea este hartă, se aplică atributul USEMAP. Este o referință la configurația configurației cardului, care este setată de etichetă

Atribute zona de etichetă.

formă

Determină forma regiunii active. Forma poate fi sub forma unui cerc (cerc), dreptunghi (rect), un poligon (poli).

alt.

Adăugați text alternativ pentru fiecare zonă. Acesta servește doar un comentariu pentru referință, deoarece ecranul nu este afișat.

coordonate.

Specifică coordonatele zonei active. Coordonatele sunt numărate în pixeli din unghiul stâng sus al imaginii care corespunde la 0,0. Primul număr este coordonata orizontală, al doilea este vertical. Lista de coordonate depinde de forma zonei.

Pentru cerc, sunt stabilite trei numere - coordonatele centrului cercului și a razei.

Pentru un dreptunghi - coordonatele colțului inferior și din dreapta sus.

Pentru poligon, coordonatele vârfurilor sale sunt setate (figura 2).

Smochin. 2. Punctele de coordonate pentru depozitele de deșeuri

href.

Cardurile de imagine vă permit să creați linkuri către diferite zone ale unei imagini. Utilizarea acestei abordări este în mod clar decât legăturile de text obișnuite și vă permite să aplicați un singur fișier grafic pentru a organiza link-uri. Cu toate acestea, nu este necesar să presupunem că imaginile cardului ar trebui incluse peste tot unde sunt necesare legături grafice. În primul rând, ar trebui să evaluați toate argumentele atât pentru opțiunile, precum și pentru opțiunile alternative.

Avantajele cardurilor

1. Cardurile vă permit să specificați orice formă de zonă de referință. Având în vedere că imaginile prin natura lor sunt dreptunghiuri, face o referință grafică a unei forme complexe, de exemplu, pentru a indica zona geografică, fără imagini de card nu este posibilă. De regulă, în subiectele geografice ale imaginii hărții și se aplică cel mai des.

2. Cu un fișier mai convenabil pentru a lucra - nu trebuie să aveți grijă de achiziționarea de fragmente individuale, iar imaginea poate fi plasată cu ușurință în locul potrivit.

dezavantaje

1. Nu puteți instala un vârf pop-up și un text alternativ pentru zone individuale. Textul alternativ vă permite să obțineți informații text despre imagine când încărcarea imaginii este dezactivată în browser. Deoarece încărcarea imaginilor apare după primirea browserului de informații despre acesta, textul modelului de înlocuire apare mai devreme. Și pe măsură ce se încarcă, textul va fi înlocuit de imagine. Pentru carduri, această caracteristică este relevantă, deoarece dacă dezactivați vizualizarea imaginilor pe care mulți utilizatori o fac, vom vedea în cele din urmă un singur dreptunghi gol.

2. Cu o formă complexă, zona de referință mărește cantitatea de cod HTML. Conturul este aproximat de un set de segmente drepte, trebuie stabilite două coordonate pentru fiecare punct al unui astfel de segment, iar numărul total de astfel de puncte poate fi destul de mare. În corectitudine, trebuie remarcat faptul că formele complexe sunt un caz special și sunt rareori aplicate.

3. Cu carduri, imaginile nu pot fi făcute diferite efecte care sunt disponibile la tăierea unui model pe fragmente: efect de rulare, animație parțială, optimizarea individuală a imaginilor pentru încărcarea rapidă.

Yuzabilitate

Din punctul de vedere al confortului utilizatorului, imaginile cardurilor au doar un singur avantaj - referințe ale unei varietăți de forme. Aceasta adaugă claritate în prezentarea informațiilor - nu suntem limitați la forma dreptunghiulară de referință și putem folosi referințele configurației complexe în scopurile lor. În toate celelalte relații, nu există nici o utilizare - legăturile de text obișnuite sunt mai informative și nu sunt înfricoșătoare pentru a dezactiva afișarea imaginilor din browser. Faptul că o imagine este încărcată mai repede decât aceeași imagine, dar tocată în fragmente și salvată sub forma unui set de fișiere grafice este ușor de luat în considerare. Fiecare dintre aceste fișiere finale poate fi redus utilizând setări individuale de optimizare. Ca rezultat, volumul total al tuturor fragmentelor va ocupa mai puțin spațiu decât o imagine. Nu reduceți și factor psihologic - o persoană pare a fi că un set de imagini mici este încărcat mai repede decât unul mare.

Principalele carduri de defecte nu sunt limite dedicate clar dedicate. Prin urmare, aceste frontiere trebuie alocate prin diferite mijloace din imagine. Dacă imaginea nu pornește din nici un motiv, devine foarte problematică în setul de referințe.

Opțiuni alternative

Nu există nevoie urgentă de a utiliza imagini de card, deci ar trebui să acordați atenție faptului că există alte opțiuni posibile pentru efectuarea sarcinii.

Folosind bliț.

În role flash, puteți crea diferite legături de link-uri utilizând grafică vectorială. Datorită oportunităților largi, puteți crea meniuri uimitoare și instrumente de navigare pe Flash. Dar aici este nevoie de grijă de a nu pierde în spatele copacilor forestieri.

Tăierea imaginilor

Acesta este unul dintre fondurile populare în design. O imagine în acest caz este tăiată prin programe speciale la fragmente, care sunt în cele din urmă reduse împreună, creând o iluzie de o imagine solidă. Deși zonele de tăiere pot fi dreptunghiulare, în majoritatea cazurilor acest lucru este suficient de suficient pentru a crea referințe. Pentru fiecare fragment, puteți alege formatul grafic cel mai potrivit în care va fi salvat, opțiuni de optimizare, adăugați text alternativ. Apoi, chiar și atunci când imaginile sunt dezactivate, limitele zonelor și imaginea textului vor fi clar vizibile.

rezumat

După cum sa dovedit, motivul utilizării imaginilor hărților este doar unul - forma complexă a referințelor dictate de sarcinile de proiectare. Aplicație tipică - regiuni ale unei hărți geografice care servesc drept referințe. În toate celelalte cazuri, puteți face legături text și, dacă aveți nevoie să creați navigare grafică, o imagine pentru confort poate fi tăiată în fragmente. Această abordare va crea mai multă confort pentru utilizatori, în special a celor care, din diferite motive, deconectați afișarea imaginilor din browser. De asemenea, ei trebuie să-și amintească despre ei.

"Am făcut o piesă de prelucrat pentru a găzdui legăturile către diferite zone web definite (" ")

Acum, dacă faceți clic pe figurile cu inscripții, paginile corespunzătoare se vor deschide: profil, jurnal sau toate postările din secțiunea "Lecții Photoshop" (atenție! După transferarea blogului la WordPress și modificările sale, legăturile nu funcționează! Dar lecția rămâne relevantă!)

Pentru ca imaginea să funcționeze, am scris despre un astfel de cod HTML:

Acest cod poate fi introdus în câmpul mesajului (când este apăsat butonul "SOURCE") sau la epigraf ...

Apropo, există alte posturi pe tema: "Ceea ce este html ","Codul HTML de desene ","Link imagine "și așa mai departe.

1. Coordonatele

Pentru a compila codul specificat, mi-am amintit o mică geometrie :)

Sistemul de coordonate: x axa - sus în jos, axa y - de la stânga la dreapta
Pentru a specifica coordonatele cifrei, trebuie să instalați:
- pătrat (sau dreptunghi), ale căror laturi sunt paralele cu axele - coordonatele celor două unghiuri opuse - X1, Y1 și X2, Y2
- Poligon - Coordonatele tuturor unghiurilor
- coordonatele și raza centrului cercului.

În cazul meu, se dovedește, coordonatele punctelor A, C sunt pentru referință "profil" (dreptunghi), puncte D, E, F, G, H - pentru linkul "Jurnal" (poligon), q și lungime R - pentru referință "Lecții Photoshop" (Cercul). Toate aceste numere în codul HTML sunt evidențiate în roșu. În plus, trebuie să cunoașteți dimensiunea imaginii în pixeli (verde)

Nu este nevoie de o precizie specială, deci este posibil să se determine coordonatele cu ajutorul "liniei" în Photoshop - pentru ao numi la apel Ctrl + R.

Am fost mai interesant pentru altcineva să calculeze coordonatele. Pentru această lansare MS vopsea (Start - Toate programele - Standard - Paint) și deschideți un desen în el. Când depuneți cursorul la punctele dorite din panoul de jos, coordonatele lor apar ca înregistrarea cu atenție

2. Codul HTML.

Cardurile de navigare sunt setate de etichetă

Harta tag include etichete care definesc câmpurile geometrice ale desenului și referințelor asociate.

Mi-am dat seama - să creez un card de navigare necesar:

— etichete cu descrierea imaginii

— tag-uri de card.

— etichete regiuni

În cazul meu, valorile s-au dovedit a fi:

• lățime \u003d. "640" Înălțime \u003d. "367" - Dimensiunile imaginii
• src \u003d "https: //syt/f02C73A3CD94.jpg" - adresa imaginii de pe site
• uSEMAP \u003d "# imagine " - Numele de imagine condiționată (poate vreunul)
• numele hărții \u003d. "Imagine" - Numele hărții. (in totalitate corespunde celor de mai sus)

Valori pentru zone de legătură - HREF - ținta legăturii, forma - forma zonei și coordonatelor - Coordonate - corespund celor trei zone (zona) din imagine.

Dreptunghi "profil"

• hREF \u003d "HTTPS: // site / profil /" - Adresa paginii profilului
• forma \u003d "rect" - desemnarea formularului "dreptunghi"
• coordonate \u003d "235,61,472,117" - Coordonatele punctelor A (235.61) și C (472,117)

Poligon "Jurnal"

• hREF \u003d "HTTPS: // site / blog" - Adresa paginii de jurnal
• forma \u003d "poli" - desemnarea formularului "Poligon"
• coords \u003d "235,118,362,118,474,152,457,207,29,146" - Coordonatele unghiurilor poligonului: punctele D (235,118), E (362,118), F (474,207), G (457,207) și H (229,146)

Cercul "Lecții" Photoshop "

• href \u003d "https: //syt/showjournal.php? Jurnalid \u003d 2447247" - adresa postărilor postărilor din secțiunea "Lecții Photoshop"
• forma \u003d "cerc" - desemnare "cerc"
• coords \u003d "551,198,65" - Coordonatele cercului: Centrul - punctul Q (551,198) și Radius - R \u003d 65

3. Finalizați

A submolat toate valorile obținute în "Sistemul" codului HTML pentru imaginea hărții de navigație și primite următoarele:

Acesta este acest cod atunci când utilizați "transformă" în imagine cu zone de legătură.

Pentru instruire există o "versiune ușoară" ușoară a creării legăturilor - Post "Training: Link-uri în imagine"

Dacă ați găsit o greșeală, selectați fragmentul de text și faceți clic pe Ctrl + ENTER..