Use Javascript to make the trees grow. You may start with this boring
plain HTML forest, but the
assignment is to allow the trees to grow when you click on them.
It should look like the video shown on the right.
When your trees grow, make sure they grow up only. They should not get wider,
or move down, or move over. Just get taller. The bottoms of the images
must stay fixed, and the tops move.
Feel free to decorate the page further, or to use a different tree image if
you have one of reasonable size which you like better.
How To Proceed
Download and extract the contents of this archive.
Place the two files, deadforest.html and
Winter_Tree_1_by_Merlin2525.png into a folder on your computer.
Open deadforest.html in your browser. You should see the trees,
but they won't grow.
Edit deadforest.html using a plain text editor to make changes.
Add a Javascript section to the header. It should contain a function
which takes an DOM element as a parameter. It should:
Extract the current height from the element's style.
Convert the height to an integer value with an expression like
height = parseInt(height);
Add 10 to the integer height.
Create a new height for the element by assigning it this new
value, with the units "px" appended.
Onto each of the tree image tags, add an onClick which
calls your function, and sends the parameter this.
When you're ready, post your page on Sandbox, then go
here and
enter the URL of the page.