अनियमित क्लिक करने योग्य आकारों का पैटर्न

Question

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

मुझे कल्पना है कि इस समाधान में 2 भागों, पूरे रंगीन ग्लास छवि का रंग संस्करण और इसके काले और सफेद संस्करण शामिल होंगे। फिर किसी भी तरह क्लिक पर प्रत्येक छोटे ग्लास फलक को नीचे रंगीन छवि प्रकट करने के लिए काले और सफेद हिस्से को छिपाने की आवश्यकता होती है।

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

सफेद रेखाएं सिर्फ यह निर्दिष्ट करती हैं कि प्रत्येक फलक दूसरों से स्वतंत्र रूप से व्यवहार करती है।

Answer 1

अनियमित क्लिक करने योग्य बहुभुज के पैटर्न बनाने के लिए, आप के साथ इनलाइन एसवीजी उपयोग कर सकते हैं :

• एसवीजी लिंक <a> element
• polygon element आकार

यह आप किसी भी क्लिक करने योग्य आकार डिजाइन और उन्हें संवेदनशील बनाने के लिए अनुमति देगा।

svg { 
 
    display:block; 
 
    width:40%; height:auto; 
 
    margin:0 auto; 
 
} 
 
polygon { 
 
    fill:#ccc; 
 
    stroke:#fff; stroke-width:0.3; 
 
    transition: fill .15s; 
 
} 
 
a:hover .teal { fill:teal; } 
 
a:hover .pink { fill:pink; } 
 
a:focus .teal, 
 
a:focus .pink { fill:orange; }

<svg viewbox="0 0 20 19"> 
 
    <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a> 
 
    <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a> 
 
    <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a> 
 
    <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a> 
 
    <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a> 
 
    <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a> 
 
    <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a> 
 
    <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a> 
 
    <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a> 
 
</svg>

बहुभुज तत्व केवल बहुभुज की अनुमति देता है:

यहाँ आप एक आगे पीछे करता साथ क्या कर सकते हैं और ध्यान केंद्रित राज्य आकार सहभागी बनाने के लिए का एक उदाहरण है। आप घुमावदार आकार बनाने के लिए उद्देश्य हैं, तो आप curve commands साथ path तत्व का उपयोग करने की आवश्यकता होगी।

Answer 2

छवि क्षेत्र नक्शे निश्चित रूप से आप कर सकते हैं।

this वेबसाइट पर एक नज़र डालें, जो इसके लिए एक बहुत ही आसान टूल है!

उदाहरण

<img src="url/to/your/image.jpg" alt="" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area alt="" title="" href="LINK1" shape="poly" coords="380,163,448,127,515,163,457,205" /> 
    <area alt="" title="" href="LINK2" shape="poly" coords="140,13,48,1,55,13,47,12" /> 
</map> 

मूल रूप से, आप विभिन्न क्षेत्रों प्रदान कर सकते हैं, विभिन्न लिंक के साथ, आपकी छवियों के कुछ हिस्सों के लिए। इसे समझाने के बजाय इसे करना आसान है! :)

Answer 3

ऐसा लगता है कि आप <map> - tag देख रहे हैं।

यह केवल आयताकार क्षेत्रों को क्लिक करने के लिए बनाता है, हालांकि। हालांकि, आप यह जांचने के लिए जावास्क्रिप्ट की ऑनक्लिक विधियों का उपयोग कर सकते हैं कि माउस एक निश्चित क्षेत्र में है या नहीं। इस तरह, आप परिपत्र क्षेत्रों, त्रिकोणीय क्षेत्रों या मूल रूप से किसी भी आकार के क्षेत्र की जांच भी कर सकते हैं।

Answer 4

यह एक लंबा काम है, लेकिन, इस तुम्हारी मदद कर सकता: http://imagemap-generator.dariodomi.de/

function helloWorld(area) { 
 
    console.log('You\'ve clicked the right part') 
 
}

#container { position: relative; } 
 
#info { 
 
    position: absolute; 
 
    bottom: 90px; 
 
    left: 85px; 
 
    background: yellow; 
 
    display: inline-block; 
 
}

<section id="container"> 
 
<img src="https://i.stack.imgur.com/4KmlR.jpg" alt="" usemap="#Map" /> 
 
<map name="Map" id="Map"> 
 
    <area alt="" title="" href="javascript:helloWorld()" shape="poly" coords="66,282,73,284,79,303,78,320,49,328,48,317" /> 
 
    [...] 
 
</map> 
 

 
<span id="info">&lt;== click here</span> 
 
</section>