Manipulating Images in Javascript

Question

I am working on a project that requires me to create a javascript file for a webpage with 4 images and 4 check boxes. Each check box is linked to an image. When a check box is clicked, the image linked to it is supposed to do something. Image 1 is supposed to spin, image 2 is supposed to shrink and grow, image 3 will move up and down, and image 4 should skew left and right. All of these actions are supposed to continue until the check box is un-clicked.

I think for me the hardest part is that we aren't allowed to edit the HTML or the CSS, we can only work with the Javacript file. I'm having trouble figuring out how to link the actions of the pictures to the check boxes (like making image 1 spin when the first check box is clicked). Right now, I'm primarily focused on the spinning image since I think if I can figure out how that one works, I should be able to figure out how to make the other 3 work as well. Can anyone point me in the right direction on how to make an image perform a particular action when a check box is clicked?

Here is what I have in my Javascript file so far:

<script type = "text/javascript">
    function spinPic() {
        rotateAnimation("one",20);
    }
</script>

Here is a jsfiddle I've made with the HTML, CSS, and what little is in my JS file. http://jsfiddle.net/k7bt0u17/

http://stackoverflow.com/questions/968642/rotate-image-clockwise-or-anticlockwise-inside-a-div-using-javascript
http://www.developphp.com/view.php?tid=1307 let me know if this solves your problem — rahul_send89, Sep 22 '14 at 06:14
The JS tutorial video was very helpful, I actually watched it before posting this (it's actually responsible for the little bit of Javascript I have written), but still having trouble figuring out how to make the images do what they're supposed to do when their check box is clicked. This is one of those things that I feel like I could do if I were allowed to just write it for myself from the beginning, but I can't figure out how to do it without editing the existing HTML which I'm not allowed to do. — , Sep 22 '14 at 08:02
sorry i thought you are facing rotation as a problem. cause of your http://jsfiddle.net/k7bt0u17/. its not working on safari. even if I manually trigger spinPic(); if u know the tagName,className,or ID u can attack events and trigger them when they clicked. check the ans i posted below . let me know if it helped . — rahul_send89, Sep 22 '14 at 12:20

score 0 · Accepted Answer · answered Sep 22 '14 at 12:07

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}
var spin_checked = false;
addEvent(
    document.getElementById('spin'),
    'click',
    function () { if(!spin_checked){spin_checked = true;spinPic();} }
);

Manipulating Images in Javascript

1 Answers1