இந்த இடுகை ஜாவாஸ்கிரிப்ட்டில் படத்தை மாற்றுவதற்கான செயல்முறையை விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் ஹோவரில் படத்தை மாற்றுவது எப்படி?
மிதவையில் படத்தை மாற்ற, '' ஐப் பயன்படுத்தவும் ஓவர் மீது ' நிகழ்வு. மவுஸ்/கர்சரை ஒரு HTML உறுப்பு அல்லது அதன் குழந்தைகள் மூலம் நகர்த்தும்போது, onmouseover நிகழ்வு தூண்டப்படும்.
உதாரணம் 1: ஜாவாஸ்கிரிப்டில் ஹோவரில் படத்தை மாற்றவும்
ஒரு HTML கோப்பில், வலைப்பக்கத்தில் படத்தைக் காட்ட குறிச்சொல்லைப் பயன்படுத்தவும். இணைக்கவும் ' ஓவர் மீது ” படத்தின் மீது சுட்டி வட்டமிடும்போது ஜாவாஸ்கிரிப்ட் செயல்பாட்டை அழைக்கும் நிகழ்வு:
< img ஐடி = 'menuImg' src = '1.jpg' ஓவர் மீது = 'ஹோவர் (இது);' />
ஜாவாஸ்கிரிப்ட் கோப்பில், ஒரு செயல்பாட்டை வரையறுக்கவும் ' மிதவை 'அளவுருவுடன்' img ”. வரையறுக்கப்பட்ட செயல்பாட்டில், மிதவையில் காட்டப்படும் படத்தை அமைக்கவும்:
செயல்பாடு மிதவை ( img )
{
img src = '2.jpg'
}
நீங்கள் பார்க்க முடியும் என, வெளியீட்டில், தற்போதைய படத்தின் மீது வட்டமிடும்போது, அது திடீரென்று மாறுகிறது:
எடுத்துக்காட்டு 2: படத்தை ஹோவரில் மாற்றவும்
மேலே உள்ள எடுத்துக்காட்டில், சுட்டி படத்தின் மீது வட்டமிடும்போது படம் மாறுகிறது, அதே படம் அப்படியே இருக்கும். இப்போது, இந்த எடுத்துக்காட்டில், படத்திலிருந்து சுட்டி நகரும் போது முதல் படம் மீண்டும் தோன்றும். இந்த விளைவு toggling விளைவு என்று அழைக்கப்படுகிறது. இந்த நோக்கத்திற்காக, நாங்கள் பயன்படுத்துவோம் ' ஓவர் மீது 'மற்றும்' மவுஸ்அவுட் HTML பண்புகள்:
< img ஐடி = 'menuImg' src = '1.jpg' ஓவர் மீது = 'ஹோவர் (இது);' மவுஸ்அவுட் = 'ஹவர்அவுட் (இது)' />
' ஓவர் மீது 'அழைக்கிறது' மிதவை () 'செயல்படும் போது,' மவுஸ்அவுட் 'நிகழ்வு செயல்பாட்டை அழைக்கிறது' ஹோவர்அவுட்() ”:
செயல்பாடு வெளியே நகர்த்தவும் ( img ) {img src = '1.jpg'
}
சுட்டி படத்தின் மேல் இருக்கும் போது படம் வெற்றிகரமாக மாற்றப்பட்டு, படத்திலிருந்து சுட்டி வெளியே செல்லும் போது மாற்றப்படும் என்பதை வெளியீடு காட்டுகிறது:
அது படபடப்பில் மாறிவரும் படத்தைப் பற்றியது.
முடிவுரை
மிதவையில் படத்தை மாற்ற, '' ஐப் பயன்படுத்தவும் ஓவர் மீது ' நிகழ்வு. விளைவை மாற்றுவதற்கு, பயன்படுத்தவும் ' ஓவர் மீது ' பண்புடன் ' மவுஸ்அவுட் ' நிகழ்வு. மவுஸ்/கர்சரை ஒரு உறுப்பு அல்லது அதன் குழந்தைகளில் ஒருவர் மூலம் நகர்த்தும்போது, ஆன்மவுஸ் ஓவர் நிகழ்வு தூண்டப்படுகிறது, அதே சமயம் மவுஸ்/பாயிண்டரை ஒரு உறுப்புக்கு வெளியே நகர்த்தும்போது, ஆன்மவுஸ் அவுட் நிகழ்வு ஏற்படுகிறது. இந்த இடுகையில், ஜாவாஸ்கிரிப்ட்டில் படத்தை மாற்றுவதற்கான செயல்முறையை நாங்கள் விளக்கினோம்.