HTML - Դաս 15. Նավիգացիոն քարտեզներ - քարտեզ

Նման պատկերային քարտեզները կարող են լինել հաճախորդի կամ սերվերի կողմից: Հաճախորդի քարտեզի հղումները պահվում են հենց փաստաթղթում, և սեղմելով մկնիկի վրա, բրաուզերն ինքն է որոշում, թե որ տարածքին են պատկանում այս կետի կոորդինատները և նավարկում դեպի ցանկալի հղումը:

Սերվերի տարբերակով այս կոորդինատները նախ փոխանցվում են սերվերին, այնտեղ մշակվում հատուկ ծրագրով, և միայն դրանից հետո հետևում է հղմանը, ակնհայտ է, որ գերադասելի են հաճախորդի նավիգացիոն քարտեզները: Մենք դրանք կդիտարկենք։

Օրինակ, եկեք պատկերացնենք, որ մենք կենցաղային տեխնիկայի խանութ ենք և մեր կայքի վերնագրում ունենք հետևյալ պատկերը.

Եկեք դրանից կազմենք նավիգացիոն քարտեզ, այսինքն. երբ սեղմում եք սառնարանի վրա, կվերաուղղորդվեք սառնարաններին նվիրված էջ (մոդելներով, նկարագրություններով և գներով), երբ սեղմում եք փոշեկուլի և լվացքի մեքենայի վրա, կտեղափոխվեք դրանց համապատասխան էջեր։

Դա անելու համար մենք պետք է նկարագրենք այս նկարի այն տարածքները, որոնք կլինեն հղումներ: Նման տարածքները նկարագրելու համար օգտագործվում են պիտակներ միայն մեկ պարամետրով անունը, որը սահմանում է հղման քարտեզի անվանումը և այնուհետև օգտագործվում է այս քարտեզին կապելու համար:

• ձեւավորել- սահմանում է տարածքի ձևը, կարող է վերցնել հետևյալ արժեքները.
  • ուղիղ- ուղղանկյունի ձևով տարածք,
  • շրջան- տարածքը շրջանագծի տեսքով,
  • պոլի- տարածքը բազմանկյունի տեսքով,
  • լռելյայն- ամբողջ տարածաշրջանը.
• կոտոշներ- սահմանում է առանձին տարածքի կոորդինատները.
  • Համար ուղիղուղղանկյունի վերին ձախ և ստորին աջ անկյունների կոորդինատները նշված են.
  • Համար շրջաննշվում են շրջանագծի կենտրոնի և շառավիղի կոորդինատները,
  • Համար պոլիԲազմանկյուն գագաթների կոորդինատները նշված են պահանջվող հերթականությամբ:
• href- սահմանում է հղման հասցեն:
• թիրախ- օգտագործվում է շրջանակներ օգտագործելիս և ցույց է տալիս այն շրջանակը, որի մեջ պետք է բեռնվի էջը:
• ալտ- սահմանում է այլընտրանքային տեքստ տարածքի համար:

Այդ նպատակների համար սովորաբար օգտագործվում է ինչ-որ ծրագիր, օրինակ՝ Image Ready, որն ունի տարածքների ուրվագծման հատուկ գործիք և ավտոմատ կերպով կառուցում է այդ տարածքների նկարագրությունները: Այս ծրագրերի գործարկման դիտարկումը ներառված չէ HTML դասընթացում, ուստի այստեղ մենք կդնենք կոորդինատները «աչքով»: Կրկին նայեք մեր պատկերին.

Մեր պատկերի լայնությունը 738 պիքսել է, իսկ բարձրությունը՝ 192 պիքսել։ Գծեր քաշենք մեր մարզերի սահմանների երկայնքով և մոտավորապես որոշենք կոորդինատները։ Այժմ մենք պատրաստ ենք ավելացնել այս պարամետրերը մեր թեգերին .

Այժմ մեր տարածքները դարձել են հղումներ (եթե մկնիկի կուրսորը տեղափոխեք, այն վերածվում է ափի): Այս կայքում չկան էջեր, որոնք նվիրված են սառնարաններին, ուստի հղումները ձեզ կտանեն նույն էջը, բայց եթե ստեղծեք ձեր ուզած էջերը, սեղմելով տարածքը, կհասնեք էջ:

Սա ավարտում է մեր դասերը: Դուք ծանոթացել եք HTML լեզվի բոլոր հնարավորություններին։ Ձեր հմտությունները համախմբելու համար ստուգեք երկու դասերը Կայքի պատրաստում - աղյուսակային դասավորություն:

