TM 2nd qtr-2ndmeeting(java script-animations)
0 likes331 views
This document provides instructions for changing images on hover using JavaScript. It outlines 15 steps to create an HTML file that displays one image ("smile.png") initially, then displays a different image ("bleh.png") when the user hovers over the first image, before returning to the original image when the user stops hovering. It also includes adding text below the images.
TM 2nd qtr-2ndmeeting(java script-animations)
- 1. Java Script: Changing Images on hover Learning by examples: by: Engr. Esmeraldo T. Guimbarda Jr.
- 2. Activity: 1. Open Notepad++. Click on Start > All Programs > Notepad++ folder > Notepad++.
- 3. 2. Create a new HTML file by clicking File > New, or pressing Ctrl+N on your keyboard.
- 4. 3. Save the file as “animate.html”. To save the file, go to File > Save As. Type “animate.html” in the File name box. Select Hypertext Markup Language file in the Save as type selection menu. Save the file in your desktop.
- 5. 4. Type the basic skeleton code of an HTML document.
- 6. 5. Define the title as “Animate image on hover with Javascript”.
- 7. 6. Add the style tag <style> with type as text/css at the head tag <head> section below title tag <title> and create two(2) ID’s named smiley & poem.
- 8. 7. Inside #smiley set padding to 0, both margin to auto,& text-align to center.
- 9. 8. Inside #poem set width to 50%, both margin to auto, text-align to center, background color to red using RGB values and text color to yellow using hexadecimal values.
- 10. 9. Inside body tag <body>, create a division tag <div> with division id as smiley
- 11. 10. Inside division <div> id smiley, assign smile.png as your image.
- 12. 11. Inside image tag <img>, assign bleh.png as your image when you hover your mouse over image smile.png.
- 13. 12. Inside image tag <img>, assign smile.png again as your image when you hover out your mouse over image.
- 14. 13. below the division(smiley). Create another division with division id as poem
- 15. 14. Inside division <div> id poem, create a paragraph tag <p>. Inside the paragraph tag <p>type in the poem titled tickle as shown below
- 16. 15. Save the file by clicking File > Save or pressing Ctrl + S on your keyboard.
- 17. 16. Open the HTML file to your browser by clicking Run > Lunch in Chrome or Lunch in Firefox on your Notepad++
- 18. OUTPUT: