జావాస్క్రిప్ట్‌లో హోవర్‌లో చిత్రాన్ని మార్చే విధానాన్ని ఈ పోస్ట్ ప్రదర్శిస్తుంది.
జావాస్క్రిప్ట్‌లో హోవర్‌లో చిత్రాన్ని మార్చడం ఎలా?
హోవర్‌లో చిత్రాన్ని మార్చడానికి, “ని ఉపయోగించండి మౌస్ ఓవర్ ” ఈవెంట్. మౌస్/కర్సర్‌ను HTML మూలకం లేదా దాని పిల్లలలో ఒకరి ద్వారా తరలించినప్పుడు, ఆన్‌మౌస్ ఓవర్ ఈవెంట్ ట్రిగ్గర్ చేయబడుతుంది.
ఉదాహరణ 1: జావాస్క్రిప్ట్‌లో హోవర్‌లో చిత్రాన్ని మార్చండి
HTML ఫైల్‌లో, వెబ్ పేజీలో చిత్రాన్ని చూపించడానికి ట్యాగ్‌ని ఉపయోగించండి. జోడించు' మౌస్ ఓవర్ ” చిత్రంపై మౌస్ హోవర్ చేసినప్పుడు జావాస్క్రిప్ట్ ఫంక్షన్‌ని పిలిచే ఈవెంట్:
< img id = 'menuImg' src = '1.jpg' మౌస్ ఓవర్ = 'హోవర్ (ఇది);' />
జావాస్క్రిప్ట్ ఫైల్‌లో, ఫంక్షన్ నిర్వచించండి “ హోవర్ 'పరామితితో' img ”. నిర్వచించిన ఫంక్షన్‌లో, హోవర్‌లో చూపబడే చిత్రాన్ని సెట్ చేయండి:
ఫంక్షన్ హోవర్ ( img )
{
img src = '2.jpg'
}
మీరు చూడగలిగినట్లుగా, అవుట్‌పుట్‌లో, మేము ప్రస్తుత చిత్రంపై హోవర్ చేసినప్పుడు, అది అకస్మాత్తుగా మారుతుంది:
ఉదాహరణ 2: హోవర్‌లో చిత్రాన్ని టోగుల్ చేయండి
పై ఉదాహరణలో, చిత్రంపై మౌస్ కదులుతున్నప్పుడు చిత్రం మారుతుంది మరియు అదే చిత్రం మిగిలి ఉంటుంది. ఇప్పుడు, ఈ ఉదాహరణలో, మౌస్ చిత్రం నుండి బయటకు వెళ్లినప్పుడు మొదటి చిత్రం మళ్లీ కనిపిస్తుంది. ఈ ప్రభావాన్ని టోగులింగ్ ప్రభావం అంటారు. ఈ ప్రయోజనం కోసం, మేము 'ని ఉపయోగిస్తాము మౌస్ ఓవర్ 'మరియు' మౌసౌట్ HTML లక్షణాలు:
< img id = 'menuImg' src = '1.jpg' మౌస్ ఓవర్ = 'హోవర్ (ఇది);' మౌసౌట్ = 'హోవర్ అవుట్ (ఇది)' />
' మౌస్ ఓవర్ 'అని పిలుస్తుంది' హోవర్ () 'ఫంక్షన్ అయితే,' మౌసౌట్ 'ఈవెంట్ ఫంక్షన్‌ని పిలుస్తుంది' హోవర్ అవుట్ () ”:
ఫంక్షన్ హోవర్ అవుట్ ( img ) {img src = '1.jpg'
}
చిత్రంపై మౌస్ ఉన్నప్పుడు చిత్రం విజయవంతంగా మార్చబడిందని మరియు మౌస్ చిత్రం నుండి బయటకు వెళ్లినప్పుడు అది మార్చబడిందని అవుట్‌పుట్ చూపిస్తుంది:
అది హోవర్‌లో మారుతున్న ఇమేజ్ గురించి.
ముగింపు
హోవర్‌లో చిత్రాన్ని మార్చడానికి, 'ని ఉపయోగించండి మౌస్ ఓవర్ ” ఈవెంట్. టోగుల్ ప్రభావం కోసం, 'ని ఉపయోగించండి మౌస్ ఓవర్ 'తో లక్షణం' మౌసౌట్ ” ఈవెంట్. మౌస్/కర్సర్ ఒక మూలకం లేదా దాని పిల్లలలో ఒకరి ద్వారా తరలించబడినప్పుడు, ఆన్‌మౌస్ ఓవర్ ఈవెంట్ ట్రిగ్గర్ చేయబడుతుంది, అయితే మౌస్/పాయింటర్‌ను మూలకం నుండి బయటకు తరలించినప్పుడు, ఆన్‌మౌస్ అవుట్ ఈవెంట్ జరుగుతుంది. ఈ పోస్ట్‌లో, జావాస్క్రిప్ట్‌లో హోవర్‌లో చిత్రాన్ని మార్చే విధానాన్ని మేము ప్రదర్శించాము.