Question

I have a simple animation in CSS3 called "tap" and "untap".

I call it in via " className", and I’m trying to combine it so that onclick it does “tap” and onmouseout to “untap”.

I have the click part working, but after the else statement it “doesn’t work”. What am I doing wrong?

---

<img src="picHere.gif" id="img7" onclick="if(this.className != 'tap') { this.className='tap'}  else {"onmouseout='this.className='untap'}; "/>

Answer 1

You just need this:

<img src="picHere.gif" id="img7" 
    onclick="if(this.getAttribute('class') !== 'tap') this.setAttribute('class','tap');" 
    onmouseout="if(this.getAttribute('class') === 'tap') this.setAttribute('class','untap');" />

You could actually keep className, if you wanted. But the important thing to note here is that the onclick and onmouseout events are seperate.