WDV221 Intro Javascript

Style Object - CSS Interactions - In Class Exercises

Please modify this page to create the following Dynamic HMTL effects.

1. Click this paragraph to change the font color to red.

2. Mousever this paragraph to center the H3 element containing "CSS Interactions".

3. Click the button to left align the H3 element.

4. Mouseover this paragraph to change the font to a font of you choice.

5. Click on this paragraph to return the font to the default font.

6. Click on the button to make the word SALE font size 24.

7. Click on the button to return the word to its original size.

8. Use an eventhandler of your choice on this paragraph to make the paragraph background color yellow.

9. Use an onclick event to hide the Frog image shown below.

10. Use the following button to make the Frog image shown below reappear.

11. Mouseover the Frong image to make its height and width double its original size.

frog

12. Use a click event on the Frog image to make it return to original size.

13. Doubleclick on this paragraph to place a border around this paragraph.

14. Use an event handler of your choice to remove the border from the previous paragraph.

15. Mouseover this paragraph to turn its background color to green. When you mouseoff the paragraph return it to its normal color.