HTML - გაკვეთილი 15. ნავიგაციის რუკები - რუკა

ასეთი გამოსახულების რუქები შეიძლება იყოს კლიენტის ან სერვერის მხრიდან. კლიენტის რუქის ლინკები ინახება თავად დოკუმენტში და მაუსის დაწკაპუნებით ბრაუზერი თავად ადგენს ამ წერტილის კოორდინატების რომელ არეალს ეკუთვნის და გადადის სასურველ ბმულზე.

სერვერის ვერსიით, ეს კოორდინატები ჯერ გადაეცემა სერვერს, მუშავდება იქ სპეციალური პროგრამით და მხოლოდ ამის შემდეგ მიჰყვება ბმულს, ცხადია, სასურველია კლიენტის ნავიგაციის რუქები. ჩვენ განვიხილავთ მათ.

მაგალითად, წარმოვიდგინოთ, რომ ჩვენ ვართ საყოფაცხოვრებო ტექნიკის მაღაზია და ჩვენი ვებსაიტის სათაურში გვაქვს შემდეგი სურათი:

მოდით გავაკეთოთ მისგან ნავიგაციის რუკა, ე.ი. მაცივარზე დაწკაპუნებისას გადამისამართდებით მაცივრებისადმი მიძღვნილ გვერდზე (მოდელებით, აღწერილობებით და ფასებით), მტვერსასრუტსა და სარეცხ მანქანაზე დაწკაპუნებისას გადაგიყვანთ მათ შესაბამის გვერდებზე.

ამისათვის ჩვენ უნდა აღვწეროთ ამ სურათზე მოცემული სფეროები, რომლებიც იქნება ბმულები. ტეგები გამოიყენება ასეთი ტერიტორიების აღსაწერად მხოლოდ ერთი პარამეტრით სახელი, რომელიც განსაზღვრავს ბმული რუკის სახელს და შემდეგ გამოიყენება ამ რუკასთან დასაკავშირებლად.

• ფორმა- განსაზღვრავს არეალის ფორმას, შეუძლია მიიღოს შემდეგი მნიშვნელობები:
  • სწორი- ფართობი მართკუთხედის სახით,
  • წრე- ფართობი წრის სახით,
  • პოლი- ფართობი მრავალკუთხედის სახით,
  • ნაგულისხმევი- მთელი რეგიონი.
• კოტკები- ადგენს ცალკეული ტერიტორიის კოორდინატებს:
  • ამისთვის სწორიმითითებულია მართკუთხედის ზედა მარცხენა და ქვედა მარჯვენა კუთხეების კოორდინატები,
  • ამისთვის წრემითითებულია წრის ცენტრისა და რადიუსის კოორდინატები,
  • ამისთვის პოლიმრავალკუთხედის წვეროების კოორდინატები მითითებულია საჭირო თანმიმდევრობით.
• href- განსაზღვრავს ბმულის მისამართს.
• სამიზნე- გამოიყენება ფრეიმების გამოყენებისას და მიუთითებს ჩარჩოზე, რომელშიც უნდა ჩაიტვირთოს გვერდი.
• ალტ- ადგენს ალტერნატიულ ტექსტს ზონისთვის.

ამ მიზნებისათვის, ჩვეულებრივ, გამოიყენება ზოგიერთი პროგრამა, მაგალითად, Image Ready, რომელსაც აქვს სპეციალური ინსტრუმენტი ტერიტორიების გამოსახატავად და ავტომატურად აშენებს ამ ტერიტორიების აღწერას. ამ პროგრამების ფუნქციონირების განხილვა არ შედის HTML კურსში, ამიტომ აქ კოორდინატებს „თვალით“ დავაყენებთ. კიდევ ერთხელ გადახედეთ ჩვენს სურათს:

ჩვენი სურათის სიგანე 738 პიქსელია, სიმაღლე კი 192 პიქსელი. გავავლოთ ხაზები ჩვენი რეგიონების საზღვრებთან და უხეშად განვსაზღვროთ კოორდინატები. ახლა ჩვენ მზად ვართ დავამატოთ ეს პარამეტრები ჩვენს ტეგებს .

ახლა ჩვენი უბნები ბმულებად იქცა (თუ მაუსის კურსორს ამოძრავებთ, ის პალმად იქცევა). ამ საიტზე არ არის მაცივრებისთვის მიძღვნილი გვერდები, ამიტომ ბმულები გადაგიყვანთ იმავე გვერდზე, მაგრამ თუ შექმნით თქვენთვის სასურველ გვერდებს, არეზე დაწკაპუნება გადაგიყვანთ გვერდზე.

ეს ამთავრებს ჩვენს გაკვეთილებს. თქვენ გაეცანით HTML ენის ყველა შესაძლებლობებს. თქვენი უნარების გასამყარებლად, გაეცანით ორ გაკვეთილს ვებსაიტის შექმნა - ცხრილის განლაგება.

და ბოლოს, უნდა ითქვას, რომ HTML-ში არის კიდევ ორი ​​შესანიშნავი ელემენტი - ტეგები

მონიშნეთ

კონტეინერის შიგნით

• ერთი ან მეტი ელემენტი< >. ამ ელემენტებს არ აქვთ შინაარსი, მაგრამ განსაზღვრავენ გამოსახულების რუკის გეომეტრიულ რეგიონებს და თითოეულ რეგიონთან დაკავშირებულ ჰიპერბმულებს.
• ბლოკის დონის შინაარსი. ეს შინაარსი უნდა შეიცავდეს< >, რომელშიც მითითებულია რუკის გეომეტრიული რეგიონები და თითოეულ რეგიონთან დაკავშირებული ბმულები

თუ ტეგი

თუ რეგიონები ერთმანეთს ემთხვევა, უპირატესობას ანიჭებს ელემენტს, რომელიც განსაზღვრავს რეგიონს, რომელიც ადრე ჩანს დოკუმენტში.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

სინტაქსი

ატრიბუტები

კლასი	განსაზღვრავს გამოსაყენებელი კლასის სახელს
რეჟ	განსაზღვრავს პერსონაჟების მიმართულებას: ltr - მარცხნიდან მარჯვნივ rtl - მარჯვნიდან მარცხნივ
id	უნიკალური იდენტიფიკატორი
ენა	განსაზღვრავს ნაჩვენები დოკუმენტის ენას
სახელი	გამოსახულების ბარათის სახელი. გამოიყენება ტეგის usemap პარამეტრის მნიშვნელობად
ბლომად	ელემენტი კარგავს ყურადღებას
დააწკაპუნეთ	დააწკაპუნეთ ელემენტზე
ondblccck	ორჯერ დააწკაპუნეთ ელემენტზე
ფოკუსირება	ფოკუსირების ელემენტი
onkeydown	კლავიშის დაჭერა, როდესაც ელემენტს აქვს ფოკუსირება
ღილაკზე დაჭერით	კლავიშის დაჭერა და გაშვება, როდესაც ელემენტს აქვს ფოკუსირება
onkeyup	ადრე დაჭერილი კლავიშის გათავისუფლება, როდესაც ელემენტს აქვს ფოკუსირება
onmousedown	მაუსის ღილაკზე დაწკაპუნება, როდესაც ელემენტს აქვს ფოკუსირება
onmousemove	მაუსის მაჩვენებლის მოძრაობა, როდესაც ელემენტს აქვს ფოკუსირება
onmouseout	მაუსის მაჩვენებლის ელემენტიდან გადატანა
მაუსის თავზე	მაუსის მაჩვენებლის ელემენტზე განთავსება
onmouseup	ადრე დაჭერილი მაუსის ღილაკის გათავისუფლება, როდესაც ელემენტს აქვს ფოკუსირება
სტილი	განსაზღვრავს ჩასმული სტილის ფურცელს
სათაური	ინსტრუმენტის მინიშნება

მაგალითი

• დახურვის ტეგი საჭიროა ()
• საჭიროა id ატრიბუტი
• რეკომენდებულია გრაფიკული ბარათის ტექსტის ალტერნატივის მიწოდება იმ შემთხვევებისთვის, როდესაც გრაფიკა არ არის ხელმისაწვდომი ან მომხმარებელი ვერ მიიღებს მათ
• არ არის რეკომენდებული გამოსახულების რუკის გამოყენება, როგორც მთავარი ნავიგაცია, ძველ და ხმოვან ბრაუზერებში ცუდი მხარდაჭერის გამო.

მონიშნეთ — ბლოკის დონის ელემენტი, ე.ი. ტეგის შინაარსი ყოველთვის იწყება ახალი ხაზით. ხაზის შესვენება ასევე ემატება ტეგის შემდეგ.

გამარჯობა. ცოტა ხნის წინ მე მქონდა შესაძლებლობა გამკლავებოდა ისეთ სპეციფიკურ html ფუნქციას, როგორიცაა გამოსახულების რუკა. მართალი გითხრათ, არ მქონია ხშირად გამოყენების საშუალება და მაშინ, როგორც წესი, ყველაფერი მართკუთხა ფორმის ზონებში ხდებოდა. მაგრამ ეს არ იყო იგივე შემთხვევა. ამოცანა იყო გამოსახულების ცალკეული რეგიონების ბმულების განთავსება, რაც ქვეყნის რუკას წარმოადგენდა და, სამწუხაროდ, არანაირი ტილოების ან svg-ის შესახებ საუბარი არ ყოფილა. მხოლოდ html მხოლოდ ჰარდკორი! ასე რომ, დავალება დაყენებულია, Google გააქტიურებულია და ჩვენ შეგვიძლია დავიწყოთ.

თეორია

• კოორდინატები- შერჩევის ზონის კოორდინატები
• href- ბმული, რომელზეც გადახვალთ ზონაზე დაწკაპუნებისას
• nohref- მიუთითებს, რომ ზონა არ შეიცავს ბმულს
• ფორმა- შერჩევის ფორმა
  • წრე- შერჩევის ზონა წრის სახით
  • ნაგულისხმევი- ირჩევს სურათის მთელ არეალს
  • პოლი- შერჩევის არე პოლიგონის სახით
  • სწორი- შერჩევის არე მართკუთხედის სახით
• სამიზნე- განსაზღვრავს სად გაიხსნება ბმული

ვინაიდან ჩემი შერჩევის არე პოლიგონური უნდა ყოფილიყო, ჩვენ ვაზუსტებთ ფორმის ატრიბუტის მნიშვნელობას, ფართობის ტეგს, როგორც პოლი-პოლიგონური ფართობი. ამ რეჟიმში მითითებულია წერტილის კოორდინატები ზედა მარცხენა კუთხესთან მიმართებაში, გამოყოფილი მძიმეებით - x,y. წერტილები ასევე გამოყოფილია მძიმეებით, რაც თავიდან იწვევს დაბნეულობას ასეთი კოდის წაკითხვისას.

ჩვენ ვწერთ Paint-ს

პირველი, მოდით მოვამზადოთ განლაგება:

ტექსტი ( ზღვარი: 0; შიგთავსი: 20 პიქსელი; შრიფტი-ოჯახი: Arial, Helvetica, sans-serif; ) img ( საზღვარი: არცერთი; მონახაზი: არცერთი; ჩვენება: დაბლოკვა; -moz-user-select: არცერთი; -webkit-user -არჩევა: არ არის; ) .ტილო.ხატვა ( საზღვრის ფერი: #3C0; ) .ტილო .შიდა (პოზიცია: შედარებითი; ) .ტილო .წერტილი ( სიგანე: 1px; სიმაღლე: 1px; ფონის ფერი: #fff; საზღვარი: 1px მყარი #000 ზედმეტად გაჟღენთილი პოზიცია: აბსოლუტური; 8px სიტყვა-შეფუთვა: break-word;
javascript-ში ყველაფერი საკმაოდ მარტივია წერის პროცესში, მე გამოვიყენე საკუთარი საბრძოლო ბიბლიოთეკა, ასე რომ, ნუ გაგიკვირდებათ არასტანდარტული ფუნქციები, მოდი, მაუსის ჩამორთმევის ღონისძიება მივამაგროთ სურათზე გამოითვლება და მისი კოორდინატები ჩაიწერება.

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" ("x" : y, "node" : კვანძი); ;
შემდეგ ჩვენ დავწერთ ფუნქციას, რომელიც გამოიმუშავებს ჩვენი რუკის html კოდს.

Var renderInfo = ფუნქცია())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
) ტექსტი += "">"; კვანძები["ინფორმაცია"].appendChild(_.node("span", ტექსტი)); კვანძები["info"].appendChild(_.node("br")); ) ) nodes["info"].appendChild(_.node("span", "

მოდი კლასში ჩავწეროთ ყველაფერი, დამხმარე რამდენიმე ფუნქცია, სულ ეს არის. ვიმედოვნებ, რომ ეს ინსტრუმენტი ვინმესთვის სასარგებლო იქნება.

"მე შევქმენი შაბლონი სხვადასხვა ვებ გვერდების ("") ბმულების განთავსებისთვის მის გარკვეულ ადგილებში

ახლა თუ დააწკაპუნებთ ფორმებს წარწერებით, გაიხსნება შესაბამისი გვერდები: პროფილი, დღიური ან ყველა პოსტი განყოფილებიდან „Photoshop Lessons“ (ყურადღება! ბლოგის 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

(დაწყება - ყველა პროგრამა - აქსესუარები - 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="235,118,362,118,474,152,457,207,229,146" - მრავალკუთხედის კუთხეების კოორდინატები: წერტილები D (235,118), E (362,118), F (474,152), G (457,229), H (457,229)

• წრე "ფოტოშოპის გაკვეთილები"
• 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 ვიდეოებში ფუნქციების გამოყენებით ვექტორული გრაფიკა. მისი ვრცელი შესაძლებლობების წყალობით, შეგიძლიათ შექმნათ განსაცვიფრებელი მენიუები და ნავიგაცია Flash-ში. მაგრამ აქაც სიფრთხილეა საჭირო, რომ ხეებისთვის ტყე არ დაკარგოს.

გამოსახულების დაჭრა

ეს არის ერთ-ერთი პოპულარული საშუალება დიზაინში. ამ შემთხვევაში, ერთი სურათი იჭრება გამოყენებით სპეციალური პროგრამებიფრაგმენტებად, რომლებიც საბოლოოდ გაერთიანებულია და ქმნის სრული სურათის ილუზიას. მიუხედავად იმისა, რომ ჭრის ადგილები შეიძლება იყოს მხოლოდ მართკუთხა, უმეტეს შემთხვევაში ეს საკმარისია ბმულების შესაქმნელად.

თითოეული ფრაგმენტისთვის შეგიძლიათ აირჩიოთ ყველაზე შესაფერისი გრაფიკული ფორმატი, რომელშიც ის შეინახება, ოპტიმიზაციის პარამეტრები და დაამატეთ ალტერნატიული ტექსტი. მაშინ, თუნდაც სურათების ჩვენება გამორთულია, ტერიტორიების საზღვრები და სურათის შემცვლელი ტექსტი აშკარად ჩანს.

რეზიუმე