Rollover სურათი არის გამოსახულება, რომელიც იცვლება სხვა სურათზე, როდესაც თქვენ ან თქვენს მომხმარებელს მაუსი ამოძრავებს მასზე. ეს ჩვეულებრივ გამოიყენება ინტერაქტიული გრძნობის შესაქმნელად, როგორიცაა ღილაკები ან ჩანართები. მაგრამ თქვენ შეგიძლიათ შექმნათ rollover სურათები გარეთ მხოლოდ შესახებ არაფერი.
ეს სახელმძღვანელო განკუთვნილია დაგეხმარებათ შექმნათ rollover სურათი Dreamweaver . იგი მიზნად ისახავს ხალხის გამოყენებას Dreamweaver- ის შემდეგი ვერსიების გამოყენებით:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
მოთხოვნები ამ Tutorial- ისთვის
- Dreamweaver
ზემოთ ჩამოთვლილი ვერსიები. - ორიგინალური გამოსახულება
დარწმუნდით, რომ ამ სურათის ოპტიმიზაცია. ეს ხელს შეუწყობს თქვენი გვერდების უფრო სწრაფად ჩატვირთვას. - გადაბრუნების სურათი
ეს სურათი უნდა იყოს იგივე ზომები, როგორც ორიგინალური იმიჯი. და, როგორც ორიგინალური იმიჯი, უნდა იყოს ოპტიმიზირებულია გვერდის დატვირთვის დროს. - ვებ გვერდი
ეს არის HTML გვერდი, სადაც თქვენ დააყენა თქვენი rollover სურათი.
06 01
დაიწყე
- დაწყება Dreamweaver
- გახსენით ვებ გვერდი, სადაც გსურთ თქვენი გადახდა
06 06
ჩასმა სურათის ობიექტის ობიექტის ჩასმა
Dreamweaver ხდის ადვილად შექმნათ rollover სურათი.
- გადასვლა Insert მენიუში და ქვემოთ "გამოსახულება ობიექტები" ქვე მენიუში.
- აირჩიეთ "სურათი rollover" ან "rollover image"
ზოგიერთი ძველი ვერსია Dreamweaver მოვუწოდებთ გამოსახულება ობიექტები "ინტერაქტიული სურათები" ნაცვლად.
06 06
ვუთხრა Dreamweaver რა სურათები გამოიყენოს
Dreamweaver pops დიალოგი ყუთში სფეროებში თქვენ უნდა შეავსოთ რათა შეიქმნას თქვენი rollover სურათი.
სურათის სახელი
აირჩიეთ სურათის სახელი, რომელიც უნიკალურია გვერდზე. ეს უნდა იყოს ყველა ერთი სიტყვა, მაგრამ შეგიძლიათ გამოიყენოთ ციფრები, ხაზგასმა (_) და ჰიპენი (-). ეს გამოყენებული იქნება სურათის შესაცვლელად.
ორიგინალური გამოსახულება
ეს არის URL ან მდებარეობა სურათი, რომელიც დაიწყება გვერდზე. თქვენ შეგიძლიათ გამოიყენოთ ნათესავი ან აბსოლუტური გზა ამ სფეროში. ეს უნდა იყოს სურათზე, რომელიც არსებობს თქვენს სერვერზე ან თქვენ ატვირთოთ გვერდი.
გადაღების სურათი
ეს არის გამოსახულება, რომელიც გამოჩნდება მაშინ, როდესაც თქვენ მაუსის გამოსახულებაზე გადაგიყვანთ. თავდაპირველი გამოსახულების მსგავსად, ეს შეიძლება იყოს გამოსახულების აბსოლუტური ან ნათესავი გზა, და ეს უნდა არსებობდეს ან ატვირთოთ როდესაც ატვირთეთ გვერდი.
წინასწარ გადატვირთვის სურათი
ეს ვარიანტი არჩეულია ნაგულისხმევად, რადგან ის უფრო სწრაფი აღმოჩნდება. არჩევით გადატვირთვის იმიჯი, ვებ ბრაუზერი ინახავს მას ქეში სანამ მაუსის გააფართოვოს მასზე.
ალტერნატიული ტექსტი
კარგი ალტერნატიული ტექსტი ქმნის თქვენს სურათებს უფრო ხელმისაწვდომი. ყოველთვის უნდა გამოიყენოთ რაიმე სახის ალტერნატიული ტექსტი ნებისმიერი სურათების დასამატებლად.
როდესაც დააწკაპებთ, გადადით URL- ზე
ადამიანების უმრავლესობა დააწკაპუნეთ სურათზე, როდესაც ხედავთ ერთ გვერდზე. ასე რომ თქვენ უნდა იყოს ჩვევა, რათა მათ clickable. ეს პარამეტრი საშუალებას გაძლევთ დააკონკრეტოთ გვერდის ან URL, რათა იხილოთ მაყურებელი, როდესაც ისინი დააწკაპუნეთ სურათზე. მაგრამ ეს ვარიანტი არ არის საჭირო იმისათვის, რომ შევქმნათ გადახურვა.
როდესაც თქვენ დასრულდა ყველა ველი, დააჭირეთ OK აქვს Dreamweaver შექმნა თქვენი rollover სურათი.
შემდეგი გვერდი გვიჩვენებს სცენარი, რომელიც Dreamweaver წერს.
06 06
Dreamweaver გიჩვენებთ JavaScript- ს თქვენთვის
თუ გახსნით გვერდს კოდი-ხედით, თქვენ ნახავთ, რომ Dreamweaver- ი იწერება JavaScript- ის ბლოკზე თქვენი HTML დოკუმენტის
. ეს ბლოკი მოიცავს 3 ფუნქციას, რომელსაც უნდა ჰქონდეს სურათების გადატვირთვა, როდესაც მაუსი ამოძრავებს მათ და წინასწარ დატვირთვის ფუნქციას თუ აირჩევთ ამას.ფუნქცია MM_swapImgRestore ()
ფუნქცია MM_findObj (n, დ)
ფუნქცია MM_swapImage ()
ფუნქცია MM_preloadImages ()
06 06
Dreamweaver დასძენს HTML ამისთვის Rollover
თუ აირჩევთ Dreamweaver- ს გადატვირთვის სურათების წინასწარ ჩატვირთვა, მაშინ ნახავთ HTML კოდს თქვენი დოკუმენტის იმ ნაწილში, რომელსაც წინასწარ ჩატვირთვის სკრიპტი უწოდებთ ისე, რომ თქვენი სურათები უფრო სწრაფად იტვირთება.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver ასევე დასძენს ყველა კოდი თქვენს სურათს და აკავშირებს მას (თუ შედის URL). ჩამოსვლის ნაწილი დაემატება წამყვანმა tag როგორც onmouseover და onmouseout ატრიბუტები.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 06
გამოცდა
იხილეთ სრულად ფუნქციური გადანაწილება იმიჯი და ვისწავლოთ რა შასტას გონებაში.