ნაბიჯი 17 - რუკები - როგორ გავხადოთ სურათის ნაწილი ბმული?

ჩვენ უკვე ვილაპარაკეთ სურათის ბმულად გადაქცევაზე. ამ ნაბიჯში კი საუბარი სურათის ნაწილის ბმულად გადაქცევაზე გვექნება.

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

ალბათ მიხვდით, რომ ტეგს სახელად <map> ჰქვია, მაგრამ ის ჩვენს მიერ ნასწავლი ტეგებიდან გამოირჩევა - მხოლოდ მისი ან მისი ატრიბუტების დაწერით ვერაფერს შექმნით, აუცილებლად დამხმარე ტეგი <area> დაგჭირდებათ. კოდი მარტივია, ჯერ მთავარი ტეგის საშუალებით ვუთითებთ, რომ დაიწყო იმ არეების ჩამონათვალი, რომლებიც ბმულებად უნდა იქცნენ, შემდეგ კი დამხმარე ტეგის საშუალებით თვითონ იმ ადგილების ჩამონათვალს ვწერთ:

ტეგ <area>-ს გააჩნია ერთი აუცილებელი ატრიბუტი, რომლის გარეშეც ის არაფრისმაქნისია. ამ ატრიბუტს coords ჰქვია და სურათის იმ ნაწილის კოორდინატებს უჩვენებს, რომელიც ბმულად უნდა გადაიქცეს. კოორდინატები მძიმით გამოიყოფა.

თავიდან ჩვენ სურათი დაგვჭირდება. ავიღოთ შემდეგი:



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

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

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

1. rect - რუკა მართკუთხედის ფორმისაა. ამ შემთხვევაში ატრიბუტ coords-ს ოთხი კოორდინატი უნდა მიეთითოს - ზედა მარჯვენა და ქვედა მარცხენა წვეროების კოორდინატები.
2. circle - რუკა წრეწირის ფორმისაა. ასეთ შემთხვევაში სამი კოორდინატი უნდა გვქონდეს. რადგანაც წრეწირს წვეროები არ აქვს, კოორდინატებად ცენტრის კოორდინატები და რადიუსი ისმება.
3. poly - ანუ სრული თავისუფლება. კოორდინატების რაოდენობა შეზღუდული არ არის, ასე რომ, შეგიძლიათ ნებისმიერი ფორმის ფიგურა შექმნათ.

კოორდინატთა სისტემა შემდეგნაირია:



(0;0) წერტილი მარცხენა ზემო კუთხეა. x ღერძი მიმართულია მარჯვნივ, y ღერძი კი ქვემოთ. ნამდვილად არ ჰგავს დეკარტის კოორდინატთა სისტემას :)

ტეგი area ნებისმიერი ფორმისთვის ასე ჩაიწერება:

<area shape="..." coords="x₁,y₁,x₂,y₂...">

ჩვენი მაგალითისთვის კი ასეთი სახე ექნება:

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

თუმცა რუკა ნამდვილი ბმული ჯერ მაინც არ არის. მას <map>-ის ატრიბუტი name უნდა დავუმატოთ და სურათთან მივაბათ <img> ტეგის usemap ატრიბუტის გამოყენებით.

name რუკის სახელს განსაზღვრავს, usemap კი სურათს გამოყენებული რუკის სახელს უთითებს, მაგრამ ერთი თავისებურებით - სახელის წინ # უნდა ესვას, ანუ თუ რუკის სახელია "რუკა1", მაშინ usemap="#რუკა1".

დავასრულოთ ჩვენი მაგალითის კოდი:

დააჭირეთ N1 მართკუთხედს და დატკბით შედეგით :-)



ახლა თვითონ სცადეთ იგივე გააკეთოთ N2 მართკუთხედთან <area>-ს გამოყენებით(კოორდინატები იქნება 153, 11, 219, 127).

<<< ნაბიჯი 16: უკან | წინ: ნაბიჯი 18 >>>