როგორც წესი, ვებ – გვერდებზე გრაფიკული ისრები გამოიყენება ნავიგაციის ორგანიზების მიზნით. როდესაც ასეთ მაჩვენებელს დააჭერთ, გადახვალთ სხვა გვერდზე ან მიმდინარე გვერდის სხვა განყოფილებაში. ზოგჯერ მათთან დაკავშირებულია ზოგიერთი მოქმედება - თეგის ველის შინაარსის მონიშვნა, JavaScript სკრიპტის გაშვება და ა.შ. იმის ხაზგასასმელად, რომ ეს ისარი აქტიური ელემენტია, გამოიყენეთ”მონიშნეთ” ეფექტი, ე.ი. ცვლილებების გამოჩენა მაუსის გადაადგილებისას.
აუცილებელია
HTML და CSS ენების ცოდნა
ინსტრუქციები
Ნაბიჯი 1
განსაზღვრეთ ისრის ხაზგასმის რომელი მექანიზმია თქვენთვის საუკეთესო. რამდენიმე მათგანია, ორი მარტივი მოცემულია ამ ინსტრუქციის შემდგომ ეტაპებზე. ორივე მათგანი იყენებს CSS hover ფსევდო კლასს. როდესაც მაუსის კურსორი გადადის გრაფიკულ ელემენტზე (ისარი), მასზე ვრცელდება ამ ფსევდო კლასში აღწერილი სტილი, ხოლო დანარჩენ დროს ეს სტილი არ არის აქტიური. ქვემოთ მოცემული ორივე ვარიანტისთვის შეგიძლიათ გამოიყენოთ იგივე HTML კოდი, მაგრამ განსხვავებული სტილის აღწერილობა. ისრის კოდი გვერდის წყაროში შეიძლება დაიწეროს შემდეგნაირად: ID ატრიბუტი განსაზღვრავს ბმულის იდენტიფიკატორს (arrowA), რომლითაც ბრაუზერი განსაზღვრავს სტილის რომელი აღწერილობა უნდა იქნას გამოყენებული მასზე.
ნაბიჯი 2
პირველი ვარიანტი მოგიწევთ ორი ისრის სურათის მომზადება - განათებით და მის გარეშე. შეინახეთ ისინი ფაილებში, სახელებით, მაგალითად, arrON.
a # arrowA, # arrowA: ეწვია {
ჩვენება: ბლოკი;
სიმაღლე: 30px;
სიგანე: 100 პიქსელი;
ფონი: url (arrOFF.gif) განმეორება;
საზღვარი: 0;
}
a # arrowA: hover {
ფონი: url (arrON.gif) განმეორება;
საზღვარი: 0;
}
პირველი ბლოკი შეიცავს ისრის ზომებს (სიმაღლე: 30px; სიგანე: 100px;) - შეცვალეთ ისინი მომზადებული ისრის სურათების ზომებით.
ნაბიჯი 3
მეორე ვარიანტი საშუალებას გაძლევთ გაიაროთ მხოლოდ ერთი გამოსახულების ფაილი. თქვენ უნდა მოათავსოთ ისრის ორივე სურათი - ორივე გამოკვეთილი და არააქტიური. თქვენ შეგიძლიათ განათავსოთ ისინი გვერდიგვერდ, შეგიძლიათ ერთმანეთზე მაღლა. ნიმუშის კოდში ვივარაუდებთ, რომ მონიშნული ისარი არააქტიურის ქვეშ მოთავსებულია და თქვენს მიერ ფაილს დაერქვა arr.gif. ეს სურათი, ისევე როგორც წინა ვერსიაში, გამოიყენება ბმულის ფონზე. მას შემდეგ, რაც ობიექტის ზომები მითითებულია სტილის აღწერაში, მთელი დანარჩენი ფონი (ხაზგასმული ისარი), რომელიც მათში არ ჯდება, ქსელური ქსელისთვის არ ჩანს. ფსევდო სტილის მიბმის აღწერაში მითითებულია ფონის სურათის პოზიციონირების ცვლა, ასე რომ, როდესაც კურსორს მიამაგრებთ ბმულზე, სხვა სექცია გახდება ხილული და ახლა პასიური ისარი გამოჩნდება "ეკრანს გარეთ".
a # arrowA, # arrowA: ეწვია {
ჩვენება: ბლოკი;
სიგანე: 100 პიქსელი;
სიმაღლე: 30px;
ფონი: url (arr.gif) განმეორება;
საზღვარი: 0;
}
a # arrowA: hover {
ფონი: url (arr.gif) 31px განმეორება;
საზღვარი: 0;
}
არ დაგავიწყდეთ აქაც ზომის შეცვლა.
