რა ნიშანი აღწერს კლიენტის მხრიდან გამოსახულების რუკებს. სურათის სფეროებში ბმულების შექმნა: ბმულების რუკა

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

კონტეინერის შიგნით შეგიძლიათ დააკავშიროთ:

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

თუ ტეგი აქვს შერეული შინაარსი (და თეგები) და ბლოკის ელემენტები), ბრაუზერებმა, HTML 4.01 სპეციფიკაციის შესაბამისად, უნდა უგულებელყონ ელემენტები< >.

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

Html: 3.2 | 4 / XHTML: 1.0 | 1.1

Სინტაქსი

ატრიბუტები

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

მაგალითი


აქ არ არის ბმული
ნაცრისფერი ადგილი
ყვითელი ზონა

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

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

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

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

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

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

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

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

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


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

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

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


შედეგი:

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

ამით დასრულებულია ჩვენი გაკვეთილები. თქვენ ახლა იცნობთ HTML- ის ყველა მახასიათებელს. თქვენი უნარების კონსოლიდაციისთვის წაიკითხეთ ვებ – გვერდის დამზადების ორი გაკვეთილი - ცხრილი განლაგება.

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

და ... სინამდვილეში, ეს ძალიან მნიშვნელოვანი ნიშნებია, მაგრამ CSS– ის გარეშე მათი სამართავად მე ვთვლი ამას უბრალოდ "გარყვნილებად", ამიტომ ისინი დეტალურად არის აღწერილი

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

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

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

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

ამ თავში გაიგებთ:

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

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

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

საიმიჯო რუკების გამოყენების საფუძვლები

საიმიჯო რუქები მომხმარებლებს მეგობრულ ინტერფეისს აძლევს სხვა ვებგვერდებზე გადასასვლელად. ასეთი ბმული რომ დაიცვათ, უბრალოდ უნდა აირჩიოთ სასურველი ადგილი სურათზე და დააჭიროთ მაუსს. ასეთი მოწინავე გრაფიკული ინტერფეისის არსებობა ვებ – გვერდების ერთ – ერთი მნიშვნელოვანი უპირატესობაა სხვა ინტერნეტ რესურსებთან შედარებით. ტექსტზე დაფუძნებული მენიუს ნაცვლად, Gopher კლიენტის ინტერფეისის მსგავსად, მომხმარებლებს ეძლევათ ინფორმაციის გრაფიკული გამოსახულებები (სურათი 6.2).

ფიგურა: 6.2. ვიზუალიზაცია ბმულების (გვერდებზე მსოფლიოს შვიდი საოცრების შესახებ) გამოსახულების რუქის გამოყენებით

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

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

ტერმინოლოგია

Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map - ყველა ეს ინგლისური ტერმინი გამოიყენება მითითების ლიტერატურაში იგივე შესაძლებლობის აღსანიშნავად - HTML დოკუმენტში ჩასმული სურათის გამოყენებით, რომლისთვისაც განსაზღვრულია "ცხელი" (ან აქტიური) წერტილები, ან ადგილები, რომლებსაც აქვთ სხვადასხვა URL– ების ბმულები. ჩვენ აღვწერთ ამ მახასიათებელს ფრაზით "რუკა-სურათი", რაც ნიშნავს ამ კომპონენტის კომბინაციას, რომელიც უზრუნველყოფს ამ კონცეფციის განხორციელებას. ძირითადი კომპონენტებია: თავად სურათი, რომელსაც ამ სურათის რუკის მითითებას დავარქმევთ; ცხელი წერტილების კონფიგურაციის აღწერა; ასევე მასთან დაკავშირებული პროგრამული უზრუნველყოფა.

გამოსახულების რუკის გრაფიკული გამოსახვა

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

გამოსახულების რუქის კონფიგურაციის აღწერა

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

განხორციელების ვარიანტები გამოსახულების რუქებისთვის

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

ბოლო პერიოდში სულ უფრო და უფრო ვითარდება კლიენტის ვერსია, რომელიც პირველად განხორციელდა Microsoft Internet Explorer ბრაუზერში. 2.0 ვერსიიდან დაწყებული, ეს ვარიანტი ასევე მხარს უჭერს Netscape ბრაუზერს. ამ ვარიანტს აქვს თავისი უდავო უპირატესობები და უფრო და უფრო პოპულარული ხდება.

გამოსახულების რუქების უპირატესობები და უარყოფითი მხარეები

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

სურათების რუქები ყველაზე სასარგებლოა შემდეგ სიტუაციებში:

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

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

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

გამოსახულების რუქების უარყოფითი მხარეები მოიცავს შემდეგს:

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

სერვერის მხრიდან გამოსახულების რუკების განხორციელება

ვებ – გვერდებზე საიმიჯო რუკების გამოყენება გარკვეულწილად უფრო რთულია, ვიდრე უბრალოდ საინტერესო გრაფიკის ჩასმა და მათთან დაკავშირება. გამოსახულების რუქის სერვერული ვერსიის განსახორციელებლად, HTML დოკუმენტი უნდა განთავსდეს სერვერზე. იგი ასევე მოითხოვს სერვერის კონფიგურაციას, რომ მხარი დაუჭიროს Common Gateway Interface (CGI) სკრიპტებს, რომლებიც ამუშავებენ ბრაუზერის მოთხოვნებს სურათების რუკასთან მუშაობისას. თითოეული გამოსახულების რუქისთვის სერვერზე უნდა განთავსდეს ფაილი, რომელიც აღწერს ცხელი წერტილების კონფიგურაციას. როდესაც თაგვი დააჭერთ სურათს, დაჭერილი მდებარეობის კოორდინატები ბრაუზერის მიერ გადაეცემა სერვერს, რაც ეხება კონფიგურაციის ფაილს, რომელიც არსებითად წარმოადგენს ცხელი წერტილების საძიებო ცხრილს. ძიების შედეგი უბრუნდება ბრაუზერს URL- ის ან შეტყობინების სახით, რომ სურათზე მითითებული მდებარეობის შესაბამისი ცხელი წერტილები ვერ მოიძებნა.

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

შეგახსენებთ, რომ შინაარსის სურათები შეიძლება გამოყენებულ იქნას როგორც ჰიპერტექსტური ბმულები, თუ ისინი მოცემულია თეგში<А>... მაგალითად, სურათის Myimage.gif გრაფიკული მაჩვენებლის შესაქმნელად დოკუმენტის ბმული იმავე დირექტორიაში, სახელწოდებით exampie.html, დაწერდით:

<А HREF=example.html >

ეს HTML კოდი სერვერს ეუბნება, რომ Mylmage.gif სურათზე დაჭერის შემთხვევაში, დოკუმენტი, სახელად example.html, უნდა დაუბრუნდეს ბრაუზერს.

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

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

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

შენიშვნა

ნიშნის პარამეტრების რიგი თვითნებურია, თუმცა, ISMAP პარამეტრი ჩვეულებრივ განთავსებულია ბოლოზე.

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

რჩევა

თითოეული სურათის რუქისთვის საჭიროა ცალკე კონფიგურაციის ფაილი. წესად აქციეთ კონფიგურაციის ფაილის შენახვა იმავე დირექტორიაში და იგივე სახელით, როგორც ასოცირებული სურათი. მაგალითად: main_menu.gif და main menu.map.

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

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

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

რჩევა

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

CERN ფორმატში

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

ტიპის კოორდინატების url მისამართი

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

აქ მოცემულია CERN ფორმატში რუქაზე გამოსახულებაზე ინფორმაციის აღწერის მაგალითი:

rect (56,47) (357,265) http://www.anywhere.com/

წრე (366,147) 109 http://www.anywhere.com/

პოლიგონი (534.62) (699.62) (698.236) (626.261) (534.235) (534.62)

http://www.anywhere.com/

NCSA ფორმატი

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

area_type url კოორდინატები

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

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

NCSA ფორმატში გვხვდება ცირკულარული რეგიონების განსაზღვრის ოდნავ განსხვავებული გზა (შედარებით CERN ფორმატთან და ქვემოთ განხილულ კლიენტის მიერ არჩეულ ვარიანტთან შედარებით). წრიული ფართობი განისაზღვრება ორი წერტილის კოორდინატებით - ცენტრში და წრეზე მწოლი ნებისმიერი წერტილი.

შენიშვნა

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

აქ მოცემულია კონფიგურაციის ფაილის NCSA ფორმატში ჩაწერის მაგალითი:

# კონფიგურაციის ფაილის წერის მაგალითი

rect http://www.anywhere.com/ 56.47 357.265

წრე http://www.anywhere.com/ 366.147 366.256

პოლი http://www.anywhere.com/ 534.62 699.62 698.236 626.261 534.235 534.62

გამოსახულების რუქის კლიენტის ვარიანტი

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

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

შენიშვნა

Netscape ბრაუზერი არ აძლევს ცალკე ფაილს რუკის კონფიგურაციის აღსაწერად.

Მაგალითად:

ამ მაგალითში, ფაილში შენახული სურათი l ogo.gif არის მითითება კლიენტის მხრიდან გამოსახულების რუქისთვის.

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

მონიშნე<МАР>

სპეციალური ნიშანი გამოიყენება გამოსახულების რუქის არეების კონფიგურაციის აღსაწერად<МАР>რომლის ერთადერთი პარამეტრია NAME. NAME პარამეტრის მნიშვნელობა განსაზღვრავს სახელს, რომელიც უნდა ემთხვეოდეს სახელს USEMAP. მონიშნე<МАР> მოითხოვს დასასრულ ნიშანს... ამ წყვილ თეგებში უნდა განთავსდეს რუკის აქტიური უბნების აღწერილობა, რისთვისაც გამოიყენება სპეციალური ნიშანი .

მონიშნე

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

ნიშნის პარამეტრები არის SHAPE, COORDS, HREF, NOHREF, TARGET და ALT. განვიხილოთ ამ პარამეტრების მიზანი.

SHAPE პარამეტრი

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

გაფრთხილება

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

შენიშვნა

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

რჩევა

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

პარამეტრების კოორდინატები

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

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

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

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

ნაგულისხმევი მოცულობა არ საჭიროებს კოორდინატებს.

HREF და NOHREF პარამეტრები

HREF და NOHREF პარამეტრები ერთმანეთს გამორიცხავს. თუ ამ პარამეტრებიდან არც ერთი არ არის მითითებული, მაშინ ამ სფეროსთვის მითითება არ არის. იგივე ნათლად არის განსაზღვრული NOHREF პარამეტრით, რომელიც არ საჭიროებს მნიშვნელობას. HREF პარამეტრი განსაზღვრავს ბმულის მისამართს, რომელიც შეიძლება დაიწეროს აბსოლუტური ან ფარდობითი ფორმით. ჩაწერის წესები მთლიანად ემთხვევა თეგში ბმულების ჩაწერის წესებს<А>.

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

TARGET პარამეტრი

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

ALT პარამეტრი

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

მოდით მივცეთ სხვადასხვა ტიპის სფეროების განსაზღვრის მაგალითი:

<МАР NAME="logo">

მართკუთხა \u003c/ p\u003e \u003cp\u003e (! LANG: ფართობი !}

წრიული არე

HREF \u003d "p.htm" ALT \u003d "(! LANG: მრავალკუთხედი)"> !}

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

კლიენტისა და სერვერის ვარიანტების კომბინაცია

დასაშვებია კომბინირებული ვერსიის გამოყენება, რომელშიც ორივე USEMAP და ISMAP პარამეტრი განისაზღვრება ერთი და იგივე სურათისთვის, რაც გულისხმობს ამ სურათის გამოყენებას როგორც კლიენტის, ისე სერვერული ვერსიების მითითებად. დომინანტია USEMAP. ეს ნიშნავს, რომ ბრაუზერი, რომელიც მხარს უჭერს კლიენტს, გამოიყენებს USEMAP– ს, უგულებელყოფს ISMAP პარამეტრს. ბრაუზერები, რომლებიც მხარს არ უჭერენ კლიენტის ვერსიას და არ ესმით USEMAP პარამეტრის დანიშნულება, HTML– ის ზოგადი წესების შესაბამისად, უგულებელყოფენ მის არსებობას და განახორციელებენ სერვერის ვერსიას, როდესაც ისინი დაადგენენ ISMAP პარამეტრის არსებობას. კომბინირებული ვარიანტი უფრო საიმედოა, მაგრამ მოითხოვს ტერიტორიის კონფიგურაციის მონაცემებს ორივე ვარიანტისთვის. დღესდღეობით, კომბინირებული ვარიანტის გამოყენების საჭიროება სულ უფრო მცირდება, რადგან ყველა მთავარი ბრაუზერი მხარს უჭერს კლიენტის ვარიანტს. ამასთან, Netscape- ის საშინაო გვერდები, რომელსაც Netscape ბრაუზერის ნებისმიერი მომხმარებელი წააწყდება, შედგენილია კომბინაციაში.

აი კომბინირებული ვარიანტის მაგალითი:

<А HREF="http://www.anywhere.com/testmap/logo.map">

შენიშვნა

USEMAP პარამეტრი ასევე დომინირებს თეგით განსაზღვრულ ბმულზე<А>... ასე რომ, თუ გამოსახულება-რუკის კონცეფციის განსახორციელებლად გამოყენებული სურათი იწერება თეგის ფარგლებში<А HREF>მაშინ ბოლო ნიშნით გამოვლენილი ბმული უგულებელყოფილი იქნება ბრაუზერების მიერ, რომლებიც მხარს უჭერენ კლიენტის მხარის ვარიანტს. მაგალითად, დავუშვათ, რომ გაქვთ შემდეგი ფრაგმენტი:

<А HREF=NoMaps.htm> .

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

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

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

ალტერნატიული სანავიგაციო საშუალებები

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

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

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

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

ვიზუალიზაციის საშუალებები

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

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

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

მოდით განვიხილოთ რამდენიმე არსებული პროგრამა.

MapEdit პროგრამა

ერთ – ერთი ყველაზე მარტივი და ყველაზე ცნობილი კონფიგურაციის ფაილის რედაქტირების პროგრამაა ThomasE Boutell– ის მიერ შემუშავებული MapEdit პროგრამა. ეს პროგრამა უკვე რამდენიმე წელია არსებობს და ხორციელდება სხვადასხვა პლატფორმისთვის. კერძოდ, არსებობს ვერსიები Windows 3.x და Windows 95/98 / NT. როგორც უმეტეს პროგრამებს, ამ პროგრამის რამდენიმე ვერსია არსებობდა. ამჟამად, Windows 95/98 / NT- სთვის ხელმისაწვდომი უახლესი ვერსია არის ვერსია 2.6 (1999 წლის სექტემბერი). პროგრამის შესახებ ინფორმაციის მიღება შეგიძლიათ შემდეგ მისამართზე:

http: //www.boutell.cora/mapedit/

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

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

მოკლედ განვიხილოთ ამ პროგრამის ძირითადი მახასიათებლები. MapEdit- ის დაწყების შემდეგ ნაჩვენებია მთავარი ფანჯარა, რომელიც შეიცავს ჩამოსხმის ეკრანს (ნახ. 6.3) და მენიუ. შესაძლებელია არსებული ფაილების რედაქტირება როგორც სერვერული, ასევე გამოსახულების რუქების კლიენტის ვერსიებისთვის. ასევე შესაძლებელია ახალი კონფიგურაციის ფაილის შექმნა, მაგრამ ეს ეხება მხოლოდ სერვერის ვერსიას. კლიენტის ვერსია მოითხოვს წყაროს HTML ფაილს ჩანართების სურათების ბმულებით, რომლებიც გამოყენებული იქნება რუკის სურათების მითითებად.

შენიშვნა

MapEdit– ის გამოყენებით ახალი HTML ფაილის შექმნის შეუძლებლობა მარტივად შეიძლება შეიმუშაოს. ამისათვის აწარმოეთ პროგრამა ფაილის შექმნის რეჟიმში სერვერის ერთ – ერთ ფორმატში (NCSA და CERN), შეასრულეთ ყველა საჭირო მოქმედება და შემდეგ შეინახეთ შედეგები Save as რეჟიმში, Client Side Map– ის ფორმატის მითითებით. შეიქმნება HTML ფაილი, რომელიც მოგვიანებით შეიძლება გამოყენებულ იქნას, როგორც HTML დოკუმენტის მზა ფრაგმენტი.

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

ფაილი. გამოჩნდება დიალოგური ფანჯარა (ნახ. 6.4), რომელშიც უნდა მიუთითოთ შესაქმნელი კონფიგურაციის ფაილის სახელი (მაგალითად, Blazons.map), მიუთითოთ არსებული გამოსახულების ფაილი და შესაქმნელად გამოსაყენებელი ფაილის ფორმატი (NCSA ან CERN). გამოსახულების ფაილი შეიძლება იყოს GIF, JPG ან PNG ფორმატში.

ფიგურა: 6 3 . MapEdit ჩამოსხმის ეკრანი

ფიგურა: 6 4 . გახსენით / შექმენით რუქა კონფიგურაციის ფაილის შესაქმნელად

შენიშვნა

სერვერის კონფიგურაციის ფაილების მრავალ თარჯიმანს სჭირდება ფაილის MAP გაფართოება. ჩვენ გირჩევთ ყოველთვის დაიცვათ ეს წესი.

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

ამისათვის თქვენ უნდა აირჩიოთ აქტიური ზონის ფორმა - მართკუთხედი, წრე ან მართკუთხედი შესაბამის ხატულაზე დაჭერით ან ინსტრუმენტის მენიუდან სასურველი ნივთის არჩევით (ნახ. 6.6).

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


ფიგურა: 6 5 . გამოსახულება სხვადასხვა ტიპის მონიშნული აქტიური არეებით

ფიგურა: 6 6 . ინსტრუმენტების მენიუ

ფიგურა: 6 7 . ობიექტის URL დიალოგი URL- ის და არასავალდებულო კომენტარის დასაზუსტებლად

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

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

ფიგურა: 6 8 . ნაგულისხმევი URL დიალოგის ყუთი, რომ დააყენოთ URL ნაგულისხმევი დარგისთვის

ფიგურა: 6 9 . შეინახეთ როგორც ბრძანების დიალოგის ყუთი

შენიშვნა

MapEdit– ის ძველი ვერსიები შეიცავდა მცირე შეცდომას, რომელიც დაკავშირებული იყო შენახული კონფიგურაციის ფაილის ფორმატის დაყენებასთან. თუ ფაილის შექმნისას მითითებული იყო CERN ფორმატი, მაშინ მონაცემთა შენახვის რეჟიმში შენახვა, ფაილი კვლავ შეინახება NCSA ფორმატში. CERN ფორმატის ფაილის შექმნა შესაძლებელია მხოლოდ მაშინ, როდესაც იყენებთ Save as რეჟიმში, რომელშიც მითითებულია საჭირო ფორმატი.

ამ მაგალითისთვის შეიქმნება ფაილი სახელად Blazons.map, რომელიც შეიცავს შემდეგ ინფორმაციას (NCSA ფორმატი):

# ქალაქ ტომსკის გერბი

rect www.ifmo.ru/sergeev/tomsk.htm 35.58 187.244

# ქალაქ იაკუტსკის გერბი

წრე www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150

# ქალაქ გერბის პეტერბურგის გერბი

პოლი www.ifmo.ru/sergeev/Spb.htm 537.61 700.61 700.230 618.256 537.231

რედაქტორის მიერ CERN ფორმატში შენახული იგივე მონაცემები ასე გამოიყურება:

rect (35.58) (187.244) www.ifmo.ru/sergeev/tomsk.htm წრე (364.150) 104 www.ifmo.ru/sergeev/jakutsk.htm poly (537.61) (700.61) (700.230) (618,256) (537,231) www.ifmo.ru/sergeev/Spb.htm

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

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

ეს ფაილი უნდა გაიხსნას MapEdit რედაქტორში (ნახ. 6.10). განსხვავებით იმ ვარიანტისა, რომელშიც შეიქმნა კონფიგურაციის ფაილი, საჭირო არ არის ფაილის სახელის მითითება სურათთან ერთად Open / Create Map მენიუში.

