ओवरले छवि पर माउस इंटरैक्शन को अनदेखा करें

Question

मेरे पास होवर इफेक्ट्स के साथ एक मेनू बार है, और अब मैं एक सर्कल के साथ एक पारदर्शी छवि और मेनू आइटम में से एक पर "हैंडड्रन" टेक्स्ट रखना चाहता हूं। यदि मैं मेनू आइटम के ऊपर ओवरले छवि को रखने के लिए पूर्ण स्थिति का उपयोग करता हूं, तो उपयोगकर्ता बटन पर क्लिक नहीं कर पाएगा और होवर प्रभाव काम नहीं करेगा।

क्या इस ओवरले छवि के साथ किसी भी तरह से माउस इंटरैक्शन को अक्षम करने का कोई तरीका है ताकि मेनू किसी छवि के नीचे होने से पहले ही काम करता रहे?

संपादित करें:

क्योंकि मेनू joomla के साथ उत्पन्न किया गया था मैं मेनू आइटमों में से केवल एक को ट्विक नहीं कर सका। और यहां तक ​​कि अगर मैं कर सकता था, तो मुझे नहीं लगा कि एक जावास्क्रिप्ट समाधान उचित था। इसलिए अंत में मैंने मेनू आइटम तत्व के बाहर एक तीर के साथ मेनू आइटम को "चिह्नित" किया। जितना अच्छा मैं चाहता था उतना अच्छा नहीं था, लेकिन इसने वैसे भी काम किया।

Answer 1

सबसे अच्छा समाधान जो मैंने पाया है, सीएसएस स्टाइलिंग के साथ:

#reflection_overlay {
    background-image:url(../img/reflection.png);
    background-repeat:no-repeat;
    width: 195px;
    pointer-events:none;
}

pointer-events विशेषता बहुत अच्छा काम करती है और सरल है।

Comments

युप - यह अच्छी चीज है। यह बिना बैकग्राउंड सेट वाले तत्वों के लिए हिट-टेस्टिंग को दबाने में भी काम आता है जो अन्य वस्तुओं के लिए कंटेनर के रूप में उपयोग किए जा रहे हैं (जो कि आप वास्तव में हिट-टेस्ट करना चाहते हैं।)

— Armentage

ध्यान रखें कि सूचक-घटनाएँ अभी तक सभी प्रमुख ब्राउज़रों द्वारा समर्थित नहीं हैं। IE इसे (आश्चर्य ...) का समर्थन नहीं करता है, और मुझे लगता है कि सफारी इसका समर्थन नहीं करता है।

— हैचमास्टर

सफारी ठीक है, इस caniuse.com/#search=pointer-events के अनुसार , केवल ओपेरा और ईई बाहर हैं

— तर्क मलबे

कर्सर को भी अनदेखा करना चाहेंगे

— विलियम एंट्रिएन

D3 और svg के साथ भी अच्छी तरह से काम करता है। मेरे लिए एक मुद्दा हल किया जहां फोकस बॉक्स बड़े होकर उस बिंदु तक पहुंच गया जहां यह माउस के नीचे था।

— माइकल हॉब्स

Answer 2

तो मैंने ऐसा किया और यह विंडोज एक्सपी पर फ़ायरफ़ॉक्स 3.5 में काम करता है। यह कुछ टेक्स्ट के साथ एक बॉक्स, एक छवि ओवरले दिखाता है, और ऊपर एक पारदर्शी div जो सभी क्लिकों को स्वीकार करता है।

<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>

मैंने क्या किया है: मैंने एक div तैयार किया है और इसे आकार देने के लिए एक मेनू विकल्प हो सकता है जिसका आकार 100x40px (एक मनमाना मूल्य हो, लेकिन यह नमूने को दर्शाने में मदद करता है)।

Div में एक छवि उपरिशायी है, और एक लिंक उपरिशायी है। लिंक में 'menuOption' div के समान ही एक div size होता है। इस तरह एक उपयोगकर्ता क्लिक पूरे बॉक्स पर कब्जा कर लिया जाता है।

परीक्षण करते समय आपको अपनी स्वयं की छवि प्रदान करनी होगी। :)

कैविएट: यदि आप उपयोगकर्ता के इंटरैक्शन (उदाहरण के लिए, रंग बदलने के लिए बटन का अनुकरण करने के लिए) के लिए अपने मेनू बटन की अपेक्षा करते हैं, तो आपको जावास्क्रिप्ट से जुड़े अतिरिक्त कोड की आवश्यकता होगी, जिसे आप टैग पर आमंत्रित करेंगे, यह अतिरिक्त कोड 'पता कर सकता है' DOM के माध्यम से menuOption का तत्व और इसका रंग बदल गया।

इसके अलावा, कोई अन्य तरीका नहीं है जो मुझे पता है कि आप एक क्लिक ईवेंट ले सकते हैं, और यह एक दृश्य पृष्ठ तत्व के नीचे एक तत्व पर रजिस्टर है। मैंने इस गर्मी में भी ऐसा ही किया है, और इसका कोई और समाधान नहीं है।

उम्मीद है की यह मदद करेगा।

पुनश्च: quirksmode की घटनाओं के बारे में लिखने की प्रक्रिया ने मुझे यह समझने में मदद करने के लिए एक लंबा रास्ता तय किया कि कैसे घटनाएँ ब्राउज़रों में व्यवहार करती हैं।

Answer 3

बटन को हाथ से खींची गई छवि की तुलना में एक उच्च जेड-इंडेक्स संपत्ति दें:

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

हालाँकि, सुनिश्चित करें कि आप सभी प्रमुख ब्राउज़रों में इसका परीक्षण करें। IE एफएफ से अलग जेड-इंडेक्स की व्याख्या करता है। किसी व्यक्ति को अधिक विवरण के साथ आने के लिए, आपको अधिक जानकारी पोस्ट करनी होगी, एक लिंक सबसे अच्छा होगा।

Comments

हालांकि यह हाथ से तैयार की गई छवि को नहीं छिपाएगा?

— Roatin Marth

नहीं तो लिंक पारदर्शी है।

— पेका

Answer 4

पक्के गेसर ने जो कहा, उस पर चलते हुए, मुझे लगता है कि निम्नलिखित काम करेगा। उसका उदाहरण लेते हुए और इसे फिर से पढ़ें:

<a href="#" style="z-index: 5">
    <!-- Place image inside of you menu bar link -->
    <img src="hand_drawn_image.gif" style="z-index: 4">
    <!-- Your link here -->
</a>

यहां आपको अंतर्निहित-टैग पर एक घटना रखने में सक्षम होना चाहिए और, जब तक कि आपकी छवि में कोई घटना न हो, एक कैप्चर (! IE ब्राउज़र) शुरू करता है और फिर घटना के प्रसार को मारता है।

यदि आपको थोड़ी और मदद चाहिए, तो हमें स्थिति के बारे में थोड़ा और बताएं।

Answer 5

यदि छवि स्टेटिक रूप से पोस्ट की जाएगी, तो आप मेनू आइटम एलिमेंट के अंदर img टैग लगाकर, इमेज से क्लिक इवेंट को कैप्चर कर सकते हैं।

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>