Ipapakita ng post na ito ang pamamaraan upang baguhin ang imahe sa pag-hover sa JavaScript.
Paano Baguhin ang isang Larawan sa Hover sa JavaScript?
Para sa pagpapalit ng larawan sa hover, gamitin ang “ onmouseover ” kaganapan. Kapag ang mouse/cursor ay inilipat sa isang HTML element o isa sa mga anak nito, ang onmouseover na kaganapan ay ma-trigger.
Halimbawa 1: Baguhin ang Larawan sa Hover sa JavaScript
Sa isang HTML file, gamitin ang tag upang ipakita ang larawan sa isang web page. Ilakip ang ' onmouseover ” kaganapan na tatawag sa JavaScript function kapag nag-hover ang mouse sa imahe:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'hover(ito);' />
Sa isang JavaScript file, tukuyin ang isang function na ' hover 'na may parameter' img ”. Sa tinukoy na function, itakda ang imahe na ipapakita sa hover:
function hover ( img )
{
img. src = '2.jpg'
}
Tulad ng nakikita mo, sa output, kapag nag-hover kami sa kasalukuyang imahe, bigla itong nagbabago:
Halimbawa 2: I-toggle ang Imahe sa Hover
Sa halimbawa sa itaas, nagbabago ang imahe kapag nag-hover ang mouse sa ibabaw ng imahe, at nananatili ang parehong larawan. Ngayon, sa halimbawang ito, muling lilitaw ang unang larawan kapag umalis ang mouse sa larawan. Ang epektong ito ay tinatawag na toggling effect. Para sa layuning ito, gagamitin namin ang ' onmouseover 'at' onmouseout ” HTML properties:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'hover(ito);' onmouseout = 'hoverOut(ito)' />
“ onmouseover 'tawag sa' hover() ” function habang, ang “ onmouseout 'Tinatawag ng kaganapan ang function' hoverOut() ”:
function hoverOut ( img ) {img. src = '1.jpg'
}
Ang output ay nagpapakita na ang imahe ay matagumpay na nabago kapag ang mouse ay nasa ibabaw ng imahe at ito ay nabago kapag ang mouse ay lumalabas sa imahe:
Iyon ay tungkol sa pagbabago ng imahe sa hover.
Konklusyon
Para sa pagbabago ng imahe sa hover, gamitin ang ' onmouseover ” kaganapan. Para sa toggling effect, gamitin ang ' onmouseover ' attribute na may ' onmouseout ” kaganapan. Kapag ang mouse/cursor ay inilipat sa isang elemento o isa sa mga anak nito, ang onmouseover na kaganapan ay na-trigger, habang kapag ang mouse/pointer ay inilipat sa labas ng isang elemento, ang onmouseout na kaganapan ay magaganap. Sa post na ito, ipinakita namin ang pamamaraan para sa pagbabago ng imahe sa hover sa JavaScript.