जावास्क्रिप्ट

Question

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

क्या कोई तरीका है कि मैं छवि जावास्क्रिप्ट के एक छोटे से हिस्से को उलटा (या अन्यथा हाइलाइट) कर सकता हूं?

धन्यवाद,

Answer 1

छवि मानचित्र उपयोग करने के बजाय

, तो आप इस सीएसएस विधि की कोशिश कर सकते:

उपयोग एक पारदर्शी <div> प्रत्येक "छवि-मैप" भाग (लिंक) के शीर्ष पर है, और फिर सीएसएस का उपयोग हाइलाइटिंग को संभालने के लिए :hover छद्म-वर्ग।

सीएसएस:

#image { 
    position: relative; 
    width: 400px; 
    height: 100px; 
    background-image: url(image_map.png); 
} 

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent; 
} 

#map-part:hover { 
    background-color: yellow;   /* Yellow Highlight On Hover */ 
    opacity: 0.2; 
    filter: alpha(opacity=20);  
} 

HTML:

<div id="image"> 
    <a id="map-part" href="http://www.example.com/"></a> 
</div> 

ध्यान दें कि यह केवल आयताकार लिंक के लिए काम करेंगे।

Answer 2

jQuery MapHilight पर एक नज़र डालें।
मुझे यकीन नहीं है कि यह वही करता है जो आपको चाहिए, लेकिन आप इसे मामूली tweaking के साथ प्राप्त कर सकते हैं।

Answer 3

इसे हाइलाइट करने के लिए क्लिक किए गए क्षेत्र पर अर्ध-पारदर्शी <DIV> ब्लॉक को ओवरले करने के बारे में कैसे?

Answer 4

कई तरह से कर रहे हैं,

एक घ फैशन रास्ते में, कई छोटे टुकड़ों और उन्हें गठबंधन करने के लिए तालिका का उपयोग कर में अपनी छवियों को तोड़ने। उसके बाद, हाइलाइट प्रभाव के लिए thr "src" विशेषता को प्रतिस्थापित करने के लिए जावास्क्रिप्ट का उपयोग करके।

एक और सीएसएस तरीके से, alt को क्लिप करने के लिए सीएसएस का उपयोग करें। मूल के शीर्ष पर छवि, और नियंत्रण जो क्षेत्र दिखाना चाहिए।

यह बेहतर है कि सभी छोटी छवियों के लिए एक छवि हो ताकि गति तेज हो और उपयोगकर्ता इसे नेटवर्क द्वारा देरी के बिना प्राप्त कर सकें।