ბრაუზერის მხარდაჭერა

ატრიბუტები

გამოყენების მაგალითი

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

აირჩიეთ ფიგურა:

"4 ფორმა ხელმისაწვდომია შერჩევისთვის"

და თანმიმდევრობით, რა გავაკეთეთ ამ მაგალითში:

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

თეორია

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

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

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

ვლად მერჟევიჩი

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

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

გამოსახულების რუკის კლიენტის ვერსია იმისათვის, რომ მიუთითოთ, რომ სურათი არის რუკა, გამოიყენეთ ტეგის usemap ატრიბუტი

.

ჩანართი 3

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

.

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

აქტიური არეალის დასაყენებლად, რომელიც არის ბმული HTML დოკუმენტთან, გამოიყენეთ ტეგი

AREA ტეგის ატრიბუტები

ფორმა

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

წრისთვის მითითებულია სამი რიცხვი - წრის ცენტრისა და რადიუსის კოორდინატები.

მართკუთხედისთვის, ზედა მარცხენა და ქვედა მარჯვენა კუთხეების კოორდინატები.

მრავალკუთხედისთვის მითითებულია მისი წვეროების კოორდინატები (ნახ. 2).

ბრინჯი. 2. კოორდინატული წერტილები მრავალკუთხედისთვის

href

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

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

გამოსახულების რუქების უპირატესობები

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

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

ხარვეზები

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

3. გამოსახულების ბარათებით თქვენ არ შეგიძლიათ შექმნათ სხვადასხვა ეფექტები, რომლებიც ხელმისაწვდომია ერთი სურათის ფრაგმენტებად დაჭრისას: მოძრავი ეფექტი, ნაწილობრივი ანიმაცია, სურათების ინდივიდუალური ოპტიმიზაცია მათი სწრაფი ჩატვირთვისთვის.

გამოყენებადობა

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

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

ალტერნატიული ვარიანტები

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

Flash-ის გამოყენებით

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

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

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

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

რეზიუმე

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

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

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

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

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

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

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

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

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

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

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

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