Post on 26-May-2015
description
transcript
Java Script: Changing Images on hover
Learning by examples:
by: Engr. Esmeraldo T. Guimbarda Jr.
Activity:1. Open Notepad++. Click on Start > All Programs > Notepad++ folder > Notepad++.
2. Create a new HTML file by clicking File > New, or pressing Ctrl+N on your keyboard.
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.
4. Type the basic skeleton code of an HTML document.
5. Define the title as “Animate image on hover with Javascript”.
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.
7. Inside #smiley set padding to 0, both margin to auto,& text-align to center.
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.
9. Inside body tag <body>, create a division tag <div> with division id as smiley
10. Inside division <div> id smiley, assign smile.png as your image.
11. Inside image tag <img>, assign bleh.png as your image when you hover your mouse over image smile.png.
12. Inside image tag <img>, assign smile.png again as your image when you hover out your mouse over image.
13. below the division(smiley). Create another division with division id as poem
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
15. Save the file by clicking File > Save or pressing Ctrl + S on your keyboard.
16. Open the HTML file to your browser by clicking Run > Lunch in Chrome or Lunch in Firefox on your Notepad++
OUTPUT: