सीएसएस के साथ स्टाइलिंग इमेज मैप माउसओवर

इंटरैक्टिव वेब पेज बनाते समय, क्लिक करने योग्य क्षेत्रों के साथ छवियों को शामिल करना अक्सर आवश्यक होता है। आमतौर पर, यह छवि मानचित्रों का उपयोग करके हासिल किया जाता है। हालाँकि, अतिरिक्त अन्तरक्रियाशीलता प्रदान करने के लिए माउसओवर पर इन क्षेत्रों को स्टाइल करना मायावी साबित हुआ है।

अतीत में, सीएसएस का उपयोग करके इन क्षेत्रों को स्टाइल करने का प्रयास सीमित सफलता के साथ मिला है, जैसा कि प्रदान किए गए उदाहरण से पता चलता है: ]

area { border: 1px solid #d5d5d5; }

सौभाग्य से, केवल सीएसएस का उपयोग करने का एक सरल समाधान है:

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}