माउस के साथ क्लिक करने योग्य पूर्ण स्थान छवि क्षेत्र मानचित्र कैसे बनाएं?

Question

मेरे पास पूर्ण स्थिति का उपयोग कर एक दूसरे के शीर्ष पर स्थित कई छवियां हैं। ये छवियां आंशिक रूप से पारदर्शी हैं, और केवल दृश्यमान हिस्सों को क्लिक करने योग्य बनाने के लिए एक HTML area और map है। JQuery में, मैंने माउस ईवेंट को area टैग से जोड़ा है।

यह एक छवि के लिए अच्छी तरह से काम करता है: माउसेंटर और माउसलीव केवल तभी आग लगती है जब छवि का मैप किया हुआ भाग दर्ज किया जाता है।

समस्या यह है कि यह केवल शीर्ष छवि के लिए काम करता है। अन्य सभी के लिए, यह घटनाओं को आग नहीं करता है, सीएसएस होवर काम नहीं करता है, क्योंकि इसके ऊपर एक और छवि है। इस तथ्य के बावजूद कि area एस ओवरलैप नहीं करते हैं और map एस छवियों के सामने हैं। http://markv.nl/stack/imgmap2/

Answer 1

आप सभी अलग-अलग छवियों के शीर्ष पर एक एकल, पूरी तरह से पारदर्शी छवि जगह कर सकते हैं, और कहा कि छवि के लिए सभी ImageMap क्षेत्रों देते हैं:

यहाँ समस्या का एक प्रदर्शन है। यह माउस घटनाओं के लिए एक कैप्चरिंग तत्व के रूप में कार्य करेगा, और आप अभी भी सभी व्यक्तिगत छवियों को बदल सकते हैं।

Answer 2

यह एक सीधा जवाब/समाधान नहीं है ...

क्यों आप ड्राइंग करने के लिए एक कैनवास/एसवीजी का उपयोग नहीं करते? बहुत सारे पुस्तकालय हैं जो कार्य को आसान बनाते हैं। उनमें से एक RaphaëlJS है (यह example देखें)। इस पुस्तकालय का लाभ यह है कि यह माउस अंतःक्रियाशीलता की अनुमति देता है।

एक अन्य लाइब्रेरी जिसे आप विचार कर सकते हैं EaselJS है, लेकिन यह <canvas> का समर्थन नहीं करने वाले ब्राउज़र में काम नहीं करता है, इसलिए कोई IE < 9 समर्थन नहीं है।

Answer 3

यह केवल तभी काम करता है जब छवियां ओवरलैप न हों (चित्र देखें)। आपके मामले में सभी छवियों में बिल्कुल वही आकार होता है और एक-दूसरे पर ढेर होते हैं। चूंकि ब्राउज़र छवियों को ठोस वस्तुओं के रूप में मानते हैं (वे पारदर्शिता के बारे में परेशान नहीं हैं), इस बात का कोई तरीका नहीं है कि यह कैसे निर्धारित कर सकता है, इस पल में आप किस छवि को घुमाने के लिए चाहते हैं?

+-----------+-----------+ 
    |   |   | 
    | img1 | img2 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 
    |   |   | 
    | img3 | img4 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 

हालांकि, अगर आप इस को हल करने के कर सकते हैं:

बस छवियों जो सभी क्षेत्रों में शामिल है में से एक पर एक भी ImageMap उपयोग करते हैं, और एक छोटे से जावास्क्रिप्ट के साथ आप अन्य सभी पर मंडराना प्रभाव ट्रिगर कर सकते हैं इमेजिस।

$("area").hover(function(){ 
    var $target = $("#"+$(this).data("target")); // getting the target image 
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image 
},function(){ 
    var $target = $("#"+$(this).data("target")); 
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes 
});​ 

कार्य उदाहरण अपने कोड के आधार पर: jsFiddle-Demo

Answer 4

आप कर सकते हैं निश्चित ऊंचाई और चौड़ाई के साथ भी महल पारदर्शी div कि onclick() आबद्ध समारोह के साथ घटना होगा। कुछ पसंद है:

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>