ღილაკების უკანა განათება ვებ – გვერდებზე, როგორც წესი, ორგანიზებულია ორი სურათის გამოყენებით. როდესაც მაუსის კურსორი მიაქციეთ დოკუმენტის შესაბამის ელემენტს (ბმული ან ღილაკი), წარმოიქმნება მოვლენა, რომელიც CSS ენაზე დაწერილი ინსტრუქციის შესაბამისად, ბრაუზერს უბიძგებს შეცვალოს ერთი სურათი მეორეზე. როდესაც მაუსის კურსორი გადაადგილდება ღილაკიდან, ხდება საპირისპირო ჩანაცვლება.
აუცილებელია
HTML და CSS ენების ცოდნა
ინსტრუქციები
Ნაბიჯი 1
ასეთი ხაზგასმის მექანიზმის დანერგვის რამდენიმე ვარიანტი არსებობს. ნებისმიერი მათგანისთვის შეგიძლიათ გამოიყენოთ იგივე HTML კოდი, შეცვალოთ მხოლოდ შესაბამისი სტილის აღწერა. ღილაკის HTML კოდი შეიძლება ასე გამოიყურებოდეს: ტექსტი ღილაკზე აქ მოცემულია ამ გვერდის ელემენტის იდენტიფიკატორი (id = "btnA"), რომელსაც დაერთვება სტილის აღწერა.
ნაბიჯი 2
ერთ-ერთი ვარიანტის განსახორციელებლად, თქვენ უნდა მოამზადოთ ორი სურათი, რომელთაგან ერთში ჩანს ღილაკი არააქტიურ მდგომარეობაში, ხოლო მეორეში განათების განათებით. ისინი გამოყენებული იქნება როგორც ბმულის ფონის სურათი. ამ ღილაკის CSS ინსტრუქცია შეიძლება ასე გამოიყურებოდეს:
a # btnA, a # btnA: ეწვია {
ჩვენება: ბლოკი;
სიგანე: 50px;
სიმაღლე: 20px;
ფონი: url (btnA.gif) განმეორება;
საზღვარი: 0;
}
a # btnA: hover {
ფონი: url (btnA_hover.gif) განმეორება;
საზღვარი: 0;
}
აქ, პირველ ბლოკში, მითითებულია ღილაკის ამსახველი სურათის ზომები (სიგანე: 50px; სიმაღლე: 20px;). თქვენ უნდა შეცვალოთ ისინი თქვენი სურათის ზომებით. გამოსახულების ფაილების სახელები უნდა შეიცვალოს ანალოგიურად: btnA.
ნაბიჯი 3
ერთი ალტერნატივაა ორივე სურათის ერთ სურათში განთავსება. ეს შეიძლება იყოს ერთმანეთზე მაღლა, ან იყოს ერთმანეთის გვერდით. ის ასევე გამოყენებული იქნება როგორც ბმული. რადგან ღილაკის ზომა მითითებულია ღილაკის სტილის აღწერაში, ყველაფერი რაც არ ჯდება მათში, არ ჩანს. ამ შემთხვევაში, CSS აღწერილობაში განთავსებული ინსტრუქციები მაუსის კურსორის გადაადგილებისას უნდა გადაახვიოთ ფონის სურათს ისე, რომ მონიშნულ ღილაკზე გამოსახული ადგილი ჩარჩოში მოხვდეს. ამ ვარიანტისთვის, წინა ნაბიჯის კოდი უნდა შეიცვალოს შემდეგნაირად:
a # btnA, a # btnA: ეწვია {
ჩვენება: ბლოკი;
სიგანე: 50px;
სიმაღლე: 20px;
ფონი: url (btnA.gif) განმეორება;
საზღვარი: 0;
}
a # btnA: hover {
ფონი: url (btnA.gif) განმეორებითი 21px;
საზღვარი: 0;
}
ეს მიიჩნევს, რომ თქვენ განათავსეთ სურათები ერთმანეთზე ზემოთ (მონიშნულია ბოლოში) და შეინახეთ ფაილში, სახელწოდებით btnA.gif. ღილაკების სიმაღლეა 20px, სიგანე 50px - თქვენ უნდა შეცვალოთ ეს მნიშვნელობები საკუთარით.
