ওভারলে চিত্রে মাউস ইন্টারঅ্যাকশন উপেক্ষা করুন

Question

হোভার ইফেক্ট সহ আমার একটি মেনু বার রয়েছে এবং এখন আমি একটি চেনাশোনা এবং একটি মেনু আইটেমের উপর "হ্যান্ডড্রন" পাঠ্য সহ স্বচ্ছ চিত্র রাখতে চাই। আমি যদি মেনু আইটেমের উপরে ওভারলে চিত্রটি রাখার জন্য নিখুঁত অবস্থান ব্যবহার করি তবে ব্যবহারকারী বোতামটি ক্লিক করতে সক্ষম হবে না এবং হোভার ইফেক্টটি কাজ করবে না।

এই ওভারলে চিত্রের সাথে মাউস ইন্টারঅ্যাকশনটি কোনওভাবেই অক্ষম করার কোনও উপায় আছে যাতে মেনুটি একটি চিত্রের নীচে থাকা সত্ত্বেও ঠিক আগের মতোই কাজ চালিয়ে যায়?

সম্পাদনা করুন:

জুমলা দিয়ে মেনুটি তৈরি করা হয়েছিল বলে আমি মেনু আইটেমগুলির মধ্যে একটিতে টুইট করতে পারি না। এবং আমি যদি পারতাম তবেও আমি জাভাস্ক্রিপ্ট সমাধানটি যথাযথ বলে মনে করি নি। সুতরাং শেষ পর্যন্ত আমি মেনু আইটেম উপাদানটির বাইরে একটি তীর দিয়ে মেনু আইটেমটিকে "চিহ্নিত" করেছি। আমি এটি হতে চেয়েছিলাম হিসাবে সুন্দর না, তবে এটি যাইহোক okey কাজ করে।

Answer 1

সিএসএস স্টাইলিংয়ের সাহায্যে আমি সবচেয়ে ভাল সমাধানটি খুঁজে পেয়েছি:

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

pointer-events গুণাবলী বেশ ভাল কাজ করে এবং সহজ।

Comments

হ্যাঁ - এটি ভাল জিনিস। এটি অন্যান্য আইটেমগুলির জন্য ধারক হিসাবে ব্যবহৃত হচ্ছে এমন কোনও ব্যাকগ্রাউন্ড সেট নেই এমন উপাদানগুলির জন্য হিট-টেস্টিং দমন করতেও কাজ করে (যা আপনি আসলে হিট-টেস্ট করতে চান))

— আর্মেন্টেজ

মনে রাখবেন যে পয়েন্টার-ইভেন্টগুলি এখনও সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত নয়। আইই এটি সমর্থন করে না (অবাক ...), এবং আমার কাছে মনে হয় সাফারি এটিকে সমর্থন করে না।

— হ্যাচমাস্টার

সাফারি ঠিক আছে, এই caniuse.com/#search=pointer-events অনুসারে , কেবল অপেরা এবং আইই বেরিয়েছে

— লজিক রেক

কার্সারটিকেও উপেক্ষা করতে চান

— উইলিয়াম এন্টারিকেন

ডি 3 এবং এসভিজি দিয়েও ভাল কাজ করে। আমার জন্য একটি সমস্যা সমাধান করুন যেখানে ফোকাস বক্সটি বৃহত্তর আকারে বেড়ে গেছে যেখানে এটি মাউসের নীচে ছিল।

— মাইকেল হবস

Answer 2

সুতরাং আমি এটি করেছি এবং এটি ফায়ারফক্স 3.5 তে উইন্ডোজ এক্সপি-তে কাজ করে। এটি কিছু পাঠ্য, একটি চিত্র ওভারলে এবং একটি স্বচ্ছ ডিভের সাথে একটি বাক্স দেখায় যা সমস্ত ক্লিককে বাধা দেয়।

<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>