ფიგურა: 6.1 0 . გახსენით / შექმენით რუქა არსებული HTML ფაილის გასახსნელად

ფიგურა: 6.1 1 . აირჩიეთ გამოსახულების დიალოგის ყუთი

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

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

ქალაქ ტომსკის გერბი

href \u003d "tomsk.htm"\u003e

ქალაქ იაკუტსკის გერბი

href \u003d "jakutsk.htm"\u003e

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

კოორდინატები \u003d "537,61,700,61, 700, 230, 618, 256, 537,231" href \u003d "Spb.htm"\u003e

გაითვალისწინეთ, რომ რედაქტორი ავტომატურად ანიჭებს სურათის რუკის აღწერილობის სახელს, რაც იგივეა, რაც მითითებული სურათის ფაილის სახელი. ამ მაგალითისთვის, სურათის ფაილს დაარქვეს Blazons.gif, ამიტომ თეგის სახელის პარამეტრი<тар> მიენიჭა მნიშვნელობა "Blazons".

შენიშვნა

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

რუქა ეს!

სურათის რუქების კონფიგურაციის ფაილების შექმნისა და რედაქტირების კიდევ ერთი პროგრამა არის პროგრამა THIS! პროგრამა, რომლის შესახებ ინფორმაციის მიღება შეგიძლიათ შემდეგ ვებ – გვერდზე:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

ამ პროგრამასთან მუშაობა იდეოლოგიით მსგავსია MapEdit პროგრამასთან. პროგრამასთან მუშაობის საფუძველია აქტიური ტერიტორიების ვიზუალური დიზაინი, შედეგების შემდგომი შენახვა ფაილში ერთ-ერთ შერჩეულ ფორმატში. რედაქტორი მხარს უჭერს როგორც სერვერის სურათების რუკებს (NCSA და CERN), ასევე კლიენტების მხრიდან. სურათების დატვირთვა შესაძლებელია GIF და JPG ფაილებიდან.

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

# $ MTIMFH

# $ -: გამოსახულების რუქა, შექმნილი რუქა THIS!

# $ -: ასახე ეს! უფასო გამოსახულების რუკის რედაქტორი Todd C. Wilson

# $ -: გთხოვთ, არ შეცვალოთ სტრიქონები დაწყებული "# $" - ით

# $ VERSION: 1.30

# $ TITLE: ბლეზონები

# $ DESCRIPTION: სერვერის სურათების რუკა

# $ თარიღი: სამშაბათს, 14 სექტემბერს 12:10:42 1999 წ

# $ PATH: С: \\ პროგრამის ფაილები \\ Mapthis \\

# $ GIF: Blazons.gif

# $ ფორმატი: ncsa

# $ EOH

ნაგულისხმევი ნაგულისხმევი. htm

# ქალაქ ტომსკის გერბი

სწორი ტომსკი. htm 33,60 191,246

# ქალაქ იაკუტსკის გერბი

წრე Jakutsk. htm 366.147 366.256

# ქალაქ გერბის პეტერბურგის გერბი

poly Spb.htm 534.62 699.62 698.236 626.261 534.235 534.62

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

CERN ფორმატში შენახული იგივე მაგალითი იქნება:

rect (4096,4096) (4096,4096) მთ: # $ MTIMFH

rect (4096,4096) (4096,4096) მთ: # $ -: გამოსახულების რუქა, შექმნილი რუქა THIS!

rect (4096,4096) (4096,4096) მთ: # $ -: რუქა ეს! უფასო გამოსახულების რუკის რედაქტორი

ტოდ უილსონის მიერ

rect (4096,4096) (4096,4096) მთ: # $ -: გთხოვთ, არ შეცვალოთ სტრიქონების დასაწყისი

"# $" - ით

rect (4096,4096) (4096,4096) მთ: # $ VERSION: 1.30

rect (4096,4096) (4096,4096) მთ: # $ TITLE: ბლეზონები

rect (4096,4096) (4096,4096) მთ: # $ DESCRIPTION: სერვერის ვარიანტი

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

rect (4096,4096) (4096,4096) მთ: # $

rect (4096,4096) (4096,4096) მთ: # $ თარიღი: სამშ. 14 სექტემბერი 12:10:42 1999

rect (4096,4096) (4096,4096) მთ: # $ PATH: C: \\ პროგრამის ფაილები \\ Mapthis \\

rect (4096,4096) (4096,4096) მთ: # $ GIF: Blazons.gif

rect (4096,4096) (4096,4096) მთ: # $ ფორმა: ცერნი

rect (4096,4096) (4096,4096) მთ: # $ EOH

ნაგულისხმევი ნაგულისხმევი. htm

rect (4096,4096) (4096,4096) მთ: # გერბი ქალაქ ტომსკში

მართკუთხედი (33,60) (191,246) ტომსკი. htm

rect (4096,4096) (4096,4096) მთ: # ქალაქ იაკუტსკის გერბი

წრე (366,147) 109 ჯაკუტსკი. htm

rect (4096,4096) (4096,4096) მთ: # პეტერბურგის გერბი

პოლიგონი (534.62) (699.62) (698.236) (626.261) (534.235) (534.62) Spb.htm

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

rect (4096,4096) (4096,4096),

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

HTML მაგალითში შენახული იგივე მაგალითი (სურათის რუქების კლიენტის ვერსიისთვის) ასე გამოიყურება:

<МАР NAME="Blazons">

ALT \u003d "(! LANG: ქალაქ ტომსკის გერბი"> !}

ALT \u003d "(! LANG: ქალაქ იაკუტსკის გერბი"> !}

HREF \u003d "Spb.htm" ALT \u003d "(! LANG: პეტერბურგის გერბი"> !}

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

CrossEye პროგრამა

CrossEye კონფიგურაციის ფაილის რედაქტორი, რომელიც შეიქმნა ცნობილი ავსტრალიური კომპანიის Sausage Software- ის მიერ. ამ პროგრამას სიხარულით შეხვდებიან პოპულარული HTML რედაქტორის HotDog– ის გულშემატკივრები, რადგან იგი შექმნილია იმავე კომპანიის მიერ და აქვს ძალიან მიმზიდველი, იუმორისტული ინტერფეისი.

CrossEye პაკეტის შესახებ ინფორმაციის მიღება შეგიძლიათ შემდეგ მისამართზე:

http://www.sausage.com.au.

პროგრამის გამორჩეული თვისებებია დისტრიბუციის ნაკრების საკმაოდ დიდი ზომა (დაახლოებით 2,5 MB), ასევე მოკლე დროში (14 დღე), რომლის განმავლობაშიც შეგიძლიათ გამოიყენოთ იგი შეფასების რეჟიმში. პროგრამების დიდი ზომა დამახასიათებელია Sausage Software- ის მიერ შექმნილი ყველა პროგრამული უზრუნველყოფისთვის, რაც, როგორც ჩანს, განპირობებულია განვითარებისათვის გამოყენებული ინსტრუმენტების არჩევით (Visual Basic).

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

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

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

უარყოფითი მხარეები გარკვეულწილად ანაზღაურდება რედაქტორის ცალკეული დამატებითი თვისებებით. კერძოდ, შეგიძლიათ გაარკვიოთ, რომ თუთიყუშს, რომელიც სურათის ზედა მარჯვენა კუთხეში ჩანს, პოლი ეწოდება. ის ძალიან ლაპარაკია და ხმოვანი კარტით აღჭურვილ კომპიუტერზე მომუშავე მომხმარებლები დროდადრო გაიგონებენ თუთიყუშის ძახილს, რომელსაც, რა თქმა უნდა, არანაირი კავშირი არ აქვს შესრულებულ მოქმედებებთან. რედაქტორის პარამეტრების ერთ – ერთ დიალოგურ ფანჯარაში არის სპეციალური ელემენტიც კი, რომელიც საშუალებას გაძლევთ გაჩუმდეთ ცუდი თუთიყუში. აქ მოცემულია მაღალი დონის სერვისის მაგალითი. როგორც ჩანს ჩამოთვლილი თვისებების გამო, შეფასებულია ამ რედაქტორის რეიტინგი http://www.tucows.com, ძალიან მაღალია, რაც არ შეიძლება ითქვას ზემოთ აღწერილ ორ პროგრამაზე.

