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>
