Dynamically Changing an img tag's onemouseover attribute with Javascript nulls it instead
Posted
by
?s?zs?
on Stack Overflow
See other posts from Stack Overflow
or by ?s?zs?
Published on 2012-12-13T22:28:04Z
Indexed on
2012/12/13
23:03 UTC
Read the original article
Hit count: 203
I want to create an img that has four different states: State 1 over State 1 out State 2 over State 2 out
Each state is a different image, and the user can toggle between states 1 and 2 by clicking on the image. To do this I change the src when the image is clicked and the onmouseover and onmouseout attributes of the img element. However when the attributes have been changed they become nulled and do nothing. How can I dynamically change these properties?
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<script>
function change()
{
document.getElementById('image').src="http://youtube.thegoblin.net/layoutFix/hideplaylist.png";
document.getElementById('image').onmouseover="this.src='http://youtube.thegoblin.net/layoutFix/hideplaylistDark.png'";
document.getElementById('image').onmouseout="this.src='http://youtube.thegoblin.net/layoutFix/hideplaylist.png'";
}
</script>
</head>
<body>
<img id="image" src="http://youtube.thegoblin.net/layoutFix/showplaylist.png" onmouseover="this.src='http://youtube.thegoblin.net/layoutFix/showplaylistDark.png'" onmouseout="this.src='http://youtube.thegoblin.net/layoutFix/showplaylist.png'" onClick="change()">
</body>
</html>
© Stack Overflow or respective owner
