ჩვენ უკვე ვისაუბრეთ იმაზე, თუ როგორ უნდა მოხდეს ნახატის ბმული .. ამ თავში ჩვენ ვისაუბრებთ იმაზე, თუ როგორ უნდა გავაკეთოთ ფრაგმენტი, ნახაზის არე კონკრეტული დოკუმენტის ბმულით, ასევე როგორ გავაკეთოთ სხვადასხვა სფეროებშიერთი და იგივე ფიგურის ბმულები სხვადასხვა დოკუმენტებთან.
ამ ამოცანის შესასრულებლად, ჩვენ არ შეგვიძლია გავაკეთოთ ეგრეთ წოდებული სანავიგაციო რუქების გარეშე.
დავუშვათ, გვაქვს ასეთი ნახატი:
და ჩვენ უნდა გავაკეთოთ ისე, რომ მომხმარებელი, რომელიმე ამ "ღილაკზე" დაჭერით მიჰყვება ბმულს კონკრეტულ დოკუმენტზე .. რა გვჭირდება ამისათვის?
უპირველეს ყოვლისა, მოდით დავხატოთ ჩვენი ნახატი არა როგორც ჩვეულებრივი გრაფიკული გამოსახულება, არამედ როგორც სანავიგაციო რუკა ამ ნახატზე ჩვენი ინდივიდუალური სახელის მინიჭებით. ეს კეთდება ატრიბუტის გამოყენებით სარგებლობის რუკაწარწერა
(მე ვფიქრობ, რომ თქვენ არ უნდა შეგახსენოთ, რომ წარწერა
აქვს საჭირო ატრიბუტი srcრაც მიუთითებს კონკრეტული სურათისკენ მიმავალ გზაზე
)
მოდით დავასახელოთ ჩვენი ნახატი / რუკა პანელი... ასე გამოიყურება:
usemap = "# პანელი">
არ დაგავიწყდეთ ნიშნის დადება სინტაქსის წესების მიხედვით # გისოსები სახელის წინ ..
კარგად, ახლა, ფაქტობრივად, მოდით შევადგინოთ სანავიგაციო რუკა. იგი მითითებულია ტეგით რომელსაც აქვს ატრიბუტი სახელი- სახელი .. დაიჭირე სად მივყავარ? ისე, როგორც თქვენ ალბათ უკვე მიხვდით, ჩვენ აღვნიშნავთ რომელი ნახაზის საფუძველზე ავაშენებთ ჩვენს სანავიგაციო რუქას მისი სახელის მითითებით ..
ახლა მოდით მივყვეთ იმ ფაქტს, რომ ჩვენ ბრაუზერს მივუთითებთ სურათის იმ სფეროებს, რომლებიც იქნება ბმულები და ამავე დროს ჩვენ ჩამოვწერთ ამ ბმულებზე გადასვლის გზებს. ტეგი ასრულებს ამ ამოცანას. , მას არ სჭირდება დახურვის ტეგი და აქვს შემდეგი ატრიბუტები, რომლებთანაც ჩვენ ვიმუშავებთ:
href- მიუთითებს გახსნილი დოკუმენტის გზას (ისევე როგორც ტეგში )ფორმა- ნახატის არეალის ფორმა, რომელიც იქნება ბმული. მას შეიძლება ჰქონდეს სამი მნიშვნელობიდან ერთი:
- სწორი- მართკუთხა ფართობი
- პოლი- ტერიტორია ერთგვარი მრავალკუთხედია
- წრე- წრის მიერ განსაზღვრული ფართობი
მართკუთხა ფართობი
ახლა ჩვენი რუკა ასე გამოიყურება:
ფაქტობრივად, ახლა "მწვანე" კვადრატული ღილაკი ამოქმედდა.
რას ხედავთ ამ მაგალითზე დაჭერით:
usemap = "# panel"> მე ცოტათი ვიჩქარე მაგალითის გარეშე ნამდვილად ავუხსენი ჩემი დაწერილის არსი .. მოდით გავამახვილოთ ყურადღება ტეგის ატრიბუტებზე .
href = "primer1.html"- აქ მგონი ნათელია, ეს არის დოკუმენტის გზა, რომელიც უნდა გაიხსნას, როდესაც დააწკაპუნებთ "მწვანე ღილაკზე".
მას შემდეგ, რაც ღილაკი არის კვადრატი, და კვადრატი, როგორც მოგეხსენებათ, არის "რეგულარული" მართკუთხედი, ჩვენ მივაკუთვნებთ ნახაზის ფართობის ფორმას მართკუთხედს ფორმა = "სწორი" .
ახლა კი მხიარული ნაწილი coords = "15,15,82,82"- კოორდინატები .. მართკუთხედისთვის ისინი ორი წერტილით არის დადგენილი პრინციპით "X1, Y1, X2, Y2" სადაც X1, Y1 არის პირველი წერტილი და, შესაბამისად, X2, Y2 არის მეორე. კოორდინატები მითითებულია პიქსელებში .. ჩვენს სურათს / რუქას აქვს ზომები 300 100 პიქსელით, მის ზედა მარცხენა პიქსელს აქვს კოორდინატები X = 0, Y = 0, ხოლო ქვედა მარჯვენა არის X = 300, Y = 100. თუ ეს არ არის ნათელი, მოდით ჩავუღრმავდეთ გეომეტრიას მეხუთე კლასისთვის ..
დააკვირდით სურათს:
ასე რომ, მართკუთხა ფორმის არჩევა ფორმა = "სწორი"ჩვენი ფართობისთვის კვადრატული ღილაკის სახით, ჩვენ განვსაზღვრეთ მისი ზედა მარცხენა და ქვედა მარჯვენა პიქსელების კოორდინატები .. რაც სავსებით საკმარისია მთელი ღილაკის "სამუშაო" ფართობის დასახატად.
პოლიგონი (მრავალკუთხედი).
მოდით გავუმკლავდეთ "ყვითელ ღილაკს", ჩვენ გვაქვს ის წარმოდგენილი სამკუთხედის სახით. იმისათვის, რომ შევარჩიოთ მისი "სამუშაო" არე ჩვენი ნახაზიდან, ჩვენ ვაძლევთ ატრიბუტს ფორმამნიშვნელობა პოლი- მრავალკუთხედი, რომელიც განსაზღვრავს ამ არეს, როგორც ერთგვარ პოლიგონს, სადაც კომოდინატები გამოყოფილია მძიმეებით იქნება მისი წვერო, მათი რიცხვი შეიძლება იყოს ნებისმიერი "X1, Y1, X2, Y2, X3, Y3, X4, Y4. .. X124, Y124 "ამ წერტილებით ჩამოყალიბებული ფიგურა კუთხეების წვეროებით შეიძლება ჰქონდეს ნებისმიერი მრავალკუთხედის ფორმა, როგორც რეგულარული, ასევე არარეგულარული. ჩვენს შემთხვევაში, მხოლოდ სამი კუთხეა, ამიტომაც არის ის სამკუთხედი, ამიტომ მისი კოორდინატები განისაზღვრება სამი წყვილი მნიშვნელობით "X1, Y1, X2, Y2, X3, Y3"
ჩვენ ერთად ვწერთ ყველაფერს ასე:
shape = "poly" coords = "148,15,185,82,110,82">
და აქ არის სურათი, რომელიც ნათლად აჩვენებს საიდან მოდის წერტილების კოორდინატები.
წრე
ისე, ბოლო "წითელი ღილაკი" მრგვალია .. ასე რომ, ფართობის ფორმა იქნება მრგვალი ფორმა = "წრე"... ამჯერად კოორდინატებით, ყველაფერი ცოტა სხვაგვარადაა. ჩვენ გვჭირდება სამი მნიშვნელობა X, Y, R. X და Y არის ჩვენი წრის ცენტრის კოორდინატები, ხოლო R არის რადიუსის სიგრძე პიქსელებში.
აქ არის ნახატი:
აქ არის მაგალითი:
ჩვენ ვიხსენებ მას ..
ახლა ცოტა რამ იმის შესახებ, თუ კიდევ რა იქნებოდა სასურველი ჩვენი რუქის გაკეთება, სანამ რომელიმე გვერდზე "დაამონტაჟებდით".
განსაზღვრეთ რუქის ნახაზის ფიქსირებული ზომები ატრიბუტებით სიგანედა სიმაღლე
მოდით დავწეროთ ალტერნატიული ტექსტი, როგორც რუქის მთლიანი სურათისთვის, ასევე მისი ცალკეული არეებისთვის ატრიბუტის გამოყენებით ალტ, ასევე ატრიბუტით ელემენტების აღწერა სათაური .
მოვიშოროთ საზღვრის ჩარჩო .. მოდი გავაკეთოთ საზღვარი = "0".. (ისე, თუ საზღვარი უფრო მოგწონს, ამას ვერ გააკეთებ .. მე არ დაჟინებით ..)
საბოლოო ჯამში, ის ასე უნდა გამოიყურებოდეს:
width = "300" height = "100" border = "0" alt = "(! LANG: Control Panel" title="Მართვის პანელი">
!} გადაკვეთის ადგილები
ზოგჯერ მოსახერხებელია გამოსახულების "სამუშაო" არეალის ჩამოყალიბება სხვადასხვა ფორმის "შერევით".
დავუშვათ, რომ ჩვენი შემდეგი ღილაკი ასე გამოიყურება:
რასაკვირველია, თქვენ შეგიძლიათ განსაზღვროთ ფორმა, როგორც მრავალკუთხედი, მაგრამ თქვენ უნდა დააწესოთ ბევრი კოორდინატი ასეთი ღილაკის მომრგვალებული ნაწილისთვის (კარგად, ეს მაშინ, როდესაც თქვენ გჭირდებათ სპეციალური სიზუსტე სანავიგაციო რუქაზე).
და თქვენ შეგიძლიათ განსაზღვროთ ამ მაგალითში ორი ოთხკუთხედის ფორმა სწორიდა წრე წრეროგორც სურათზეა ნაჩვენები:
და კოდში მიუთითეთ გზა იმავე დოკუმენტისკენ:
"არ არის ტერიტორია"
მოდით შევხედოთ მაგალითს .. დავუშვათ, რომ თქვენ გჭირდებათ ასეთი ღილაკის გაკეთება:
რაც შეეხება ხვრელს მასში?
წარწერა ატრიბუტის გარდა hrefაქვს საპირისპირო ატრიბუტი ნოჰრეფი- არააქტიური ტერიტორია, ანუ, თუ მომხმარებელი დააწკაპუნებს ასეთ არეზე, მაშინ აბსოლუტურად არაფერი მოხდება, რასაც ჩვენ რეალურად უნდა მივაღწიოთ ჩვენს რუქაზე "ხვრელის" გაკეთებისას.
რუკა განისაზღვრება ორი უბნით, არააქტიური წრით წრედა აქტიური მართკუთხა ფართობი სწორიდა როგორც ნაჩვენებია ნახატზე ნახაზი აქვს შემდეგი კოორდინატები:
როგორც უკვე აღვნიშნეთ, ტერიტორიების გადაკვეთისას უმაღლესი პრიორიტეტი მიენიჭება იმ ადგილს, რომელიც არის ტეგის შიგნით კოდი ჩამოთვლილია პირველი
ამიტომ, მაგალითი ასე გამოიყურება:
რუკა არის სერვერზე.
ამონარიდი აქედან საძიებელი (ტეგის ატრიბუტები
):
ისმაპა- სურათი არის სანავიგაციო რუკა სერვერზე.
გაუგებარია? მერე ვკითხულობთ ..
ატრიბუტით სარგებლობის რუკაროგორც ჩანს, ჩვენ გავარკვიეთ .. ნახეთ, მომხმარებელი (კლიენტი), რომელმაც გახსნა თქვენი გვერდი, ერთდროულად ყველა დანარჩენ შინაარსთან ერთად, იტვირთება "მის გვერდით", როგორც თავად სურათი, ასევე სანავიგაციო რუქა მასზე და ყველაფერი დამუშავებულია მისი ბრაუზერით.
და აქ არის ატრიბუტი ისმაპაწარწერა
ეუბნება ბრაუზერს, რომ სერვერზე ამ სურათისთვის, სადაც თქვენ განათავსეთ ან აპირებთ გამოაქვეყნოთ თქვენი საიტი (წაიკითხეთ სტატია :), არის სანავიგაციო რუკა. ახლა კი, როდესაც სტუმარი (კლიენტი) დააწკაპუნებს სურათის ნებისმიერ უბანზე ასეთი ატრიბუტით, ბრაუზერი დაიმახსოვრებს ამ დაწკაპუნების კოორდინატებს და გაუგზავნის მათ სერვერს, სადაც სპეციალური პროგრამა დაამუშავებს ამ მონაცემებს და გადამისამართებს მომხმარებელი სერვერზე რუკაზე მითითებულ მისამართზე, კლიენტის ბრაუზერიდან მიღებული პუნქტის კოორდინატების შესაბამისად.
ასეა დაწერილი:
სად სანავიგაციო რუქის მისამართი ნებისმიერ საიტზე .. განთავსებულია კონკრეტულ სერვერზე ..
მაინც არ არის გასაგები? თუ კი, მაშინ ნუ შეგაწუხებთ .. გამოიყენეთ სარგებლობის რუკა, ჩემი აზრით, ეს გადაწყვეტა საუკეთესო იქნება უმეტეს შემთხვევაში სანავიგაციო რუქების გამოყენებისას.
თქვენი ნავიგაციის რუკაზე წერტილის კოორდინატების ადვილად დასადგენად, გახსენით ნახატი გრაფიკული რედაქტორით, იგივე Paint, მაგალითად .. იქ, როდესაც მაჩვენებელი ნახატზე გადაინაცვლებთ, ნახავთ ორ ცვალებად რიცხვს, ეს არის პიქსელის X და Y კოორდინატები ამ სურათზე ... Paint– ში ეს ზოლი მდებარეობს ეკრანის ბოლოში.
ნავიგაციის რუქის მქონე გვერდის შექმნისას, ტეგი
ყოველთვის უნდა იყოს ბარათზე მაღლა ანუ დაწერე ასე:
შესაძლებელია, მაგრამ არა აუცილებელი .. რადგან გვერდის ჩატვირთვისას შეიძლება წარმოიშვას პრობლემები, რადგან მარკირებით რუკა უკვე ჩატვირთულია, მაგრამ თავად სურათი ჯერ არ არის ..
და რაც შეეხება ჩატვირთვას ..
კოდის ამ ნაწილში შეიძლება იყოს რაიმე გრძელი ტექსტი, ცხრილი, გრაფიკა .. მაგრამ მაინც ჯობია აქ არაფერი დაწერო
და დაწერე აქ, რადგან სანამ გვერდი იტვირთება, მომხმარებელმა, ლოდინის დასრულების გარეშე, შეიძლება სცადოს დააწკაპუნოს სანავიგაციო რუკაზე მითითებულ ღილაკებზე, რომლებიც ამ დროისთვის ჯერ არ არის დატვირთული.
გამარჯობა ცოტა ხნის წინ მე შემთხვევით გავუმკლავდი ისეთ სპეციფიკურ html ფუნქციას, როგორიცაა გამოსახულების რუკა. სიმართლე გითხრათ, მე ხშირად არ ვიყენებდი მას, შემდეგ კი, ჩვეულებრივ, ყველაფერი კეთდებოდა მართკუთხა ზონებით. მაგრამ ეს ასე არ იყო. ამოცანა იყო გამოსახულების ცალკეულ რეგიონებთან ბმულების განთავსება, რომელიც ქვეყნის რუქა იყო და, სამწუხაროდ, არც ტილოზე და არც სვგ -ზე საუბარი არ ყოფილა. მხოლოდ html მხოლოდ hardcore! ასე რომ, ამოცანა დასახულია, Google გააქტიურებულია და შეგიძლიათ დაიწყოთ.
თეორია
დავიწყოთ თეორიით, სად შეგვიძლია წავიდეთ მის გარეშე. სურათის რუკა შეიცავს ორ თეგს: რუკა- ბარათის კონტეინერი და ფართობი- შერჩევის ადგილი. რუკა არ შემოიფარგლება მხოლოდ ერთი ზონით და შეიძლება შეიცავდეს მათ შეუზღუდავ რაოდენობას. წარწერა ფართობისტანდარტული ატრიბუტების გარდა, მას აქვს საკუთარი:- კოორდინატები- შერჩევის არეალის კოორდინატები
- href- ბმული, რომელზედაც მოხდება გადასვლა ზონაზე დაჭერისას
- ნოჰრეფი- მიუთითებს, რომ ზონა არ შეიცავს ბმულებს
- ფორმა- შერჩევის ფორმა
- წრე- შერჩევის არე წრის სახით
- ნაგულისხმევი- ირჩევს სურათის მთელ არეალს
- პოლი- შერჩევის არე პოლიგონის სახით
- სწორი- შერჩევის არე მართკუთხედის სახით
- სამიზნე- განსაზღვრავს სად გაიხსნება ბმული
მას შემდეგ, რაც შერჩევის არე მე უნდა იყოს პოლიგონური, ფორმის ატრიბუტის მნიშვნელობა, ფართობის ტეგი, ჩვენ განვსაზღვრავთ როგორც პოლი - პოლიგონურ არეს. ამ რეჟიმში, მძიმით გამოყოფილი წერტილის კოორდინატები ზედა მარცხენა კუთხესთან შედარებით - x, y. პერიოდები ასევე გამოყოფილია მძიმეებით, რაც თავდაპირველად დამაბნეველია ასეთი კოდის წაკითხვისას.
წერის საღებავი
მე არ გამიხარდა თითოეული წერტილის კოორდინატების პოვნა Photoshop– ით, ინფორმაციის ფანჯრიდან ხელით ხელმეორედ გადაწერა და ის ინსტრუმენტები, რომლებიც Google– ში შემხვდა, ძალიან ამაზრზენი იყო. ჩემს მუხლზე გადაწყდა დამეწერა ჩემი პატარა სკრიპტი, რომელიც საშუალებას მოგცემთ განათავსოთ ქულები უბრალოდ სურათზე სასურველ არეზე დაჭერით და გამოჩნდება მზა კოდი.პირველი, მოვამზადოთ განლაგება:
ღილაკები შეიყვანება #ზოლში "პინტის" გასაკონტროლებლად.
გენერირებული html კოდი გამოჩნდება #ინფორმაციაში.
სხეული (ზღვარი: 0; შევსება: 20px; font-family: Arial, Helvetica, sans-serif;) img (საზღვარი: არცერთი; მონახაზი: არცერთი; ჩვენება: ბლოკი; -moz-user-select: არცერთი; -webkit-user -არჩევა: არცერთი; მომხმარებლის არჩევა: არცერთი;). ტილო (საზღვარი: 2px მყარი # 333; შევსება: 2px; ზღვარი-ქვედა: 16px; ჩვენება: inline-block; // ჩვენება: inline; // მასშტაბირება: 1; ტილო. დახაზეთ (საზღვარი-ფერი: # 3C0;). ტილო. შიდა (პოზიცია: ნათესავი;). კანვა. წერტილი (სიგანე: 1 პიქსელი; სიმაღლე: 1 პიქსელი; ფონის ფერი: #fff; საზღვარი: 1 პიქსელი მყარი # 000 ; overflow: დამალული; პოზიცია: აბსოლუტური;). ბარი (ზღვარი-ქვედა: 16px;) .info (ფონი-ფერი: #FCFCFC; საზღვარი: 1px წერტილოვანი #CCC; შრიფტის ზომა: 12px; შრიფტის სტილი: დახრილი; შევსება : 8px; word-wrap: break-word;)
Javascript– ში ყველაფერი საკმაოდ მარტივია. წერის პროცესში მე გამოვიყენე ჩემი საბრძოლო ბიბლიოთეკა, ასე რომ ნუ გაგიკვირდებათ არასტანდარტული ფუნქციები. პირველი, ჩვენ ჩამოვკიდებთ mousedown მოვლენას #ტილოზე, რომელშიც წერტილი გამოსახულებაზე იქნება გაცემული და მისი კოორდინატები ჩაიწერება.
Var addPoint = ფუნქცია (e) (var e = _.getEvent (e), offset = _.getOffset (კვანძები ["ტილო"]), x = e.clientX + _.getDocScrollLeft () - ოფსეტური, y = e clientY + _.getDocScrollTop () - ოფსეტური, კვანძი = კვანძები ["ტილო"]. appendChild (_. კვანძი ("div", ("კლასი": "წერტილი"))); node.style.top = y -1 + "px"; node.style.left = x-1 + "px"; points.push (("x": x, "y": y, "კვანძი": კვანძი)); e.preventDefault && e. preventDefault (); დაბრუნება false;);
შემდეგ ჩვენ დავწერთ ფუნქციას, რომელიც გამოიმუშავებს ჩვენი რუქის html კოდს.
Var renderInfo = ფუნქცია () (var ტექსტი; _.clearNode (კვანძები ["ინფორმაცია"]); კვანძები ["ინფორმაცია"]. AppendChild (_. კვანძი ("span", " "));
};
მოდით, ყველაფერი ჩავყაროთ კლასში, ზოგიერთი დამხმარე ფუნქცია, ეს არის ყველაფერი. ვიმედოვნებ, სათესი ხელსაწყოები ვინმეს გამოადგება.
მნიშვნელობა და გამოყენება
წარწერა
ბრაუზერის მხარდაჭერა
| წარწერა | ოპერა | IExplorer | ზღვარი |
|||
|---|---|---|---|---|---|---|
| დიახ | დიახ | დიახ | დიახ | დიახ | დიახ |
ატრიბუტები
მონიშნეთ ატრიბუტები ჩვენ განვსაზღვრავთ როგორც ფართობის კოორდინატებს (კოორდინატების ატრიბუტი), ასევე ჩვენთვის საჭირო ფორმის ტიპს (ფორმის ატრიბუტი):
გამოყენების მაგალითი
განვიხილოთ მაგალითი, როდესაც ერთ ფიგურაზე დააწკაპუნებთ გარკვეულ ფორმაზე, მიდიხართ სხვადასხვა ვებ გვერდზე, რომლებიც აღწერს ამ ფორმებს (ბმულები ვიკიპედიაზე):
აირჩიეთ ფორმა:
ასე რომ, იმისათვის, რაც ჩვენ გავაკეთეთ ამ მაგალითში:
- მოათავსეთ სურათი (ტეგი
), რომელსაც ჩვენ მოგვიანებით გამოვიყენებთ რუქის სურათის შედგენისას. მომხმარებლის რუქის ატრიბუტში აუცილებელია მიუთითოთ რუქის სურათის სახელი, რომელსაც ჩვენ გამოვიყენებთ ელემენტში
- განათავსეთ რუქის სურათი (ტეგი
- მოათავსეთ ოთხი ტეგი რომლებიც განსაზღვრავენ რუქის სურათის ინტერაქტიული სფეროებს:
- Პირველიჩვენ ვეკითხებით მართკუთხა ფართობი(ფორმის ატრიბუტი მნიშვნელობით "rect"), ის შეესაბამება ჩვენს პირველისურათი ( პირველი ორიმნიშვნელობები შეესაბამება ზედა მარცხენა კუთხეს, შემდეგს ორიღირებულებები განსაზღვრავს ზედა მარჯვენა და ქვედა მარჯვენა კუთხეს).
- მეორემიუთითეთ მრგვალი ფართობი(ფორმის ატრიბუტი მნიშვნელობით "წრე"), ის შეესაბამება ჩვენს მეორესურათი ( პირველიმნიშვნელობა შეესაბამება კოორდინატებს ღერძის გასწვრივ xდა მეორე ღერძის გასწვრივ y, მესამე განსაზღვრავს რადიუსი).
- რაც შეეხება მესამედა მეოთხე ფიგურა, შემდეგ ისინი შედგენილია პრინციპის შესაბამისად პოლიგონური ფართობი(ფორმის ატრიბუტი მნიშვნელობით "პოლი"). თქვენ განსაზღვრავთ სურათის წერტილების საჭირო რაოდენობას, გამოთვლით ამ წერტილების კოორდინატებს (გრაფიკული რედაქტორი) და მიუთითებთ ისეთი თანმიმდევრობით, რომ ბრაუზერს შეუძლია დააკავშიროს ისინი ერთ ხაზთან. სამკუთხედის გამოყენება მაგალითისთვის (მესამე ფიგურა): პირველიწერტილი (კოორდინატები xდა yწვეროები), მეორეწერტილი (კოორდინატები xდა yქვედა მარცხენა კუთხე) და მესამეწერტილი (კოორდინატები xდა yქვედა მარჯვენა კუთხე).
თქვენს ყურადღებას ვაქცევ იმ ფაქტს, რომ თუ ტეგი
ვნახოთ მაგალითი იმისა, თუ როგორ გამოიყურება გამოსახულების რუკა html– ში:
როდესაც თქვენ თაგუნას ატარებთ მწვანე ოთხკუთხედის არეზე, ხედავთ, რომ ეს არის ბმული "#მწვანე_ ბმულზე" (ლეიბლი შერჩეულია მაგალითად, შეგიძლიათ გააკეთოთ ბმული ინტერნეტში ნებისმიერ გვერდზე). წითელ კვადრატს აქვს "#წითელი_ ბმული", ხოლო ლურჯ წრეს, შესაბამისად, "#ლურჯი_ ბმული".
კოდი ამ მაგალითისთვის:
img / primer-kartu-izobrazheniy-1.jpg">
როგორც მაგალითიდან ხედავთ, კოდი არც ისე რთულია. მოდით შევხედოთ ტეგებს სურათის ბმულის რუქის შესაქმნელად.
მაგალითის აღწერა1. აუცილებელია სურათების რამოდენიმე შექმნა და რუქები
ბმულის რუქის შექმნისას საჭიროა usemap ატრიბუტი img ტეგისთვის.
2. ბარათის აღწერა
3. რუქის თითოეული ელემენტი აღწერილია ტეგის გამოყენებით , რომელიც განსაზღვრავს ობიექტის ტიპს ფორმის ატრიბუტის (მართკუთხედის, წრის ან პოლიგონის) და მისი კოორდინატების გამოყენებით.
შენიშვნატერიტორიებს შეუძლიათ ერთმანეთის გადახურვა. ამ შემთხვევაში, ბმული მიგვიყვანს იმ ობიექტამდე, რომელიც ბოლოა აღწერილი.
მონიშნეთ ატრიბუტები
1. ატრიბუტის ფორმა = "object_type" - ადგენს ობიექტის ტიპს. მას შეუძლია მიიღოს შემდეგი მნიშვნელობები:
- წრე - წრე;
- მართკუთხედი - მართკუთხედი;
- პოლი - პოლიგონი;
2. ატრიბუტი coords = "კოორდინირებული_ფასები"- განსაზღვრავს ობიექტის გეომეტრიულ მდებარეობას და მის ზომებს.
სურათის საცნობარო წერტილი არის ზედა მარცხენა კუთხე. იმ. თუ თქვენ მიუთითეთ 10 სიმაღლეზე, ეს ნიშნავს 10 პიქსელის ქვემოთ.
ობიექტის ტიპებიდან გამომდინარე, თქვენ უნდა დააყენოთ კოორდინატული მნიშვნელობები სხვადასხვა ფორმატში. ყველა მნიშვნელობა მითითებულია პიქსელებში (თქვენ არ გჭირდებათ px ნიშნის დაწერა).
- წრის ტიპისთვის: კოორდინატები = (x, y, r), სადაც x, y არის წრის ცენტრის კოორდინატები და r არის წრის რადიუსი;
- სწორი ტიპისთვის: კოორდინატები = (x1, y1, x2, y2), სადაც x1, y1 არის მართკუთხედის ზედა მარცხენა წერტილის კოორდინატები, x2, y2 არის მართკუთხედის ქვედა მარჯვენა წერტილის კოორდინატები;
- პოლი ტიპისთვის: კოორდინატები = (x1, y1, x2, y2, ..., xn, yn), მრავალკუთხედის თითოეული წერტილის x, y კოორდინატები თანმიმდევრულად არის მითითებული;
3. ატრიბუტი href = "hop_address"- ადგენს გარდამავალ ბმულს (ანალოგიურად). გარდა ნახტომის მისამართისა, თქვენ შეგიძლიათ გამოიყენოთ JavaScript ფუნქციები ზოგიერთი მოქმედების შესასრულებლად.
4. ატრიბუტის სამიზნე = "მნიშვნელობა" - ტეგის მსგავსი განსაზღვრავს ბმულის შემდეგ მოქმედებას. შეუძლია მიიღოს ღირებულებები:
- _blank - ხსნის გვერდს ახალ ფანჯარაში
- _self - იტვირთება გვერდი მიმდინარე ფანჯარაში
- _parent - იტვირთება გვერდი მშობლის ჩარჩოში
- _top - აუქმებს ყველა ჩარჩოს და იტვირთება გვერდი ბრაუზერის სრულ ფანჯარაში
5. ატრიბუტის სათაური = "(! LANG: მინიშნება" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}
6. ატრიბუტი ნოჰრეფი - ხდის ტერიტორიას არააქტიურს. გამოიყენება საგნების გადაფარვისას. იგი იშვიათად გამოიყენება, მაგრამ ზოგჯერ ეს შეიძლება იყოს შეუცვლელი გადაწყვეტა. მაგალითად, შეგიძლიათ გააკეთოთ მცირე წრე დიდი წრის შიგნით არააქტიური.
ნოჰრეფის ტერიტორია პირველ რიგში უნდა წავიდეს.
ნიმუშის კოდი:
სურათზე ბმულების რუქის გამოყენება ხდება მხოლოდ ამოცანების ვიწრო დიაპაზონში. მაგალითად, რაიმე სახის სქემის ან მართვის რუქის შექმნისას. სხვა შემთხვევებში, მენიუს და სხვა გრაფიკული ელემენტების შესაქმნელად რუკის გამოყენება არაგონივრულად გამოიყურება.
HTML სურათებიემატება ვებ გვერდებს ტეგის გამოყენებით ... გრაფიკის გამოყენება ვებ გვერდებს უფრო ვიზუალურად მიმზიდველს ხდის. სურათები ხელს უწყობს ვებ დოკუმენტის არსისა და შინაარსის უკეთ გადმოცემას.
HTML ტეგების გამოყენება
სურათების ჩასმა HTML დოკუმენტში
1. წარწერა ![]()
ელემენტი წარმოადგენს გამოსახულებას და მის შემცვლელ შინაარსს, რომელიც ემატება alt ატრიბუტის გამოყენებით. ვინაიდან ელემენტი
არის შიგნით, რეკომენდებულია მისი განთავსება ბლოკის ელემენტში, მაგალითად,
ან
წარწერა აქვს საჭირო src ატრიბუტი, რომლის მნიშვნელობა არის გამოსახულების აბსოლუტური ან ფარდობითი გზა:
ტეგისთვის შესაძლებელია შემდეგი ატრიბუტები:
| ატრიბუტი | აღწერა, მიღებული ღირებულება |
|---|---|
| ალტ | Alt ატრიბუტი დასძენს სურათის ალტერნატიულ ტექსტს. ის ნაჩვენებია იმ ადგილას, სადაც გამოსახულება ჩნდება დატვირთვის წინ ან როდესაც გრაფიკა გამორთულია, ასევე ნაჩვენებია ინსტრუმენტის რჩევისას, როდესაც თაგვის კურსორს გამოსახულებაზე გადაათრიავთ. სინტაქსი: alt = "(! LANG: სურათის აღწერა" . !} |
| კროსორიგინი | Crossorigin ატრიბუტი გაძლევთ საშუალებას ჩატვირთოთ სურათები რესურსებიდან სხვადასხვა დომენზე CORS მოთხოვნების გამოყენებით. ტილოზე ატვირთული სურათები CORS მოთხოვნების გამოყენებით შეიძლება ხელახლა გამოიყენოთ. დაშვებული მნიშვნელობები: ანონიმური - ჯვარედინი წარმოშობის მოთხოვნა მზადდება HTTP სათაურის გამოყენებით და არ გაიცემა რწმუნებათა სიგელები. თუ სერვერი არ მიაწვდის სერტიფიკატს სერვერს, საიდანაც მოთხოვნილია შინაარსი, სურათი დაზიანდება და მისი გამოყენება შეიზღუდება. გამოყენების რწმუნებათა სიგელები-ჯვარედინი წარმოშობის მოთხოვნა შესრულებულია სერთიფიკატების გავლით. სინტაქსი: crossorigin = "ანონიმური". |
| სიმაღლე | სიმაღლის ატრიბუტი ადგენს სურათის სიმაღლეს პიქსელში. სინტაქსი: სიმაღლე = "300". |
| ისმაპა | Ismap ატრიბუტი მიუთითებს იმაზე, რომ სურათი არის სერვერზე განთავსებული რუქა-სურათის ნაწილი (რუქა-სურათი არის გამოსახულება დაწკაპუნებული უბნებით). როდესაც დააწკაპუნებთ რუქის სურათზე, კოორდინატები იგზავნება სერვერზე, როგორც URL შეკითხვის სტრიქონი. Ismap ატრიბუტი დასაშვებია მხოლოდ იმ შემთხვევაში, თუ ელემენტი სინტაქსი: ismap. |
| longdesc | URL სურათის გაფართოებული აღწერისთვის, alt ატრიბუტის გარდა. სინტაქსი: longdesc = "http://www.example.com/description.txt". |
| src | Src ატრიბუტი განსაზღვრავს სურათისკენ მიმავალ გზას. სინტაქსი: src = "flower.jpg". |
| ზომები | ადგენს სურათის ზომას ჩვენების პარამეტრების მიხედვით. მუშაობს მხოლოდ მაშინ, როდესაც მითითებულია srcset ატრიბუტი. ატრიბუტის მნიშვნელობა არის ერთი ან მეტი სტრიქონი, რომლებიც გამოყოფილია მძიმეებით. |
| srcset | ქმნის სურათების წყაროების ჩამონათვალს, რომლებიც უნდა შეირჩეს ეკრანის გარჩევადობის საფუძველზე. შეიძლება გამოყენებულ იქნას src ატრიბუტთან ერთად ან მის ნაცვლად. ატრიბუტის მნიშვნელობა არის ერთი ან მეტი სტრიქონი, რომლებიც გამოყოფილია მძიმეებით. 
|
| სარგებლობის რუკა | Usemap ატრიბუტი განსაზღვრავს სურათს, როგორც გამოსახულების რუქას. მნიშვნელობა უნდა დაიწყოს # სიმბოლოთი. მნიშვნელობა ასოცირდება ტეგის სახელის ან id ატრიბუტის ღირებულებასთან |
| სიგანე | სიგანის ატრიბუტი ადგენს სურათის სიგანეს პიქსელში. სინტაქსი: width = "500". |
1.1. სურათის მისამართი
სურათის მისამართი შეიძლება სრულად იყოს მითითებული (აბსოლუტური URL), მაგალითად:
url (http://anysite.ru/images/anyphoto.png)
ან ნათესავი გზის გავლით დოკუმენტიან ძირეული დირექტორიასაიტი:
url (../ images / anyphoto.png) - ფარდობითი გზა დოკუმენტიდან,
url (/images/anyphoto.png) არის ნათესავი გზა ძირეული დირექტორიადან.
ეს განმარტებულია შემდეგნაირად:
../ - ნიშნავს ერთ საფეხურზე ასვლას, ძირითად დირექტორიაში,
სურათები / - გადადით საქაღალდეში სურათებით,
anyphoto.png - მიუთითებს გამოსახულების ფაილზე.
1.2 სურათის ზომები
სურათის ზომის დადგენის გარეშე, ნახატი ნაჩვენებია გვერდზე რეალური ზომით. თქვენ შეგიძლიათ შეცვალოთ სურათის ზომები სიგანისა და სიმაღლის ატრიბუტების გამოყენებით. თუ მხოლოდ ერთი ატრიბუტია მითითებული, მეორე ავტომატურად გამოითვლება სურათის პროპორციების შესანარჩუნებლად.
1.3 გრაფიკული ფაილის ფორმატები
JPEG ფორმატი (ერთობლივი ფოტოგრაფიის ექსპერტთა ჯგუფი). JPEG სურათებიიდეალურია ფოტოსურათებისთვის, ისინი შეიძლება შეიცავდეს მილიონობით სხვადასხვა ფერს. შეკუმშავს სურათებს უკეთესად ვიდრე GIF– ებს, მაგრამ ტექსტი და მყარი ფერის დიდი უბნები შეიძლება დაბინძურდეს.
GIF ფორმატი (გრაფიკული გაცვლის ფორმატი)... იდეალურია სურათების შეკუმშვისთვის მყარი ფერის სფეროებით, როგორიცაა ლოგოები. GIF– ები გაძლევთ საშუალებას, რომ ერთი ფერი იყოს გამჭვირვალე, ისე რომ ვებ გვერდის ფონი გამოსახულების ნაწილის მეშვეობით გამოჩნდეს. GIF– ები ასევე შეიძლება შეიცავდეს მარტივ ანიმაციებს. GIF– ები შეიცავს მხოლოდ 256 ჩრდილს, რაც გამოსახულებებს აჩრდილებს და არარეალისტურად გამოიყურება, როგორც პლაკატები.
PNG ფორმატში (პორტატული ქსელის გრაფიკა)... მოიცავს GIF და JPEG ფორმატების საუკეთესო მახასიათებლებს. შეიცავს 256 ფერს და შესაძლებელს ხდის ერთ -ერთი ფერის გამჭვირვალედ, სურათების შეკუმშვისას უფრო მცირე ზომისვიდრე GIF ფაილი.
APNG ფორმატში (ანიმაციური პორტატული ქსელის გრაფიკა)... სურათის ფორმატი დაფუძნებულია PNG ფორმატში... ანიმაციის შენახვის საშუალებას იძლევა და ასევე მხარს უჭერს გამჭვირვალობას.
SVG ფორმატი (მასშტაბური ვექტორული გრაფიკა)... SVG ნახატი შედგება გეომეტრიული ფიგურების ნაკრებისგან, რომელიც აღწერილია XML ფორმატში: ხაზი, ელიფსი, პოლიგონი და ა. ორივე სტატიკური და ანიმაციური გრაფიკა მხარდაჭერილია. ფუნქციების ნაკრები მოიცავს სხვადასხვა სახის გარდაქმნებს, ალფა ნიღბებს, ფილტრის ეფექტებს, შაბლონების გამოყენების შესაძლებლობას. SVG სურათების ზომის შეცვლა შესაძლებელია ხარისხის გაუარესების გარეშე.
BMP ფორმატი (ბიტმაპის სურათი)... არაკომპრესირებული (ორიგინალი) ბიტმაპირომლის შაბლონი არის პიქსელების მართკუთხა ბადე. ბიტმაპის ფაილი შედგება სათაურის, პალიტრისა და გრაფიკული მონაცემებისგან. სათაური შეიცავს ინფორმაციას გრაფიკული სურათისა და ფაილის შესახებ (პიქსელის სიღრმე, სიმაღლე, სიგანე და ფერების რაოდენობა). პალიტრა მითითებულია მხოლოდ იმ Bitmap ფაილებში, რომლებიც შეიცავს პალიტრის სურათებს (8 ან ნაკლები ბიტი) და შედგება არაუმეტეს 256 ელემენტისა. გრაფიკული მონაცემები წარმოადგენს თავად სურათს. ამ ფორმატში ფერის სიღრმე შეიძლება იყოს 1, 2, 4, 8, 16, 24, 32, 48 ბიტი თითო პიქსელზე.
ICO ფორმატი (Windows ხატულა)... ფაილის ხატის შენახვის ფორმატი Microsoft Windows... ასევე, Windows ხატი გამოიყენება როგორც ხატები ინტერნეტში განთავსებულ საიტებზე. ეს არის ამ ფორმატის სურათი, რომელიც ნაჩვენებია ბრაუზერში საიტის მისამართის ან სანიშნის გვერდით. ერთი ICO ფაილი შეიცავს ერთ ან რამდენიმე ხატს, რომელთა ზომა და ფერი ცალკეა მითითებული. ხატის ზომა შეიძლება იყოს ნებისმიერი, მაგრამ ყველაზე გავრცელებული ხატებია კვადრატული ხატები, რომელთა მხარეებია 16, 32 და 48 პიქსელი.
2. წარწერა
წარწერა
სახელის ატრიბუტი ხელმისაწვდომია ტეგისთვის, რომელიც განსაზღვრავს რუქის სახელს. ტეგის სახელის ატრიბუტის მნიშვნელობა
ელემენტი
3. წარწერა
წარწერა აღწერს მხოლოდ ერთ ცხელ წერტილს კლიენტის მხარის გამოსახულების რუქაში. ელემენტს არ აქვს დასასრულის ტეგი. თუ ერთი ცხელი წერტილი გადაფარავს მეორეს, მაშინ განხორციელდება პირველი ბმული სფეროების სიიდან.
| ატრიბუტი | Მოკლე აღწერა |
|---|---|
| ალტ | განსაზღვრავს ალტერნატიულ ტექსტს რუკის აქტიური ფართობისთვის. |
| კოორდინატები | განსაზღვრავს ეკრანის ფართობის პოზიციას. კოორდინატები მითითებულია სიგრძის ერთეულებში და გამოყოფილია მძიმეებით: ამისთვის წრე- წრის ცენტრისა და რადიუსის კოორდინატები; ამისთვის მართკუთხედი- ზედა მარცხენა და მარჯვენა ქვედა კუთხეების კოორდინატები; ამისთვის მრავალკუთხედი- პოლიგონის წვეროების კოორდინატები სასურველი თანმიმდევრობით, ასევე რეკომენდებულია ფიგურის ლოგიკური დასრულებისათვის მიუთითოთ ბოლო კოორდინატები, უდრის პირველს. |
| ჩამოტვირთვა | ავსებს href ატრიბუტს და ეუბნება ბრაუზერს, რომ რესურსი უნდა აიტვირთოს იმ მომენტში, როდესაც მომხმარებელი დააწკაპუნებს ბმულზე, ნაცვლად იმისა, რომ, მაგალითად, წინასწარ გახსნას (როგორც PDF ფაილი). ატრიბუტის სახელის მიცემით, ჩვენ ვაძლევთ დატვირთულ ობიექტს სახელს. ნებადართულია ატრიბუტის გამოყენება მისი მნიშვნელობის განსაზღვრის გარეშე. |
| href | განსაზღვრავს URL ბმულისთვის. აბსოლუტური ან ნათესავი ბმული შეიძლება იყოს მითითებული. |
| hreflang | განსაზღვრავს დაკავშირებული ვებ დოკუმენტის ენას. გამოიყენება მხოლოდ href ატრიბუტთან ერთად. მიღებული მნიშვნელობები არის აბრევიატურა, რომელიც შედგება ენის კოდის აღმნიშვნელი ასოებისაგან. |
| მედია | განსაზღვრავს რა ტიპის მოწყობილობებისთვის იქნება ფაილის ოპტიმიზაცია. მნიშვნელობა შეიძლება იყოს ნებისმიერი მედია შეკითხვა. |
| რელ | ავსებს href ატრიბუტს ინფორმაციას მიმდინარე დოკუმენტსა და მასთან დაკავშირებულ დოკუმენტს შორის ურთიერთობის შესახებ. მიღებული ღირებულებები: ალტერნატიული - დოკუმენტის ალტერნატიული ვერსიის ბმული (მაგალითად, გვერდის დასაბეჭდად, თარგმანზე ან სარკეში). ავტორი - დოკუმენტის ავტორის ბმული. სანიშნე არის მუდმივი url, რომელიც გამოიყენება სანიშნეებისთვის. დახმარება - ბმული დახმარებისათვის. ლიცენზია - ამ ვებ დოკუმენტის საავტორო უფლებების ინფორმაციის ბმული. შემდეგი / წინა - მიუთითებს ინდივიდუალურ URL- ებს შორის ურთიერთობაზე. ამ მარკირების წყალობით, Google- ს შეუძლია განსაზღვროს, რომ ამ გვერდების შინაარსი დაკავშირებულია ლოგიკურ თანმიმდევრობით. nofollow - კრძალავს საძიებო სისტემამიჰყევით ბმულებს ამ გვერდზე ან კონკრეტულ ბმულს. noreferrer - მიუთითებს, რომ ბმულის შემდეგ, ბრაუზერმა არ უნდა გამოაგზავნოს HTTP მოთხოვნის სათაური (Referrer), რომელიც აფიქსირებს ინფორმაციას იმის შესახებ, თუ რომელი გვერდიდან მოდის საიტის სტუმარი. prefetch - მიუთითებს იმაზე, რომ სამიზნე დოკუმენტი უნდა იყოს ქეშირებული, ე.ი. ბრაუზერი ფონზე გადმოწერს გვერდის შინაარსს თავის ქეში. ძებნა - მიუთითებს, რომ სამიზნე დოკუმენტი შეიცავს საძიებო ინსტრუმენტს. ტეგი - მიუთითებს საკვანძო სიტყვამიმდინარე დოკუმენტისთვის. |
| ფორმა | ადგენს ცხელი წერტილის ფორმას რუკაზე და მის კოორდინატებს. მას შეუძლია მიიღოს შემდეგი მნიშვნელობები: rect - მართკუთხა ფორმის აქტიური არე; წრე - აქტიური არე წრის სახით; პოლი - აქტიური ფართობი პოლიგონის სახით; ნაგულისხმევი - აქტიური ტერიტორია იკავებს სურათის მთელ არეალს. |
| სამიზნე | მიუთითებს, სად იტვირთება დოკუმენტი ბმულის მიყოლებით. იგი იღებს შემდეგ მნიშვნელობებს: _self - გვერდი იტვირთება მიმდინარე ფანჯარაში; _blank - გვერდი იხსნება ბრაუზერის ახალ ფანჯარაში; _parent - გვერდი იტვირთება მშობლის ჩარჩოში; _ ზედა - გვერდი იტვირთება ბრაუზერის სრულ ფანჯარაში. |
| ტიპი | განსაზღვრავს მითითებული ფაილების MIME ტიპს, ე.ი. ფაილის გაფართოება. |
4. გამოსახულების რუქის შექმნის მაგალითი
1) ჩვენ აღვნიშნავთ თავდაპირველ სურათს სასურველი ფორმის აქტიურ უბნებზე. ტერიტორიების კოორდინატები შეიძლება გამოითვალოს ფოტო დამუშავების პროგრამის გამოყენებით, მაგალითად, Adobe Photoshop ან საღებავი.
ბრინჯი 1. სურათის მარკირების მაგალითი რუქის შესაქმნელად 2) დააყენეთ რუქის სახელი ეტიკეტზე დამატებით
Jpg "alt =" (! LANG: ყვავილები_ფოტო" width="680" height="383" usemap="#flowers">
!}
ბრინჯი 2. რუქის სურათის შექმნის მაგალითი, როდესაც თქვენ დააჭერთ მაუსის კურსორს ყვავილზე, გადადით გვერდზე აღწერილობით