Ի վերջո, պետք է ասեմ, որ HTML-ում կա ևս երկու հրաշալի տարր՝ թեգերը

Նշել

Տարայի ներսում

• մեկ կամ մի քանի տարրեր< >. Այս տարրերը չունեն բովանդակություն, բայց սահմանում են պատկերի քարտեզի երկրաչափական շրջանները և յուրաքանչյուր տարածաշրջանի հետ կապված հիպերհղումները:
• արգելափակման մակարդակի բովանդակություն: Այս բովանդակությունը պետք է ներառի< >, որոնք նշում են քարտեզի երկրաչափական շրջանները և յուրաքանչյուր տարածաշրջանի հետ կապված հղումները

Եթե ​​պիտակ

Եթե ​​շրջանները համընկնում են, ապա փաստաթղթում ավելի վաղ հայտնված տարածաշրջանը սահմանող տարրը գերակայություն է ստանում:

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Շարահյուսություն

Հատկանիշներ

դաս	սահմանում է օգտագործվող դասի անվանումը
ռեժ	որոշում է կերպարների ուղղությունը. ltr - ձախից աջ rtl - աջից ձախ
id	եզակի նույնացուցիչ
լեզու	սահմանում է ցուցադրվող փաստաթղթի լեզուն
անունը	պատկերի քարտի անվանումը. Օգտագործվում է որպես պիտակի usemap պարամետրի արժեք
onblur	տարրը կորցնում է ուշադրությունը
onclick	սեղմեք տարրի վրա
ondblclick	կրկնակի սեղմեք տարրի վրա
անկենտրոնացում	տարրը ուշադրություն է դարձնում
onkeydown	սեղմելով ստեղնը, երբ տարրը կենտրոնացված է
կոճակի սեղմումով	սեղմելով և բաց թողնելով ստեղնը, երբ տարրը կենտրոնացված է
onkeyup	ազատելով նախկինում սեղմված ստեղնը, երբ տարրը կենտրոնացված է
onmousedown	սեղմելով մկնիկի կոճակը, երբ տարրը կենտրոնացված է
onmousemove	մկնիկի ցուցիչի շարժում, երբ տարրն ունի ֆոկուս
onmouseout	մկնիկի ցուցիչը տարրից հեռացնելով
նավարկելու վրա	մկնիկի ցուցիչը տարրի վրա դնելը
onmouseup	ազատելով մկնիկի նախկինում սեղմված կոճակը, երբ տարրը կենտրոնացված է
ոճը	սահմանում է ներդիր ոճի թերթիկ
վերնագիր	գործիքի հուշում

Օրինակ

• փակման պիտակը պարտադիր է ()
• id հատկանիշը պարտադիր է
• Խորհուրդ է տրվում գրաֆիկական քարտին տեքստային այլընտրանք տրամադրել այն դեպքերում, երբ գրաֆիկան հասանելի չէ կամ օգտագործողը չի կարող դրանք ձեռք բերել:
• Խորհուրդ չի տրվում օգտագործել պատկերի քարտեզը որպես հիմնական նավիգացիա՝ հին և ձայնային բրաուզերների վատ աջակցության պատճառով։

Նշել - բլոկի մակարդակի տարր, այսինքն. պիտակի բովանդակությունը միշտ սկսվում է նոր տողից: Հատկանիշից հետո ավելացվում է նաև տողերի ընդմիջում:

Ողջույն։ Վերջերս ես հնարավորություն ունեցա զբաղվել այնպիսի կոնկրետ html հատկությամբ, ինչպիսին է պատկերային քարտեզը։ Անկեղծ ասած, ես հնարավորություն չեմ ունեցել հաճախ օգտագործել այն, իսկ հետո, սովորաբար, ամեն ինչ արվում էր ուղղանկյունաձև գոտիներում։ Բայց սա նույն դեպքը չէր։ Խնդիրն էր տեղադրել պատկերի առանձին շրջանների հղումներ, որը երկրի քարտեզն էր, և, ցավոք, որևէ կտավի կամ svg-ի մասին խոսք չկար։ Միայն html միայն հարդքոր: Այսպիսով, խնդիրը դրված է, Google-ը ակտիվացված է, և մենք կարող ենք սկսել:

Տեսություն

• կոորդինատները- ընտրության տարածքի կոորդինատները
• href- հղում, որին դուք կգնաք, երբ սեղմեք գոտին
• nohref- ցույց է տալիս, որ գոտին հղում չի պարունակում
• ձեւավորել- ընտրության ձևը
  • շրջան- ընտրության տարածքը շրջանագծի տեսքով
  • լռելյայն- ընտրում է պատկերի ամբողջ տարածքը
  • պոլի- ընտրության տարածքը պոլիգոնի տեսքով
  • ուղիղ- ընտրության տարածք ուղղանկյունի տեսքով
• թիրախ- որոշում է, թե որտեղ է բացվելու հղումը

Քանի որ իմ ընտրության տարածքը պետք է լիներ բազմանկյուն, մենք նշում ենք shape հատկանիշի արժեքը, area tag-ը, որպես բազմանկյուն տարածք: Այս ռեժիմում նշվում են վերևի ձախ անկյունի հետ կապված կետի կոորդինատները՝ բաժանված ստորակետերով՝ x,y: Կետերը բաժանվում են նաև ստորակետերով, ինչը սկզբում շփոթություն է առաջացնում նման ծածկագիրը կարդալիս։

Մենք գրում ենք Paint-ը

Նախ, եկեք պատրաստենք դասավորությունը.

Տեքստ ( լուսանցք՝ 0; լիցք՝ 20 px; տառատեսակ-ընտանիք՝ Arial, Helvetica, sans-serif; ) img ( եզրագիծ՝ չկա; ուրվագիծ՝ ոչ մեկը; ցուցադրում՝ արգելափակում; -moz-user-select՝ ոչ մեկը; -webkit-user -ընտրել. ոչ մեկը; ) .canvas.draw ( եզրագծի գույնը՝ #3C0; ) .կտավ .ներքին ( դիրքը՝ հարաբերական. թաքնված դիրքը՝ բացարձակ; 8px բառ-փաթաթում: break-word;
Javascript-ում ամեն ինչ բավականին պարզ է գրելու ընթացքում, ես օգտագործել եմ իմ սեփական մարտական ​​գրադարանը, այնպես որ մի զարմացեք ոչ ստանդարտ գործառույթներից, եկեք կցենք մկնիկի ներքևի իրադարձությունը #canvas-ին կարտացոլվի և դրա կոորդինատները կգրանցվեն։

Var addPoint = ֆունկցիա(e)( var e = _.getEvent(e), offset = _.getOffset(հանգույցներ["կտավ"]), x = e.clientX + _.getDocScrollLeft() - օֆսեթ, y = e. clientY + _.getDocScrollTop() - offset, node = nodes["canvas"].appendChild(_.node("div", ("class":"point"))); +"px"; node.style.left = x-1"px.push"; ;
Այնուհետև մենք կգրենք ֆունկցիա, որը կգեներացնի մեր քարտեզի html կոդը։

Var renderInfo = ֆունկցիա())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
) text += "">"; հանգույցներ["info"].appendChild(_.node("span", text)); հանգույցներ["info"].appendChild(_.node("br")); ) ) nodes["info"].appendChild(_.node("span", "

Եկեք շրջանակի մեջ մտնենք ամեն ինչ դասարանում, մի քանի օգնական գործառույթ, այսքանը: Հուսով եմ, որ այս գործիքը օգտակար կլինի ինչ-որ մեկին:

«Ես կաղապար եմ պատրաստել տարբեր վեբ էջերի հղումներ («») դրա որոշակի հատվածներում տեղադրելու համար

Այժմ, եթե սեղմեք մակագրություններով ձևերի վրա, կբացվեն համապատասխան էջերը՝ պրոֆիլը, օրագիրը կամ բոլոր գրառումները «Photoshop-ի դասեր» բաժնից (ուշադրություն. բլոգը WordPress տեղափոխելուց և այն վերամշակելուց հետո հղումները չեն աշխատում, բայց դասը մնում է համապատասխան!)

Որպեսզի նկարը աշխատի, մոտավորապես հետևյալ HTML կոդը գրեցի.

Այս կոդը կարող է տեղադրվել հաղորդագրության դաշտում («Աղբյուր» կոճակը սեղմած) կամ էպիգրաֆում...Ի դեպ, թեմայի վերաբերյալ այլ գրառումներ կան.Ինչ է HTML-ը», «Նկարների HTML կոդը», «

նկարի հղում» և այլն:

1. Կոորդինատներ

