เคอร์เซอร์มีมาตั้งแต่ “ แม่ของการสาธิตทั้งหมด ” โดยที่ Douglas Englebart ได้แนะนำเมาส์และส่วนต่อประสานกราฟิกกับผู้ใช้ให้โลกรู้จักในช่วงปลายทศวรรษที่หกสิบ เคอร์เซอร์ของเมาส์ช่วยให้เราเห็นว่าเราอยู่ที่ไหนในอวกาศบนหน้าจอคอมพิวเตอร์ของเรา ในฐานะเครื่องมือประสบการณ์ผู้ใช้ การแสดงให้เราเห็นว่าเราสามารถทำอะไรได้บ้างบนหน้าจอหรือสิ่งที่คอมพิวเตอร์กำลังทำอยู่ถือเป็นเรื่องที่ยอดเยี่ยม บทความนี้จะบอกคุณเกี่ยวกับวิธีการบางอย่างที่เราสามารถใช้เคอร์เซอร์ของเมาส์บนหน้าเว็บของเรา เพื่อปรับปรุงประสบการณ์ผู้ใช้เว็บไซต์ของคุณ
ไวยากรณ์
ในตัวเลือก CSS เราใช้ไวยากรณ์ต่อไปนี้เพื่อเปลี่ยนเคอร์เซอร์เป็นอย่างอื่นที่ไม่ใช่ลูกศรเริ่มต้น
cursor: [ url(1.png), url(2.png) ], etc.,
<mandatory keyword value>
ระหว่างวงเล็บเหลี่ยมชุดแรก เรามีรายการ URL คั่นด้วยเครื่องหมายจุลภาค นี่เป็นค่าทางเลือก อนุญาตให้ใช้เคอร์เซอร์แบบกำหนดเองได้ – มีผู้สร้างเคอร์เซอร์แบบกำหนดเองจำนวนเท่าใดก็ได้บนอินเทอร์เน็ตที่จะช่วยคุณสร้างสิ่งที่มีเอกลักษณ์เฉพาะของคุณ
รายการที่คั่นด้วยเครื่องหมายจุลภาคระบุว่าเบราว์เซอร์จะพยายามโหลดรายการแรก หากไม่พบรายการแรกหรือ URL ไม่ถูกต้อง รายการดังกล่าวจะลงในรายการจนกว่าจะพบรายการที่ใช้งานได้ หรือระบบจะตั้งค่าเป็นคีย์เวิร์ดบังคับในตอนท้าย
พารามิเตอร์แรก – โดยมี URL หรือไม่ก็ได้ ที่สองไม่ได้ คุณต้องใส่คีย์เวิร์ดที่ให้ชุดคำสั่งเพื่อบอกว่าคุณต้องการเห็นเคอร์เซอร์ประเภทใด นี่คือค่าบางส่วนที่ใช้ได้:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>
table {
width:100%;
text-align: center;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
}
thead {
width: 100%;
background: lightblue;
}
tr:nth-child(even) {
background-color: lightgrey;
}
td {
width: 32%;
height: 50px;
padding: 10px;
}
td.test {
color: red;
font-weight: bold;
}
td#auto {
cursor: auto;
}
td#cell {
cursor: cell;
}
td#crosshair {
cursor: crosshair;
}
td#default {
cursor: default;
}
td#none {
cursor: none;
}
td#pointer {
cursor: pointer;
}
td#help {
cursor: help;
}
td#progress {
cursor: progress;
}
td#wait {
cursor: wait;
}
td#text {
cursor: text;
}
td#vertical-text {
cursor: vertical-text;
}
td#zoom-in {
cursor: zoom-in;
}
td#zoom-out {
cursor: zoom-out;
}
</style>
</head>
<body>
<table>
<thead>
<td>Cursor Type:</td>
<td>Description:</td>
<td>Test it Out: </td>
</thead>
<tr>
<td>auto</td>
<td>Automatically figures out which cursor to use based on context.</td>
<td class="test" id="auto"> TEST </td>
</tr>
<tr>
<td>default</td>
<td>Typically an arrow, but depends on platform being used.</td>
<td class="test" id="default"> TEST </td>
</tr>
<tr>
<td>help</td>
<td>Used to indicate help is available</td>
<td class="test" id="help"> TEST </td>
</tr>
<tr>
<td>none</td>
<td>No cursor present</td>
<td class="test" id="none"> TEST </td>
</tr>
<tr>
<td>pointer</td>
<td>Most often used when hovering over link or button to indicate it can be clicked.</td>
<td class="test" id="pointer"> TEST </td>
</tr>
<tr>
<td>progress</td>
<td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td>
<td class="test" id="progress"> TEST </td>
</tr>
<tr>
<td>text</td>
<td>Tells the user text can be highlighted.</td>
<td class="test" id="text"> TEST </td>
</tr>
<tr>
<tr>
<td>wait</td>
<td>Indicates that the computer is thinking and user CANNOT interact with UI...</td>
<td class="test" id="wait"> TEST </td>
</tr>
<tr>
<td>zoom-in</td>
<td>Indicates to user that we can zoom in on something. </td>
<td class="test" id="zoom-in"> TEST </td>
</tr>
<tr>
<td>zoom-out</td>
<td>Indicates to user that we can zoom out on something. </td>
<td class="test" id="zoom-out"> TEST </td>
</tr>
</table>
</body>
</html> โค้ดด้านบนแชร์เฉพาะเคอร์เซอร์บางตัวที่เราสามารถใช้ได้บนไซต์ของเรา ตรวจสอบ MDN สำหรับผู้อื่น
บทสรุป
วันนี้เราได้พูดถึงวิธีการต่างๆ ในการเพิ่มเคอร์เซอร์ไปยังเว็บไซต์ของคุณเพื่อช่วยในการปรับปรุงประสบการณ์ผู้ใช้ การใช้เคอร์เซอร์เพื่อระบุสิ่งที่สามารถทำได้บนจุดใดก็ตามบนหน้าเว็บ ผู้ใช้จะรู้ว่าจะเกิดอะไรขึ้นเมื่อพวกเขาไปยังส่วนต่างๆ ของไซต์ของคุณ มีมากกว่าที่กล่าวไว้มากมาย
ขอแนะนำให้ตรวจสอบวิธีต่างๆ ในการปรับแต่งเคอร์เซอร์ให้เหมาะกับความต้องการของคุณ และจำไว้ว่า:เคอร์เซอร์เป็นเพียงครึ่งหนึ่งของ UX อีกครึ่งหนึ่งกำลังใช้งานสิ่งที่ผู้ใช้คาดหวังให้เคอร์เซอร์ทำจริง ๆ เราจะเข้าไปใหม่อีกครั้ง แฮ็คอย่างมีความสุข!
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
