Crearea unei regiuni active pentru imaginile de carduri în HTML c folosind o etichetă hartă - soluții Web
În această lecție ne vom uita în practică. Cum de a crea o zonă activă pe imaginea hartă cu ajutorul harta HTML-tag. Această etichetă a fost special conceput pentru astfel de sarcini. În cazul în care se poate veni la îndemână. Cred că ori de câte ori imaginația ta va permite. Acesta oferă.
În primul rând, oferă economii în utilizarea grafică. care afectează viteza de ansamblu a paginilor de încărcare, în general.
Ne-ar da. - Ne va arăta ceva despre ceea ce am scris mai sus. Toate referințele sau blocuri sunt inițial în formă dreptunghiulară la fel de mult ca și încercăm. Noi nu vom vorbi despre opțiuni mai complexe. De asemenea, vom lua în considerare noile proprietăți CSS3 border-radius. care poate fi folosit pentru a rotunji orice unghi.
În acest exemplu, este considerat-html5 componente. Deci, dreptunghi nostru roșu. care link-ul ar arata astfel:
Cu o astfel de unitate de simplă combinație a devenit referința noastră. dar este pătrat.
Acum, imaginați-vă că aveți nevoie pentru a face o imagine. să spunem antet. care vor fi regiunile mai activi. iar unele sunt rotunde. unele pătrat. și unele forme non-standard. cum să iasă din această situație. Întrebați fondul general și se aplică pentru fiecare link imaginea sa (ceea ce face ca majoritatea). dar unele link-uri sunt pătrat. plus grafica cantareste kilobytes. Poate Megaocteți. dar este un site de încărcare lent. și cei care au internet slab. chin.
Dar există o soluție. și să ne ajute să găsiți html tag-ul
Prima cifră este un cerc umbrită. a doua cifră este un pătrat solid. a treia cifra de diamant. iar a patra cifră este un triunghi plin. dar nu este simplu. așa cum au fost de trei-dimensionale. Pentru a face acest lucru, după ce a tras. selectați exact jumătate. un pic de experimente cu luminozitate. astfel încât triunghiul nostru devine un fel de două nuanțe.
Deci tastatură pentru a lupta ..
Crearea unei imagini ne e dor deoarece nu este atât de dificil. cu atât mai necesară nu este o capodoperă grafică, ci doar un cuplu - trei forme geometrice. astfel încât să presupunem că este deja acolo. cu o rezoluție de 300 * 300. răspunde la map.gif nume și să înceapă cu marcajul:
1) Creați un document HTML. lasa map.html
Apoi se creează un container. care prescrie modul de a map.gif cu denumirea noastră imagine. și să-l desemneze ca o hartă. prescrie atributul usemap. ceea ce face clar faptul că acest browser imagine este o hartă interactivă. pe care o puteți selecta zona activă:
Start. în acest moment, avem un container cu o imagine activă. dar dacă deschideți browserul. vom vedea o imagine. și plasați cursorul. clică, și așa nu se întâmplă nimic. ca necesitatea de a crea o regiune activă. Prin urmare, vom continua să:
2) Crearea unui container pentru regiunile active care utilizează harta tag. fără a uita că are o etichetă de închidere:
3) Acum trebuie să vă creați link-uri pe teren la figuri cu ajutorul tag-uri din zona. Acestea trebuie plasate între deschiderea și închiderea harta tag.
b) suntem pe piața din a doua etapă. Spre deosebire de forma circulară este. că pentru izolarea unei regiuni dreptunghiulare sau pătrate folosind forma atribut = „rect“. și coords valoarea atributului este setată x1y1, X2Y2 /. Acest lucru înseamnă că, pur și simplu selectați un punct de pe x1y1-acesta este începutul. X2Y2 acest scop. Se pare că, dacă alegeți să lăsați h1u1 0.0 și X2Y2 10.10 veți obține 10 * 10 pătrat din colțul din stânga sus.
c) În al treilea rând, vom analiza atribut implicit. deoarece este cel mai ușor de digerat în această lecție. Acesta vă poate ajuta să identificați tot spațiul rămas. nu este ocupat de alte figuri. pentru a împinge dincolo de cifre. vizitator sau mișcare în direcția cea bună. sau este posibil să primiți informațiile necesare. O astfel că, atunci când a făcut clic pe zona liberă apare. adăuga un eveniment onclick:
d) și în cele din urmă, uita-te la o versiune mai complexă a figurii. Aș spune că nu mai complexe și mai multi-funcțional și non-standard. Acest atribut de formă = „poli“. care vă permite să marcați câmpul cu multiple fațete. în cazul nostru, cu ajutorul ei, am schițat un romb și triunghi. împărțit în două părți. Fiecare dintre aceste cifre se folosește forma = „poli“. Acesta diferă de cifrele anterioare, astfel încât trage o linie de la și la coordonatele amintite. care poate fi N-număr. Ie. x1y1, X2Y2, x3y3, x4y4. Se pare că vă puteți îngloba zona foarte complicate.
Așa că am demontat exemplul. posibil cu o hartă încorporată zonă tag-ul și de a crea diferite zone active, - link-uri către o singură imagine. Dacă dintr-o dată imaginea off. în acest scop, este prescris tag-ul alt = „alt text“. astfel încât, în orice caz, link-ul va fi vizibil. Toate codul sursă. recreat de noi în acest html5-exemplul (tutorial) arata ca acest lucru:
harta imagine interactivă
„Crearea unei regiuni active pentru hărți imagine - tag hartă» - Pagini similare
Crearea și promovarea In zilele noastre, aproape toată lumea înțelege că de afaceri de succes pe Internet este aproape imposibilă fără crearea site-ului. Iar Internetul este primul loc unde ne îndreptăm atenția atunci când ne dorim așa mai departe.
Crearea de site-uri, punctele de vedere vă oferă crearea următoarelor tipuri de site-uri: site-ul de card, site-ul oficial, site-ul blogului, magazin on-line, site-ul companiei. Practic un site mic pentru cei care nu au nevoie să conțină departament.
Site-ul Pyatigorsk - studio TopSite + Web Studio TopSite angajate în crearea de site-uri exclusive de pe CMS și peste tot în România. Importanța unui site web pentru compania de azi nu poate fi supraestimată. Potrivit site-ului ca un judecator client despre compania dumneavoastră în mari.