จากผู้เขียน:สวัสดี เคล็ดลับเครื่องมือคือข้อความอธิบายเล็กๆ ที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือองค์ประกอบ ซึ่งโดยปกติจะเป็นรูปภาพ วันนี้เราจะมาดูกันว่าคุณสามารถสร้างคำแนะนำเครื่องมือใน HTML ในรูปแบบต่างๆ ได้อย่างไร

คำแนะนำมาตรฐาน

ตามค่าเริ่มต้น คุณลักษณะ title มีหน้าที่ในการแสดงข้อความอธิบาย สามารถใช้กับองค์ประกอบต่างๆ ได้ แต่โดยปกติจะใช้เฉพาะกับรูปภาพเพื่ออธิบายสิ่งที่แสดงเท่านั้น

ในบทความก่อนหน้านี้ ฉันใช้รูปเสือเพื่อแสดงการทำงานกับขนาดรูปภาพ ถ้าไม่รังเกียจ ฉันจะใช้ภาพนี้อีกครั้ง ดังนั้นเพื่อแสดงคำใบ้ คุณเพียงแค่ต้องเพิ่มแอตทริบิวต์ title และเขียนข้อความที่ต้องการลงไป

< img src = "tiger.jpg" title = "นี่คือเสือ" >

อาจมีคำเดียวหรือหลายประโยคก็ได้ และนี่คือลักษณะที่ปรากฏ:

คำใบ้ปรากฏขึ้นอย่างราบรื่น ไม่ใช่ทันทีหลังจากโฮเวอร์ แต่หลังจากผ่านไประยะหนึ่ง นี่เป็นพฤติกรรมเริ่มต้น

ปัญหาหลักของคำแนะนำเครื่องมือดังกล่าวคือไม่สามารถจัดสไตล์ได้ ตัดสินใจอย่างไร ปัญหานี้- เราจะต้องให้คำแนะนำด้วยวิธีอื่น ตอนนี้ฉันจะแสดงให้คุณดูสองสามอัน

วิธีการ CSS บริสุทธิ์

วิธีที่น่าสนใจมากที่ช่วยให้คุณแสดงคำใบ้สำหรับรูปภาพได้อย่างสวยงาม มาร์กอัป HTML นั้นเรียบง่าย เพียงแต่รูปภาพเท่านั้นที่ต้องอยู่ในคอนเทนเนอร์บล็อก ซึ่งเราจะกำหนดตัวระบุเพื่อให้เราสามารถอ้างอิงในรูปแบบต่างๆ ในภายหลัง:

< div id = "tiger" data - name = "เสือสุมาตรา"> < img src = "tiger.jpg" > < / div >

สิ่งเดียวที่อาจไม่ชัดเจนสำหรับคุณที่นี่คือแอตทริบิวต์ data-name ประเด็นก็คือนี่คือสิ่งที่เรียกว่าแอตทริบิวต์ข้อมูลซึ่งไม่ได้ทำอะไรด้วยตัวเอง แต่ค่าของมันสามารถใช้ใน css และ javascript ซึ่งทำให้มีประโยชน์ในบางกรณี คุณจะเห็นสิ่งนี้ต่อไป

ก่อนอื่น เรามาอธิบายสไตล์ของคอนเทนเนอร์กันก่อน เราต้องการการวางตำแหน่งแบบสัมพันธ์เนื่องจากเราจะวางตำแหน่งบล็อกด้วยข้อความอธิบายอย่างแน่นอน เพื่อให้การวางตำแหน่งเกิดขึ้นโดยสัมพันธ์กับบล็อกหลัก ไม่ใช่ทั้งหน้า

#tiger ( ตำแหน่ง: สัมพันธ์; จอแสดงผล: อินไลน์บล็อก; )

#เสือ( ตำแหน่ง: ญาติ; จอแสดงผล: อินไลน์ - บล็อก;

การแสดงเส้นบล็อกจะป้องกันไม่ให้บล็อก (และด้วยบล็อกที่มีคำแนะนำเครื่องมือที่เราจะสร้าง) ไม่ให้ขยายไปทั่วความกว้างทั้งหมดของหน้าต่าง สิ่งที่เหลืออยู่คือการสร้างคำใบ้เอง ใน CSS การทำเช่นนี้สะดวกมากโดยใช้องค์ประกอบหลอก แบบนี้:

#tiger:hover:after ( เนื้อหา: attr(ชื่อข้อมูล); ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านล่าง: 0; พื้นหลัง: rgba(5,13,156,.55); สี: #fff; การจัดตำแหน่งข้อความ: กึ่งกลาง ; ตระกูลแบบอักษร: ขนาดตัวอักษร: 14px; ความกว้าง: 100% )

