Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

इंलाइन JavaScript से माउसओवर/माउसआउट पर इमेज स्वैप करने का त्वरित तरीका

माउस को इसके ऊपर ले जाने पर डिफ़ॉल्ट इमेज को दूसरी इमेज से स्वैप करने का एक त्वरित और सरल इंलाइन JavaScript दृष्टिकोण — और फिर जब आप माउस को फिर से बाहर ले जाते हैं तो डिफ़ॉल्ट पर वापस स्वैप करना:

<img onmouseover="this.src='new-image.png'" onmouseout="this.src='default-image.png'" src="default-image.png" />

यह उदाहरण समान है, लेकिन इमेज स्रोत के रूप में एक्सटर्नल प्लेसहोल्डर इमेजेज का उपयोग करता है:

<img onmouseover="this.src='https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com'" onmouseout="this.src='https://via.placeholder.com/150/FF0000/808080/?text=Down.com'" src="https://via.placeholder.com/150/FF0000/808080/?text=Down.com" />

कोड डेमो

  1. CSS और JavaScript से मॉडल इमेज गैलरी कैसे बनाएं? CSS और JavaScript से मॉडल इमेज गैलरी कैसे बनाएं?

    मॉडल इमेज गैलरी (Modal Image Gallery) CSS और JavaScript से मॉडल इमेज गैलरी बनाने का कोड: उदाहरण { modalEle.style.display = none; }); </script> </body> </html> आउटपुट थंबनेल इमेजेज ग्रिड में दिखती हैं किसी थंबनेल पर क्लिक करने पर: मॉडल खुलता है, फुल-साइज़ इमेज दिखती

  1. CSS और JavaScript से इमेज जूम कैसे बनाएं? CSS और JavaScript से इमेज जूम कैसे बनाएं?

    CSS और JavaScript का उपयोग करके एक इमेज जूम (मैग्निफायर) प्रभाव बनाने का पूरा कोड नीचे दिया गया है। माउस होवर करने पर इमेज का जूम्ड व्यू दाईं ओर दिखाई देता है। उदाहरण imgEle.width - zoomLens.offsetWidth) { x = imgEle.width - zoomLens.offsetWidth; } if (x imgEle.height - zoomLens.offsetHe

  1. CSS और JavaScript से टैब्ड इमेज गैलरी कैसे बनाएं? CSS और JavaScript से टैब्ड इमेज गैलरी कैसे बनाएं?

    CSS और JavaScript का उपयोग करके एक टैब्ड इमेज गैलरी (मॉडल गैलरी) बनाने का पूरा कोड नीचे दिया गया है। थंबनेल पर क्लिक करने पर बड़ी इमेज मॉडल में खुलती है। उदाहरण { modalEle.style.display = none; }); </script> </body> </html> आउटपुट उपरोक्त कोड निम्नलिखित आउटपुट उ