Վերոնշյալ կոդը կազմելու համար մի փոքր երկրաչափություն հիշեցի :)
Կոորդինատների համակարգ՝ X առանցք՝ վերևից ներքև, Y առանցք՝ ձախից աջ
Նկարի կոորդինատները սահմանելու համար անհրաժեշտ է սահմանել.
- քառակուսի (կամ ուղղանկյուն), որի կողմերը զուգահեռ են առանցքներին - երկու հակադիր անկյունների կոորդինատները՝ X1, Y1 և X2, Y2
- բազմանկյուն - ԲՈԼՈՐ անկյունների կոորդինատները

- շրջան - կենտրոնի կոորդինատները և շառավիղը: Իմ դեպքում, պարզվում է, ինձ կոորդինատներ են պետք— «Պրոֆիլ» հղման համար (ուղղանկյուն), կետեր D, E, F, G, H — «Օրագիր» հղման համար (բազմանկյուն), Q և R երկարությունը՝ «Photoshop Lessons» հղման համար (շրջանակ): Այս բոլոր թվերը վերը նշված HTML կոդի մեջ ընդգծված են կարմիրով:

Բացի այդ, դուք պետք է իմանաք պատկերի չափը պիքսելներով (կանաչ գույն) Հատուկ ճշգրտության կարիք չկա, այնպես որ կարող եք որոշել կոորդինատները Photoshop-ում «քանոն» օգտագործելով. այն զանգահարելու համար սեղմեք

Ctrl+R Ինձ համար ավելի հետաքրքիր էր, որ մեկ ուրիշը հաշվարկեր կոորդինատները։ Դա անելու համար ես գործարկում եմ MS Paint

(Սկսել - Բոլոր ծրագրերը - Աքսեսուարներ - Ներկել) և դրա մեջ բացել նկար: Երբ կուրսորը սավառնում եք ցանկալի կետերի վրա, դրանց կոորդինատները հայտնվում են ներքևի վահանակում, որը ես ուշադիր գրում եմ.

2. HTML կոդը

Նավիգացիոն քարտեզները նշված են պիտակով Քարտեզի պիտակը ներառում է պիտակներ

, որոնք սահմանում են գծագրման քարտեզի երկրաչափական շրջանները և դրանց հետ կապված կապերը։

— Ահա թե ինչպես ես հասկացա. նավիգացիոն քարտեզ ստեղծելու համար անհրաժեշտ է.

— պիտակներ պատկերի նկարագրությամբ

— քարտեզի պիտակներ

տարածքի պիտակներ

• Իմ դեպքում արժեքները պարզվեցին. լայնություն=«640» բարձրություն=«367»
• - պատկերի չափերը
• src="https://site/f02c73a3cd94.jpg" - պատկերի հասցեն կայքում օգտագործման քարտեզ = "#նկար» — պատկեր-քարտեզի պայմանական անվանումը
• (կարող է լինել ցանկացած) քարտեզի անուն=«նկար» (- քարտի անվանումը ամբողջությամբ

համապատասխանում է վերը նշվածին)

Հղման տարածքների արժեքները՝ href՝ հղման թիրախը, ձևը, տարածքի ձևը և կոորդինատները՝ համապատասխանում են պատկերի երեք տարածքներին:

• Ուղղանկյուն «Պրոֆիլ»
• href="https://site/profile/" — պրոֆիլի էջի հասցեն
• shape = "rect" - «ուղղանկյունի» ձևի նշանակում

coords="235,61,472,117" — A (235,61) և C (472,117) կետերի կոորդինատները

• Բազմանկյուն «Օրագիր»
• href="https://site/blog" - օրագրի էջի հասցեն
• shape="poly" - «բազմանկյուն» ձևի նշանակում

coords======================================================================================================================================================================================================

• Շրջանակ «Ֆոտոշոփի դասեր»
• href="https://site/showjournal.php?journalid=2447247&keywordid=929323" — «Photoshop Tutorials» բաժնի գրառումների էջի հասցեն
• shape="circle" - «շրջանակի» ձևի նշանակում

coords="551,198,65" — շրջանագծի կոորդինատները՝ կենտրոն — կետ Q (551,198) և շառավիղ — R=65

3. Ավարտել

Ստացված բոլոր արժեքները ես փոխարինեցի նավիգացիոն պատկերի քարտեզի «համակարգի» HTML կոդի մեջ և ստացա հետևյալը.

Հենց այս կոդը, երբ օգտագործվում է, «վերածվում» է կապող տարածքներով նկարի։

Եթե ​​սխալ եք գտնում, խնդրում ենք ընդգծել տեքստի մի հատվածը և սեղմել Ctrl+Enter.

Վլադ Մերժևիչ

Պատկերային քարտեզները թույլ են տալիս հղումներ կապել նույն պատկերի տարբեր տարածքների հետ: Իրականացվել է երկուսով տարբեր տարբերակներ՝ սերվեր և հաճախորդ: Սերվերի տարբերակն օգտագործելիս զննարկիչը հարցում է ուղարկում սերվերին՝ ընտրված հղման հասցեն ստանալու համար և սպասում է պատասխանի՝ պահանջվող տեղեկություններով: Այս մոտեցումը լրացուցիչ ժամանակ է պահանջում արդյունքին սպասելու համար և առանձին ֆայլերյուրաքանչյուր պատկերային քարտի համար:

Հաճախորդի տարբերակում քարտեզը գտնվում է նույն HTML փաստաթղթում, ինչ պատկերի հղումը:

Պատկերի քարտեզի հաճախորդի տարբերակը

Նշելու համար, որ պատկերը քարտեզ է, օգտագործեք պիտակի usemap հատկանիշը .

Արժեքը հղում է դեպի քարտի կազմաձևման նկարագրությունը:

Ներդիր 4

.

Այս թեգի անվան հատկանիշի արժեքը պետք է համապատասխանի օգտագործման քարտեզի անվանը:

Ակտիվ տարածքը սահմանելու համար, որը հղում է դեպի HTML փաստաթուղթ, օգտագործեք պիտակը

AREA պիտակի հատկանիշներ

ձեւավորել

Սահմանում է ակտիվ տարածքի ձևը: Ձևը կարող է լինել շրջանագծի (շրջանակի), ուղղանկյունի (ուղղանկյուն), բազմանկյունի (բազմանկյուն) տեսքով:

ալտ

Յուրաքանչյուր տարածքի համար ավելացնում է այլընտրանքային տեքստ: Հղման համար ծառայում է միայն որպես մեկնաբանություն, քանի որ այն չի ցուցադրվում էկրանին։

կոորդինատները

Սահմանում է ակտիվ տարածքի կոորդինատները: Կոորդինատները չափվում են պիքսելներով պատկերի վերին ձախ անկյունից, որը համապատասխանում է 0.0 արժեքին: Առաջին թիվը հորիզոնական կոորդինատն է, երկրորդը՝ ուղղահայաց կոորդինատը։ Կոորդինատների ցանկը կախված է տարածքի ձևից:

Շրջանակի համար նշվում են երեք թվեր՝ շրջանագծի կենտրոնի կոորդինատները և շառավիղը։

Ուղղանկյունի համար վերին ձախ և ստորին աջ անկյունների կոորդինատները:

Բազմանկյունի համար նշվում են նրա գագաթների կոորդինատները (նկ. 2):

Բրինձ. 2. Բազմանկյունի կոորդինացիոն կետերը

1. Քարտեզները թույլ են տալիս սահմանել հղման տարածքի ցանկացած ձև: Հաշվի առնելով, որ պատկերներն ուղղանկյուն են, հնարավոր չէ բարդ ձևի գրաֆիկական հղում կատարել, օրինակ՝ նշել աշխարհագրական տարածքը, առանց պատկերային քարտեզների։ Որպես կանոն, աշխարհագրական առարկաներում առավել հաճախ օգտագործվում են պատկերային քարտեզներ։

2. Ավելի հարմար է աշխատել մեկ ֆայլի հետ. դուք չպետք է անհանգստանաք առանձին բեկորների միացման մասին, և նկարը հեշտությամբ կարող է տեղադրվել ճիշտ տեղում:

Թերություններ

1. Դուք չեք կարող գործիքի հուշում և այլընտրանքային տեքստ սահմանել առանձին տարածքների համար: Այլընտրանքային տեքստը թույլ է տալիս ստանալ տեքստային տեղեկատվությունգծագրի մասին, երբ պատկերի բեռնումն անջատված է դիտարկիչում: Քանի որ պատկերները բեռնվում են զննարկիչի կողմից դրանց մասին տեղեկություններ ստանալուց հետո, պատկերի փոխարինման տեքստն ավելի վաղ է հայտնվում: Եվ երբ այն բեռնվում է, տեքստը կփոխարինվի պատկերով:

Պատկերային քարտեզների համար այս հատկությունը տեղին է, քանի որ եթե անջատեք պատկերների դիտումը, ինչը անում են շատ օգտատերեր, դուք կտեսնեք միայն մեկ դատարկ ուղղանկյուն:

