Create an Image Rollover Effect

JavaScript မွာ mouse hover event ပါပါတယ္။ ဒါကို အသံုးခ်ျပီးေတာ့ image ေပၚကို ပံုတင္လိုက္တဲ့ အခါ ေနာက္ပံုတစ္ခု ေျပာင္းသြားေအာင္ ဖန္တီးႏိုင္ပါတယ္။

Rollover image ကို ဖန္တီးဖို႕ အတြက္ mouse event handlers ၂ခု ကို အသံုးျပဳပါတယ္။ image အရြယ္အစား တူသည့္ image ၂ ခု လိုပါမယ္။

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
<img src="house_bw.jpg" onmouseover="this.src='house.jpg';" onmouseout="this.src='house_bw.jpg';">
</body>
</html>

အဲဒီ code မွာ mouse ကို ပံုေပၚတင္လိုက္တာနဲ႕ src ကို house.jpg ေျပာင္းလိုက္ပါတယ္။ mouse က ျပန္ထြက္သြားရင္ မူရင္းပံု house_bw.jpg ကို ျပန္ေျပာင္းထားပါတယ္။

Figure 10-9

Figure 10-9. house_bw.jpg

Figure 10-10

Figure 10-10. house.jpg

results matching ""

    No results matching ""