Xəritələr. Şəklin bir hissəsini necə bağlantı etməli
Biz artıq şəkillərdən və onları necə bağlantı etməkdən danışdıq. İndi isə şəkil bağlantılardan danışacağıq.
Siz yəqin bilirsiniz, elə ola bilər ki, bir şəklin üzərində müəyyən sahələrə sıxdıqda müəyyən səhifələrə bağlanmaq olur, bu naviqasiyalı xəritə adlanır. Söhbət ondan gedəcək, naviqasiyalı xəritələr bir neçə dərsdir, lakin çəkinməyin, bu çox da çətin deyil.
Mən başa düşürəm, bağlantılarla olan bölmə sizi bezdirib. Lakin nə etməli, öyrənmək əyləncə deyil və siz həqiqətən də öz əllərinizlə sayt düzəltmək və HTML-i öyrənmək istəyirsinizsə, onda tab gətirməlisiniz :)
Demək belə, ilk olaraq nəzəriyyə.
Naviqasiyalı xəritələr <map></map> teqinin köməkliyi ilə yaradılır. <map> teqi daxilində xəritədə olan həndəsi sahələri (bu dərslikdə düzbucaq olacaq) təyin etmək və onun bağlantısının hara yönəldiyini (yəni ona sıxarkən hara düşəcəksən) göstərmək üçün <area> teq(lər)indən istifadə edilir.
<map> |
Sonra biz pişiklərlə məşq edəcəyik :) (konkret nümunələrdə)
Başlanğıc üçün bizə şəkil lazımdır. Belə bir şəkil götürək:
Şəkil sadədir - mavi düzbucaq şəklindədir (240x140 piksel). Təsəvvür edin ki, №1 və №2 ilə çəkilmiş düzbucaqlar hansı isə düymə, mavi sahə isə çətin fondur. Cədvəl yaradaraq (cədvəllər haqqında növbəti dərsliklərdə danışılacaq) çətin tipli kod yaradıb orda №1 və №2 sahələrini ayrı şəkil edərək ona bağlantı etmək istəmirsinizsə, onda sizin köməyinizə naviqasiyalı xəritələr gələcək.
Artıq biz bilirik ki, həndəsi sahələri yaratmaq və onlara bağlantı qoşmaq üçün <area> teqi və təbii ki, onun atributları kömək edir. Bu atributlar "shape" və "coords"dur.
"shape" artibutu - sahəni təyin edir: o, düzbucaq (shape="rect"), dövrə (shape="circle") və ya çoxbucaq (shape="poly") ola bilər. İndi biz düzbucaqla işləyəcəyik, ona görə də:
<map> |
"coords" atributu - koordinatları təyin edir (bizim həndəsi fiqurun yerləşməsi). Koordinatlar və onların sayları bizim seçdiyimiz formadan asılıdır.
"Stop! Stop!" deyin, "hansı koordinatlardır?" - Məktəbdə keçdiyiniz həndəsə dərslərini yada salın :)
Güman edirəm ki, bütün bunlar sizə aydın olmalıdır. Hesablanma sol yuxarı küncdən başlayacaq, onu koordinatın başlanğıcı sayın (0;0). Əgər biz düzbucaqlı ilə işləyiriksə, bizə onun sol-yuxarı və sağ-aşağı künclərinin koordinatları lazımdır. "coords" atributunun koordinatlarının yazılma ardıcıllığı növbəti qayda ilədir:
<area shape="rect" coords="x1,y1,x2,y2">
Bizim nümunədə №1 düzbucağının koordinatları növbəti cürdür:
x1=25, y1=36, x2=114, y2=98
Demək kod növbəti şəkildə olacaq:
<map> |
İndi isə bizin sahənin hansı hissəyə bağlandığını yazaq, bunun üçün bizə məlum olan "href" atributundan istifadə edək:
<map> |
Hər şey yaxşıdır, lakin bütün bunlar bəs etmir, xəritənin bir hissəsinin bağlantı olması üçün biz ona ad verməli və xəritə ilə bağlamalıyıq.
<map> teqində "name" atributu (xəritənin adı) var, gəlin xəritəmizi "xerite1" adlandıraq:
<map name="xerite1"> |
Xəritəni şəkillə bağlamaq üçün usemap="#xəritənin_adı" atributundan istifadə etmək lazımdır:
<img src="bluerects.gif" usemap="#xerite1"> |
Nəticəyə baxaq (№1 düzbucağına basın):
İndi özünüz məşq üçün №2 düzbucağının koordinatlarını (x1=153, y1=11, x2=219, y2=127) <area>-da yazın, sonra isə növbəti addıma kecək və davam edək.