Drawing with Stylesheets and Javascript

5. Animate the Drawing

In order to be able to animate our drawing we need to be able to reference the specific parts of our drawing that belong together in some way. Because the white keys are in two parts we can't assign an id to each piece since that would require separate ids for each of the two pieces of the same key. Instead we'll just add an extra class to each key that assigns the same key number to all of the parts of the same key. Because we inserted empty entries into the second array where the black keys are we can simply assign the class names based on which entry in the array we are referencing. We'll also add onmouseover and onmouseout event handlers to handle the animation for us.

The line to add the divs in the top row now looks like this (and the bottom one looks the same except for the bottomArray reference):

Now we have classes k0 through k35 assigned to each of the keys in our diagram and we have set up to call chg(keyClass,yellow) when the mouse moves over the keyClass key and undo() when the mouse moves off the key.

All that remains now is to define the functions that provide the animation (the bigger part of the Javascript).

Since we have used class names to identify the different keys we need a way to easily provide the animated effect based on one of the classes attached to an object. We'll achieve this by adding our own getElementsByClassName method to the document object and calling that to retrieve arrays of all the elenets that reference the same class into an array. Here's the final piece of the code:

The start function (which runs when the window finishes loading) sets up arrays of all of the white top, white bottom, and black keys on the page so that the undo function can easily process all of those elements to set their colour back to the original value.

The chg function calls the same processing for the specific key number to change the colour to yellow for whichever key uses the class passed from the onmouseover event.