#tiger:โฮเวอร์:หลัง ( เนื้อหา: attr (ข้อมูล - ชื่อ); ตำแหน่ง: แน่นอน; ซ้าย: 0; ด้านล่าง: 0; พื้นหลัง: RGBA(5, 13, 156, .55); สี : #fff; ข้อความ - จัดแนว : กึ่งกลาง ; แบบอักษร - ครอบครัว : cursive ; ขนาดตัวอักษร: 14px; ช่องว่างภายใน: 3px 0; ความกว้าง: 100%;

มีโค้ดมากมาย แต่ไม่มีอะไรซับซ้อนที่นี่ ตัวเลือก #tiger:hover:after หมายถึงสิ่งต่อไปนี้: เมื่อเราโฮเวอร์เหนือบล็อกที่มีรูปภาพ เราจำเป็นต้องสร้างองค์ประกอบหลอกหลัง (จากนั้นกฎจะแสดงอยู่ในเครื่องหมายปีกกา) เนื้อหา: คุณสมบัติ attr (ชื่อข้อมูล) ระบุ ค่าข้อความปิดกั้น. มันจะเท่ากับสิ่งที่เขียนในแอตทริบิวต์ชื่อข้อมูลของบล็อกตัวตัดรูปภาพ

คำแนะนำเครื่องมือนี้จะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือรูปภาพ แต่ไม่เหมือนกับคำแนะนำมาตรฐานตรงที่จะเกิดขึ้นทันที และลักษณะที่ปรากฏนั้นจะเกิดขึ้นทันทีในขณะที่วางเมาส์เหนือ มีลักษณะเรียบเนียนใน ในกรณีนี้การใช้งานจะไม่ทำงานเนื่องจากองค์ประกอบหลอกไม่รองรับการเปลี่ยนภาพที่ราบรื่น

วิธีที่ 2. CSS บริสุทธิ์และรูปลักษณ์ที่ราบรื่น

อย่างไรก็ตาม ด้วยการเขียนโค้ดใหม่เล็กน้อย คุณสามารถทำให้ Tooltip ปรากฏได้อย่างราบรื่น และอีกครั้งโดยไม่ต้องใช้ JavaScript

หากต้องการดูเอฟเฟกต์ 2 อย่างที่ฉันจะแสดงให้คุณดูต่อไปฉันขอแนะนำให้เปิด Notepad หรือโปรแกรมแก้ไขโค้ดที่สะดวกแล้วทำซ้ำทุกอย่างตามหลังฉัน จริงอยู่ คุณยังต้องรวมไฟล์สไตล์ไว้ด้วย แม้ว่าสไตล์จะสามารถเขียนเป็น html ในแท็กได้ก็ตาม

เนื้อหาคำแนะนำเครื่องมือจะถูกเอาออกจากมุมมองโดยใช้คุณสมบัติระยะขอบซ้ายที่เป็นลบแทนที่จะแสดง: ไม่มี หรือการมองเห็น: ซ่อนอยู่ เนื่องจากโปรแกรมอ่านหน้าจอบางตัวละเว้นคุณสมบัติเหล่านี้

สไตล์ CSS สำหรับคำแนะนำเครื่องมือ

เร็วๆ นี้เราจะได้รับคำแนะนำเครื่องมือเพื่อให้ทำงานในลักษณะเดียวกัน เบราว์เซอร์ที่แตกต่างกัน- ตอนนี้เรามาเพิ่มโค้ด CSS สองสามบรรทัด

ด้วยการเพิ่มโค้ดต่อไปนี้ เราจะแสดงคำแนะนำเครื่องมือบนหน้าจอ แม้ว่าจะดูซ้ำซากและยากที่จะแยกออกจากส่วนที่เหลือของข้อความด้วยสายตา

CSS สำหรับแสดงคำแนะนำเครื่องมือ

.tooltip:hover span ( ตระกูลแบบอักษร: Calibri, Tahoma, Geneva, sans-serif; ตำแหน่ง: สัมบูรณ์; ซ้าย: 1em; ด้านบน: 2em; z-index: 99; ระยะขอบซ้าย: 0; ความกว้าง: 250px; ) เคล็ดลับเครื่องมือ:โฮเวอร์ img ( เส้นขอบ: 0; ระยะขอบ: -10px 0 0 -55px; ลอย: ซ้าย; ตำแหน่ง: สัมบูรณ์; ) .tooltip:โฮเวอร์ em ( ตระกูลแบบอักษร: Candara, Tahoma, Geneva, sans-serif; ขนาดตัวอักษร : 1.2em; Font-weight: ตัวหนา; จอแสดงผล: บล็อก; 0.2em 0 0.6em 0; *html a:โฮเวอร์ ( พื้นหลัง: โปร่งใส; )

ต้องการสตริง *html

คุณอาจสงสัยว่าเหตุใดจึงรวมบรรทัดสุดท้ายในโค้ดด้านบนด้วย กำหนดความโปร่งใสให้กับพื้นหลังของลิงก์ ขณะทดสอบคำแนะนำเครื่องมือ ฉันค้นพบเอฟเฟกต์แปลกๆ ใน IE6 ซึ่งไม่สามารถลบออกได้ตราบใดที่ยังมีพื้นหลังลิงก์อยู่!

โค้ดด้านบนช่วยให้มั่นใจได้ถึงการทำงานของคำแนะนำเครื่องมือ สิ่งเหล่านี้จะปรากฏบนหน้าจอ แต่ค่อนข้างยากที่จะแยกออกจากข้อความทั่วไป ไม่มีโครงร่างสีที่ทำให้ข้อความคำแนะนำเครื่องมือโดดเด่นบนเพจ

กำหนดรูปแบบสีสำหรับคำแนะนำเครื่องมือ/

รหัสต่อไปนี้จะกำหนดโครงร่างสีสำหรับแต่ละสไตล์คำแนะนำเครื่องมือทั้งห้าแบบ

หลังจากเปลี่ยนโค้ดของเพจและอัปเดตในเบราว์เซอร์แล้ว คำแนะนำเครื่องมือจะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือลิงก์ แทบจะเหมือนกันในทุกเบราว์เซอร์

รหัส CSS สำหรับโทนสี

.classic ( พื้นหลัง: #FFFFAA; เส้นขอบ: 1px solid #FFAD33; ) .critical ( พื้นหลัง: #FFCCAA; เส้นขอบ: 1px solid #FF3334; ) .help ( พื้นหลัง: #9FDAEE; เส้นขอบ: 1px solid #2BB0D7; ) .info ( พื้นหลัง: #9FDAEE; เส้นขอบ: 1px ทึบ #2BB0D7; ) .warning ( พื้นหลัง: #FFFFAA; เส้นขอบ: 1px ทึบ #FFAD33; )

โค้ด CSS นั้นเรียบง่ายมาก แต่ให้คำแนะนำเครื่องมือที่ดูดีและทำงานได้ในทุกที่ โทนสีสามารถเปลี่ยนแปลงได้ตามดุลยพินิจของคุณ

สัมผัส CSS3 เล็กน้อยสำหรับการแสดงคำแนะนำเครื่องมือขั้นสูง

ก่อนที่เราจะจบบทช่วยสอนนี้ เราจะเพิ่มโค้ด CSS3 สองสามบรรทัดเพื่อเพิ่มเอฟเฟกต์ภาพให้กับคำแนะนำเครื่องมือของเรา มาตั้งค่ามุมโค้งมนโดยใช้คุณสมบัติ border-radius และเพิ่มมิติโดยใช้คุณสมบัติ box-shadow

เนื่องจากคุณสมบัติเหล่านี้ไม่ได้รับการสนับสนุนทั่วโลก จึงใช้งานได้เฉพาะกับเบราว์เซอร์เวอร์ชันใหม่ล่าสุดบางรุ่นเท่านั้น แต่สถานที่ที่พวกเขาทำงาน คำแนะนำเครื่องมือจะดูโฉบเฉี่ยวและเซ็กซี่!

มาเพิ่มโค้ดด้านล่างใน selector.tooltip:hover span และรีเฟรชหน้า

เอฟเฟ็กต์ภาพสำหรับเส้นขอบ เงา และความโปร่งใสช่วยยกคำแนะนำเครื่องมือไว้เหนือข้อความหน้า และทำให้ข้อมูลตัดกันและอ่านง่าย

คุณอาจสังเกตเห็นว่าไม่เพียงแต่ใช้อย่างเป็นทางการเท่านั้น คุณสมบัติซีเอสเอส 3 แต่ยังรวมถึงส่วนขยายสำหรับ Mozilla และ WebKit

คุณสมบัติ CSS เพิ่มเติมสำหรับเบราว์เซอร์ใหม่

รัศมีเส้นขอบ: 5px 5px; -moz-border-รัศมี: 5px; -webkit-ขอบรัศมี: 5px; กล่องเงา: 5px 5px 5px rgba (0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba (0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba (0, 0, 0, 0.1);

สรุป

บทช่วยสอนนี้แสดงให้เห็นว่าการปรับปรุงอินเทอร์เฟซไม่ต้องใช้ความพยายามมากนัก นอกจากนี้ยังควรพิจารณาประสบการณ์นี้อีกครั้ง ใช้ CSSซึ่งมีประโยชน์ในการตั้งค่าระดับการโต้ตอบใหม่สำหรับเว็บแอปพลิเคชัน