โดยทั่วไป ลูกศรแบบกราฟิกบนเว็บไซต์ใช้เพื่อจัดระเบียบการนำทาง เมื่อคุณคลิกตัวชี้ดังกล่าว คุณจะไปยังหน้าอื่นหรือส่วนอื่นของหน้าปัจจุบัน บางครั้งการกระทำบางอย่างก็เชื่อมโยงกับการกระทำเหล่านั้น เช่น การเน้นเนื้อหาของช่องแท็ก การเรียกใช้สคริปต์ JavaScript ฯลฯ เพื่อเน้นว่าลูกศรนี้เป็นองค์ประกอบที่ใช้งานอยู่ ให้ใช้เอฟเฟกต์ "ไฮไลต์" เช่น การเปลี่ยนแปลงลักษณะที่ปรากฏเมื่อวางเมาส์
จำเป็น
ความรู้พื้นฐานของภาษา HTML และ CSS CSS
คำแนะนำ
ขั้นตอนที่ 1
กำหนดกลไกในการปรับใช้การเน้นลูกศรที่เหมาะสมที่สุดสำหรับคุณ มีหลายแบบ สองแบบง่ายๆ ให้ไว้ในขั้นตอนต่อๆ ไปของคำแนะนำนี้ พวกเขาทั้งคู่ใช้ CSS hover pseudo-class เมื่อเคอร์เซอร์ของเมาส์อยู่เหนือองค์ประกอบกราฟิก (ลูกศร) ระบบจะใช้รูปแบบที่อธิบายไว้ในคลาสหลอกนี้ และเวลาที่เหลือของสไตล์นี้จะไม่ทำงาน สำหรับทั้งสองตัวเลือกที่อธิบายไว้ด้านล่าง คุณสามารถใช้ HTML เดียวกันได้ รหัส แต่คำอธิบายรูปแบบที่แตกต่างกัน รหัสลูกศรในแหล่งที่มาของหน้าสามารถเขียนได้ดังนี้: แอตทริบิวต์ id ระบุตัวระบุลิงก์ (arrowA) โดยที่เบราว์เซอร์จะกำหนดว่าควรใช้คำอธิบายลักษณะใด
ขั้นตอนที่ 2
ตัวเลือกแรกคุณจะต้องเตรียมภาพลูกศรสองภาพ - มีและไม่มีแสงพื้นหลัง บันทึกลงในไฟล์ที่มีชื่อเช่น arrON.
a # arrowA, # arrowA: เข้าชมแล้ว {
แสดง: บล็อก;
ความสูง: 30px;
ความกว้าง: 100px;
พื้นหลัง: url (arrOFF.gif) ไม่ซ้ำ;
เส้นขอบ: 0;
}
a # arrowA: โฮเวอร์ {
พื้นหลัง: url (arrON.gif) ไม่ซ้ำ;
เส้นขอบ: 0;
}
บล็อกแรกมีขนาดของลูกศร (ความสูง: 30px; ความกว้าง: 100px;) - แทนที่ด้วยขนาดของรูปภาพลูกศรที่เตรียมไว้
ขั้นตอนที่ 3
ตัวเลือกที่สองช่วยให้คุณใช้ไฟล์รูปภาพได้เพียงไฟล์เดียว คุณต้องวางรูปภาพของลูกศรทั้งสองไว้ - ทั้งที่เน้นและไม่ใช้งาน คุณสามารถวางเคียงข้างกันคุณสามารถวางเหนืออีกข้างหนึ่งได้ ในโค้ดตัวอย่าง เราจะถือว่าลูกศรที่ไฮไลต์อยู่ใต้ลูกศรที่ไม่ใช้งาน และคุณตั้งชื่อไฟล์ว่า arr.
a # arrowA, # arrowA: เข้าชมแล้ว {
แสดง: บล็อก;
ความกว้าง: 100px;
ความสูง: 30px;
พื้นหลัง: url (arr.gif) ไม่ซ้ำ;
เส้นขอบ: 0;
}
a # arrowA: โฮเวอร์ {
พื้นหลัง: url (arr.gif) ไม่ซ้ำ 31px;
เส้นขอบ: 0;
}
อย่าลืมปรับขนาดที่นี่ด้วย