javascript change image when onmouseover and onmouseout
Question
I am a beginner and I am doing a homework and I have a small problem. My task is when onmouseover is on, image1 should be changed to image2. When onmouseout is on, image2 should be changed to image1 Onmouseover works but onmouseout does not work! Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM_4</title>
</head>
<body>
<img onmouseover = "changePic1()"onmouseout= "changePic2()" id="myImg" src="bakground.jpg" width="150" height="200">
<script>
function changePic1() {
document.getElementById("myImg").src = "screen.jpg";
}
function changePic22(){
document.getElementByID("myImg").src = "bakground.jpg";
}
</script>
</body>
</html>
Why my onmouseout does not work? I know there can be better ways to code, but I must use both onmouseover and onmouseout. There should be only HTML and simple javascript codes. (My teacher said so)
2 answers
solution1
1 2017-01-21 20:38:25
Your function name changePic22() is incorrect and you have also syntax error document.getElementByID
Replace you code to this one
function changePic1() {
document.getElementById("myImg").src = "screen.jpg";
}
function changePic2(){
document.getElementById("myImg").src = "bakground.jpg";
}
solution2
0 2017-01-21 20:52:53
Try this one:
JS:
function changePic1() {
document.getElementById("myImg").src = "http://res.cloudinary.com/vishakhanehe/image/upload/v1481149848/mickeywaving_ttphnm.gif";
}
function changePic22(){
document.getElementById("myImg").src = "http://res.cloudinary.com/vishakhanehe/image/upload/v1481149848/obama1_c1buc6.jpg";
}
HTML:
<img onmouseover = "changePic1()" onmouseout= "changePic22()" id="myImg" src="" width="150" height="200">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.