Dynamically Changing an img tag's onemouseover attribute with Javascript nulls it instead

Question

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>

In the javascript you aren't assigning the `onmouseover` attribute, you are attempting to set the event handler for mouseover (which must always be a function). — Shmiddty, Dec 13 '12 at 22:48

Yukulélé · Answer 1 · 2012-12-13T23:02:11.423

1

You need to use 2 variables to save toggle stat:

var img = document.getElementById("image");
var toggleover  = false;
var toogleClick = false;

img.addEventListener('click',function(){
    toogleClick = !toogleClick;
    changeImg();
},false);

img.addEventListener('mouseover',function(){
    toggleover = true;
    changeImg();
},false);
img.addEventListener('mouseout',function(){
    toggleover = false;
    changeImg();
},false);

(function changeImg(){
if(toogleClick)  
    img.src = toggleover ? "url-1-2.jpg" : "url-1-1.jpg";
else
    img.src = toggleover ? "url-2-2.jpg" : "url-2-1.jpg";
})();

edited Dec 13 '12 at 23:02

answered Dec 13 '12 at 22:47

Yukulélé

15,644
10
70
94

That does not help me in anyway, changing the src is fine, when I change the onmouseover and onmouseout attributes, it does not work. – ρσݥzση Dec 13 '12 at 22:48

score 0 · Answer 2 · answered Dec 13 '12 at 22:40

0

If I understood well your question you need a variable to be incremented and to check on it if it is odd or even and then do different processing depending on your needs.

answered Dec 13 '12 at 22:40

Mehdi Karamosly

5,388
2
32
50

I don't understand any of that – ρσݥzση Dec 13 '12 at 22:41
Your question is not clear enough you should explain in details for each state what image you want to be using. as you have 6 images total you need to write for each state which image you want to be associated to it. – Mehdi Karamosly Dec 13 '12 at 22:59

Dynamically Changing an img tag's onemouseover attribute with Javascript nulls it instead

2 Answers2