2. Հղման տարածքի բարդ ձևի դեպքում HTML կոդի քանակը մեծանում է: Եզրագիծը մոտավոր է ուղիղ հատվածների մի շարքով, այդպիսի հատվածի յուրաքանչյուր կետի համար պետք է նշվեն երկու կոորդինատներ, և այդպիսի կետերի ընդհանուր թիվը կարող է բավականին մեծ լինել. Արդարության համար պետք է նշել, որ բարդ ձևերը հատուկ դեպք են և օգտագործվում են բավականին հազվադեպ:

3. Պատկերային քարտերով դուք չեք կարող ստեղծել տարբեր էֆեկտներ, որոնք հասանելի են մեկ նկարը բեկորների կտրելիս՝ գլորվող էֆեկտ, մասնակի անիմացիա, նկարների անհատական ​​օպտիմիզացում՝ դրանց արագ բեռնման համար:

Օգտագործելիություն Օգտատիրոջ հարմարության տեսանկյունից պատկերային քարտեզներն ունեն միայն մեկ առավելություն՝ տարբեր ձևերի հղումներ։ Սա պարզություն է հաղորդում տեղեկատվության ներկայացմանը. մենք չենք սահմանափակվում հղման ուղղանկյուն ձևով և կարող ենք օգտագործել բարդ կազմաձևման հղումներ մեր սեփական նպատակների համար: Մնացած բոլոր առումներով դրանք անօգուտ են. սովորական տեքստային հղումներն ավելի տեղեկատվական են և չեն վախենում բրաուզերում պատկերների ցուցադրումն անջատելուց: Այն փաստը, որ մեկ պատկերը բեռնվում է ավելի արագ, քան նույն նկարը, բայց կտրված է հատվածների և պահվում է որպես հավաքածու, հեշտ է ձեռք բերել: Այս վերջնական ֆայլերից յուրաքանչյուրը կարող է կրճատվել՝ օգտագործելով անհատական ​​օպտիմալացման կարգավորումները: Արդյունքում, բոլոր հատվածների ընդհանուր ծավալը մեկ պատկերից ավելի քիչ տեղ կզբաղեցնի: Չի կարելի զեղչել հոգեբանական գործոնը. մարդուն թվում է, թե փոքր նկարների հավաքածուն ավելի արագ է բեռնվում, քան մեկ մեծը:

Քարտեզների հիմնական թերությունն այն է, որ չկան հղումների հստակ սահմանված սահմաններ։ Հետևաբար, այս սահմանները պետք է ընդգծվեն՝ օգտագործելով տարբեր միջոցներ, որոնք արդեն պատկերված են: Եթե ​​նկարը ինչ-ինչ պատճառներով չի բեռնվում, ապա հղումների հավաքածուն հասկանալը դառնում է շատ խնդրահարույց։

Այլընտրանքային տարբերակներ

Միշտ չէ, որ հրատապ անհրաժեշտություն կա օգտագործել պատկերային քարտեզներ, այնպես որ պետք է նկատի ունենալ, որ կան նաև ուրիշներ հնարավոր տարբերակներըհանձնարարված առաջադրանքի կատարումը.

Օգտագործելով Flash

Ֆլեշ տեսանյութերում կարող եք ստեղծել կապի տարբեր տարածքներ՝ օգտագործելով գործառույթները վեկտորային գրաֆիկա. Իր լայն հնարավորությունների շնորհիվ դուք կարող եք ստեղծել ցնցող ընտրացանկեր և նավարկություն Flash-ում: Բայց այստեղ էլ զգուշություն է պահանջվում՝ ծառերի համար անտառը չկորցնելու համար։

Պատկերի կտրում

Սա դիզայնի հայտնի միջոցներից է։ Այս դեպքում մեկ պատկեր կտրված է օգտագործելով հատուկ ծրագրերբեկորների մեջ, որոնք վերջապես ի մի են բերվում՝ ստեղծելով ամբողջական պատկերի պատրանք: Թեև կտրող հատվածները կարող են լինել միայն ուղղանկյուն, շատ դեպքերում դա բավարար է հղումներ ստեղծելու համար:

Յուրաքանչյուր հատվածի համար կարող եք ընտրել ամենահարմար գրաֆիկական ձևաչափը, որում այն ​​կպահվի, օպտիմալացման պարամետրերը և ավելացնեք այլընտրանքային տեքստ: Այնուհետև, նույնիսկ եթե պատկերների ցուցադրումն անջատված է, տարածքների սահմանները և պատկերին փոխարինող տեքստը հստակ տեսանելի կլինեն:

Ռեզյումե