საბოლოო ჯამში, რედაქტორის არჩევანი გამოსახულების რუქების შესაქმნელად მომხმარებელს რჩება.

დადებითი

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

მინუსები

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

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

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

კლიენტის ვერსიაში, რუკა მდებარეობს იმავე HTML დოკუმენტში, როგორც სურათის ბმული. იმის დასადგენად, რომ სურათი არის რუკა, გამოიყენება ელემენტის usemap ატრიბუტი ... რუკის კონფიგურაციის აღწერის მაჩვენებელი, რომელიც დაყენებულია ელემენტის გამოყენებით ... სახელის ატრიბუტის მნიშვნელობა სახელი უნდა ემთხვეოდეს usemap. ამ შემთხვევაში, ვებ – გვერდის მნიშვნელობა in იწყება ჰეშის სიმბოლოთი (მაგალითი 1).

მაგალითი 1. გამოსახულების რუკის შექმნა

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

ინფორმაცია Ივენთი განყოფილებები Ტექნიკური ინფორმაცია ტრენინგი Სამუშაო Miscellanea

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

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

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

გამარჯობა ბერნაცკი ანდრეი შენთან.

ამ სახელმძღვანელოში მე გაჩვენებთ როგორ შექმნათ hTML გამოსახულების რუკები.

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

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

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

ეს ყველაფერი მარტივად კეთდება. მეგობრებთან ერთად ვიღებთ ნებისმიერ ფოტოს. უმჯობესია ჩადოთ იგი საკუთარ ცალკე ბლოკში

.

XHTML

მაგალითისთვის ჩემი ფოტო ავიღე.

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

თეგის მთავარი პარამეტრი img ამ შემთხვევაში ასეა usemap \u003d "# img-nav"... ის მიუთითებს რუქაზე, რომელ სახელს მივმართავთ.

XHTML

ანდრეი

მოდით, წესრიგში წავიდეთ.

- სახელის პარამეტრის მნიშვნელობა უნდა ემთხვეოდეს img ტეგის usemap პარამეტრის მნიშვნელობას, მხოლოდ რუკის ტეგისთვის იწერება # სიმბოლოს გარეშე.

Პარამეტრი ფორმა ტეგი - გვიჩვენებს, თუ რა ტიპის იქნება ჩვენი რეგიონი. პარამეტრის მნიშვნელობა გვიჩვენებს, თუ რა იქნება ჩვენი ფართობი. ფორმა:

rect - მიუთითებს იმაზე, რომ ფართობი მართკუთხედის სახით იქნება.

პოლი - თვითნებური მრავალკუთხედი.

წრე - ფართობი იქნება წრის სახით.

Პარამეტრი კოორდინატები შეიცავს ჩვენი ტერიტორიის კოორდინატებს.

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

თუკი ფორმის \u003d "პოლი", მაშინ მითითებულია მრავალკუთხედის თითოეული წვერის კოორდინატები. shape \u003d "პოლი" კოორდინატები \u003d "80,100,150,100,210,40,300,40,300,110" ამ შემთხვევაში, პირველი ვერტექსის კოორდინატები იქნება 80,100, მეორე 150,100, მესამე 210,40, მეოთხე 300,40, მეხუთე 300,110.

თუკი ფორმის \u003d "წრე", მაშინ ჩვენ მიუთითეთ ცენტრისა და რადიუსის კოორდინატები. ფორმის \u003d "წრე" კოორდინატები \u003d "300,300,100", სადაც ცენტრის კოორდინატებია 300,300 და რადიუსი 100.

title \u003d "(! LANG: Andrey.)" alt="ანდრეი" !} უკვე ნაცნობი პარამეტრები. მე მათზე აღარ ვისაუბრებ.

ქვემოთ მოცემულია სრული კოდი:

XHTML