कर्सर " . के बाद से मौजूद हैं सभी प्रदर्शनों की जननी " जहां डगलस एंगलबार्ट ने साठ के दशक के अंत में माउस और ग्राफिकल यूजर इंटरफेस को दुनिया के सामने पेश किया। माउस कर्सर हमें यह देखने की अनुमति देता है कि हम अपने कंप्यूटर स्क्रीन पर अंतरिक्ष में कहाँ हैं। एक उपयोगकर्ता अनुभव उपकरण के रूप में, हमें यह दिखाने में सक्षम होना वास्तव में बहुत अच्छा है कि हम स्क्रीन पर किसी भी बिंदु पर क्या कर सकते हैं या कंप्यूटर क्या कर रहा है। यह लेख आपको कुछ ऐसे तरीकों के बारे में बताएगा जिनसे हम आपकी वेबसाइट के उपयोगकर्ता अनुभव को बेहतर बनाने के लिए अपने वेबपेज पर माउस कर्सर का उपयोग कर सकते हैं।
सिंटैक्स
हमारे सीएसएस चयनकर्ता में, हम कर्सर को डिफ़ॉल्ट तीर के अलावा किसी अन्य चीज़ में बदलने के लिए निम्न सिंटैक्स का उपयोग करते हैं।
cursor: [ url(1.png), url(2.png) ], etc.,
<mandatory keyword value>
वर्गाकार कोष्ठकों के पहले सेट के बीच, हमारे पास अल्पविराम द्वारा अलग किए गए 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> उपरोक्त कोड केवल कुछ उपलब्ध कर्सर साझा करता है जिनका उपयोग हम अपनी साइट पर कर सकते हैं। दूसरों के लिए एमडीएन देखें।
निष्कर्ष
उपयोगकर्ता अनुभव को बेहतर बनाने में सहायता के लिए आज हम आपकी वेबसाइट पर कर्सर जोड़ने के कुछ अलग-अलग तरीकों पर गए हैं। पृष्ठ पर किसी दिए गए बिंदु पर क्या किया जा सकता है, यह इंगित करने के लिए कर्सर का उपयोग करके, उपयोगकर्ता जानते हैं कि जब वे आपकी साइट पर नेविगेट करते हैं तो उन्हें क्या उम्मीद करनी चाहिए। यहाँ वर्णित लोगों की तुलना में बहुत अधिक हैं।
मैं अनुशंसा करता हूं कि आप अपने कर्सर को अपनी आवश्यकताओं के अनुरूप अनुकूलित करने के विभिन्न तरीकों की जांच करें। और याद रखें:कर्सर यूएक्स का सिर्फ आधा हिस्सा है। दूसरा आधा वास्तव में लागू कर रहा है जो उपयोगकर्ता कर्सर से करने की अपेक्षा करता है। हम दूसरी बार उसमें शामिल होंगे। हैप्पी हैकिंग!
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।