सीएसएस: कर्सर बदलें पृष्ठभूमि छवि

से अधिक मैं सीएसएस में एक शरीर वर्ग का हिस्सा के रूप में एक पृष्ठभूमि छवि:सीएसएस: कर्सर बदलें पृष्ठभूमि छवि

body.soon1 { 
    background-color: white; 
    background-image: url(soon1a.png); 
    background-position: center; 
    background-repeat: no-repeat; 
}

फिर बाद में मैं एक जावास्क्रिप्ट समारोह है कि शरीर वर्ग बदल जाएगा है।

मेरे पास पृष्ठभूमि में छवि का कारण यह है कि जब स्क्रिप्ट सक्रिय होती है, तो पृष्ठभूमि-रंग और पृष्ठभूमि-छवि दोनों एक ही समय में बदल जाएंगी और आप छवि का चयन नहीं कर सकते हैं।

क्या यह संभव है कि मैं केवल पृष्ठभूमि-छवि पर होवर करते समय कर्सर प्रकार को बदल सकता हूं? मैं समझता हूं कि मैं

cursor: pointer;

शरीर शैलियों में रख सकता है, लेकिन इससे कर्सर पूरे पृष्ठ पर दिखाई देता है।

आप live page, currently, देख सकते हैं जहां पृष्ठ पर कहीं भी क्लिक करते समय पृष्ठभूमि बदल जाती है।

संपादित करें: मुझे कुछ ऐसा मिला है जो अब मेरे लिए काम करता है। मैं इसमें कुछ भी नहीं के साथ एक केंद्रित div कहा:

div.clickme { 
width:300px; 
height:400px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-150px 0 0 -200px; 
cursor: pointer; 
}

यह मेरे लिए काम करता है क्योंकि मैं अपने ही मनमाने ढंग से क्षेत्र निर्धारित कर सकते हैं, लेकिन अगर किसी को भी एक बेहतर समाधान है, मुझे पता है।

स्रोत

2013-02-12 paramesis

पृष्ठ पर केंद्रित एक div पर पृष्ठभूमि छवि क्यों न डालें। फिर आप div पर कर्सर जोड़ सकते हैं। – Leeish

मेरे पास ऐसा कुछ है, लेकिन टेबल [यहां] (http://www.paramesis.com/index3.html) इसके साथ समस्या यह है कि आप छवि का चयन कर सकते हैं और यदि आप पर्याप्त तेज़ी से क्लिक करते हैं, तो आप देख सकते हैं छवि का मुखौटा, जिसमें से कोई भी बहुत अच्छा लग रहा है। कर्सर की तुलना में मेरे लिए यह अधिक महत्वपूर्ण है, मैं सिर्फ यह देखना चाहता था कि मेरे पास दोनों हो सकते हैं या नहीं। धन्यवाद, हालांकि – paramesis

वहाँ वास्तव में कोई बाध्यकारी छवि एक पृष्ठभूमि छवि बनाने के लिए कारण नहीं है भले ही, यहाँ यह क्या इस तरह दिखाई देगा। आपको छवि को दो रैपर में डालने से बेहतर सेवा दी जाएगी (व्यूपोर्ट के बावजूद लंबवत और क्षैतिज रूप से पूर्ण केंद्र की गारंटी के लिए आवश्यक)।

आप ऑब्जेक्ट्स के साथ पॉप्युलेट करके अपनी सरणी बढ़ा सकते हैं, ताकि यह छवि और शरीर शैली के लिए संभावित मान रख सके। इस तरह, आप अपने इच्छित सभी परिवर्तनों को चुनने के लिए उसी विधि (सरणी के माध्यम से चक्र) का उपयोग कर सकते हैं, भले ही आप बाद में अन्य परिवर्तन जोड़ना चाहते हों।

साथ ही, जबकि वेब ब्राउज़र मानकों के साथ अपेक्षाकृत कमजोर होते हैं, लेकिन यह सरल HTML 5 आवश्यकताओं के अनुरूप वास्तव में छोटा होता है और फिर भी कार्यक्षमता को बनाए रखता है।

आखिरकार, मैं आपको "हिप्स्टर कोडिंग" कहने से बचने के लिए दृढ़ता से प्रोत्साहित करता हूं। हालांकि, कोड कोड, चर, एट अल नामक मज़ेदार नामों को खुश करने के लिए अस्पष्ट नामों के साथ मज़े करना मजेदार है, यह आवश्यक रूप से भाषा और कम रखरखाव को कम करने के लिए बनाता है। संक्षेप में, यह एक बुरा अभ्यास है, भले ही आप एकमात्र रखरखाव कर रहे हों।

नीचे इन टिप्पणियों (इंडेंटेशन क्लीनअप के साथ) के आधार पर आपके स्रोत का एक नया संस्करण देखें।

<html> 
<head> 
    <title>Something Amazing Will Happen</title> 
    <style type="text/css"> 
     body.light { 
      background-color: white; 
     } 
     body.dark { 
      background-color: black; 
     } 
     div.outside-wrapper { 
      position: absolute; 
      top: 50%; 
      width: 100%; 
      height: 1px; 
      overflow: visible; 
     } 
     div.inside-wrapper { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      width: 381px; 
      height: 393px; 
      margin: -197px 0 0 -191px; 
      cursor: pointer; 
     } 
    </style> 
    <script type="text/javascript"> 
     styleIndex = 0; 
     var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}]; 
     function nextStyle() { 
      if (++styleIndex >= states.length) 
       styleIndex = 0; 
      var state = states[styleIndex]; 
      document.body.className = state.style; 
      document.getElementById("clickme").src = state.image; 
     } 
     var tap = true; 
     document.addEventListener('touchstart',function(e) { 
      tap = true; 
     }); 
     document.addEventListener('click',function(e) { 
      nextStyle() 
      tap = false; 
     }); 
     document.addEventListener('touchmove',function(e) { 
      tap = false; 
     }); 
     document.addEventListener('touchend',function(e) { 
      if(tap) 
       nextStyle(); 
     }); 
    </script> 
</head> 
<body class="light"> 
    <div class="outside-wrapper"> 
     <div class="inside-wrapper"> 
     <img src="soon1a.png" id="clickme"> 
     </div> 
    </div> 
</body> 
</html> 
<!-- Don't ask me what it is. -->

स्रोत

2013-02-16 04:07:31 Tohuw

वंशावली के लिए, मैंने मूल (वर्तमान) स्रोत पेस्टबिन पर पोस्ट किया है, इसलिए मेरी टिप्पणी लाइव पेज परिवर्तन को और अधिक समझ में लाती है: http://pastebin.ca/2314337 – Tohuw

हिप्स्टर कोडिंग के बारे में आपका बिंदु अच्छी तरह से लिया जाता है। – paramesis

मेरे पास इस विधि के साथ समस्या यह है कि पृष्ठभूमि रंग और छवि बिल्कुल एक ही समय में नहीं बदलती है, ताकि आप एक सेकंड के उस अंश के लिए पीएनजी की रूपरेखा देखें। जैसा कि मैंने एक और टिप्पणी में उल्लेख किया है, यह कर्सर की तुलना में मेरे लिए बहुत महत्वपूर्ण है। दूसरी छवि अभी तक लोड नहीं होने पर यह और भी ध्यान देने योग्य हो जाती है, यही कारण है कि एक अदृश्य छवि शैली दूसरी छवि को प्री-लोडिंग कर रही है। – paramesis

इस

body.soon1 { 
    background-color: white; 
    background-image: url(soon1a.png); 
    background-position: center; 
    background-repeat: no-repeat; 
} 
body.soon1:active{ 
    cursor: pointer; 
}

स्रोत

2013-02-12 22:12:27 Enve

मैंने एचटीएमएल में जोड़ा। काम नहीं लग रहा है। मैंने शरीर की कोशिश की .soon1.background-image: सक्रिय और body.soon1: होवर। कोई भाग्य – paramesis

आप क्या कर सकते है, शरीर पर cursor: pointer रख दिया और बच्चे पर कर्सर को बदलने की कोशिश करें। क्या इस तरह somthing: http://jsfiddle.net/HSdH3/

एचटीएमएल:

<body> 
    <div></div> 
</body>

सीएसएस:

body { 
    background: red; 
    width:100%; 
    height: 100%; 
} 
body:hover { 
    cursor: pointer; 
} 
div { 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
    background: white; 
} 
div:hover { 
    cursor: auto; 
}

स्रोत

2013-02-12 23:44:51 Chanckjh

हम्म। यह वास्तव में सटीक विपरीत है जो मैं करने की कोशिश कर रहा था, लेकिन यह जानना अच्छा है कि आप ऐसा कर सकते हैं। धन्यवाद! – paramesis

कुछ इस तरह काम करना चाहिए:

<div id="myDiv" style="cursor: pointer">

एक अन्य विकल्प jQuery का उपयोग करना है, हालांकि यह इसके लिए अधिक हो सकता है।

$(document).ready(function(){ 
    $("#myDiv").hover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
});

इसे यहाँ की जाँच करें:: http://jsfiddle.net/K5fex/

स्रोत

2013-02-12 23:59:07 gvirav

सीएसएस: कर्सर बदलें पृष्ठभूमि छवि

उत्तर

संबंधित मुद्दे