আমি যা করেছি: আমি একটি ডিভিটি তৈরি করেছি এবং এটি মাপ দিয়েছি যে মেনু বিকল্পটি আকার হতে পারে 100x40px (একটি স্বেচ্ছাসেবী মান, তবে এটি নমুনাটির চিত্রণে সহায়তা করে)।

ডিভের একটি চিত্রের ওভারলে, এবং একটি লিঙ্ক ওভারলে রয়েছে। লিঙ্কটিতে একটি ডিভ মাপ থাকে যা 'মেনুঅપ્শন' ডিভের মতো হয়। এইভাবে একটি ব্যবহারকারী ক্লিক পুরো বাক্স জুড়ে ক্যাপচার করা হয়।

পরীক্ষা করার সময় আপনার নিজের ইমেজ সরবরাহ করতে হবে। :)

সাবধানতা: আপনি যদি নিজের মেনু বোতামটি ব্যবহারকারীর মিথস্ক্রিয়াটির প্রতিক্রিয়া প্রত্যাশা করেন (উদাহরণস্বরূপ, বোতামের অনুকরণের জন্য রঙ পরিবর্তন করা), তবে আপনার ট্যাগটিতে জাভাস্ক্রিপ্টের সাথে সংযুক্ত অতিরিক্ত কোডের প্রয়োজন হবে, এই অতিরিক্ত কোডটি সম্বোধন করতে পারে মেনু অপশন 'ডিওএমের মাধ্যমে উপাদান এবং এটির রঙ পরিবর্তন করুন।

এছাড়াও, আমার জানা অন্য কোনও উপায় নেই যে আপনি একটি ক্লিক ইভেন্ট নিতে পারেন এবং এটি দৃশ্যমান পৃষ্ঠার উপাদানটির নীচে কোনও উপাদানতে নিবন্ধভুক্ত করতে পারেন। আমি এই গ্রীষ্মেও এটি চেষ্টা করেছি এবং এটি ছাড়া আর কোনও সমাধান খুঁজে পাইনি।

আশাকরি এটা সাহায্য করবে.

পিএস: কুইর্কস্মোডে ইভেন্টগুলির লিখনআপটি ব্রাউজারগুলিতে ইভেন্টগুলি কীভাবে আচরণ করে তা বুঝতে আমাকে সাহায্য করার জন্য অনেক দীর্ঘ এগিয়ে গেছে।

Answer 3

বোতামটি হাতে আঁকানো চিত্রের চেয়ে বেশি জেড-ইনডেক্স সম্পত্তি দিন:

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

তবে এটি নিশ্চিত করে নিন যে আপনি এটি সমস্ত বড় ব্রাউজারে পরীক্ষা করেছেন। IE এফএফ থেকে জেড-ইনডেক্সকে আলাদাভাবে ব্যাখ্যা করে। কারও কাছে আরও বিশদ নিয়ে আসার জন্য আপনাকে আরও তথ্য পোস্ট করতে হবে, একটি লিঙ্কটি সেরা হবে।

Comments

যে হাত আঁকানো চিত্রটি যদিও গোপন করবে না?

— রোতিন মার্থ

লিঙ্কটি স্বচ্ছ হলে নয়।

— পেক্কা

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>

এখানে আপনার অন্তর্নিহিত এ-ট্যাগের উপরে একটি ইভেন্ট স্থাপন করতে সক্ষম হওয়া উচিত এবং আপনার চিত্রের কোনও ইভেন্ট না থাকলে ক্যাপচার (! আই ব্রাউজারগুলি) শুরু করে এবং তারপরে ইভেন্টটির প্রচারকে হত্যা করে।

আপনার যদি আরও কিছু সহায়তার প্রয়োজন হয় তবে পরিস্থিতি সম্পর্কে আমাদের আরও কিছুটা জানান know

Answer 5

চিত্রটি স্থিতিশীলভাবে স্থাপন করা থাকলে, মেনু আইটেমের উপাদানটির ভিতরে img ট্যাগ স্থাপন করে আপনি চিত্রটি ক্লিকের উপরের বুদবুদ হিসাবে ক্যাপচার করতে পারেন।

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