सीएसएस - कर्सर
CSS की कर्सर संपत्ति आपको कर्सर के प्रकार को निर्दिष्ट करने की अनुमति देती है जिसे उपयोगकर्ता को प्रदर्शित किया जाना चाहिए।
इस संपत्ति का एक अच्छा उपयोग रूपों पर बटन सबमिट करने के लिए छवियों का उपयोग करने में है। डिफ़ॉल्ट रूप से, जब कोई कर्सर किसी लिंक पर घूमता है, तो कर्सर पॉइंटर से हाथ में बदल जाता है। हालाँकि, यह फ़ॉर्म पर सबमिट बटन के लिए फ़ॉर्म नहीं बदलता है। इसलिए, जब भी कोई छवि पर जमा करता है जो सबमिट बटन है, तो यह एक दृश्य सुराग प्रदान करता है कि छवि क्लिक करने योग्य है।
निम्न तालिका कर्सर की संपत्ति के लिए संभावित मान दिखाती है -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | auto कर्सर का आकार उस संदर्भ क्षेत्र पर निर्भर करता है जो यह खत्म हो गया है। उदाहरण के लिए मैं एक पाठ, एक लिंक पर एक हाथ, और इतने पर ... |
| 2 | crosshair एक क्रॉसहेयर या प्लस साइन |
| 3 | default एक तीर |
| 4 | pointer एक इंगित हाथ (IE 4 में यह मूल्य हाथ है) |
| 5 | move मैं बार |
| 6 | e-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को दाएं (पूर्व) स्थानांतरित किया जाना है |
| 7 | ne-resize कर्सर इंगित करता है कि एक बॉक्स के एक छोर को ऊपर ले जाया जाना है और दाएं (उत्तर / पूर्व) |
| 8 | nw-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को ऊपर और बाएं (उत्तर / पश्चिम) ले जाना है |
| 9 | n-resize कर्सर इंगित करता है कि एक बॉक्स का एक किनारा ऊपर (उत्तर) ले जाना है |
| 10 | se-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को नीचे और दाएं (दक्षिण / पूर्व) स्थानांतरित किया जाना है |
| 1 1 | sw-resize कर्सर इंगित करता है कि एक बॉक्स के एक किनारे को नीचे और बाएं (दक्षिण / पश्चिम) ले जाया जाना है |
| 12 | s-resize कर्सर इंगित करता है कि एक बॉक्स के एक छोर को नीचे ले जाना है (दक्षिण) |
| 13 | w-resize कर्सर इंगित करता है कि बॉक्स के एक किनारे को बाएं (पश्चिम) स्थानांतरित किया जाना है |
| 14 | text मैं बार |
| 15 | wait एक घंटे का गिलास |
| 16 | help एक प्रश्न चिह्न या गुब्बारा, मदद बटन पर उपयोग के लिए आदर्श |
| 17 | <url> कर्सर छवि फ़ाइल का स्रोत |
NOTE- आपको उपयोगकर्ताओं के लिए उपयोगी जानकारी जोड़ने के लिए केवल इन मूल्यों का उपयोग करने का प्रयास करना चाहिए, और स्थानों में, वे उस कर्सर को देखने की उम्मीद करेंगे। उदाहरण के लिए, क्रॉसहेयर का उपयोग करके जब कोई लिंक पर घूमता है तो आगंतुकों को भ्रमित कर सकता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -