1. Using an HTML image (img) element’s onclick event to change the source (src) of an iframe to an embedded youtube video

2. Start an HTML file, give it a title and header, then Save it.

3. Navigate to http://www.lasalle.edu/~blum/c230wks/abraham.gif, right click on image and save to same location as HTML filehttp://www.lasalle.edu/~blum/c230wks/abraham.gif

4. Repeat for http://www.lasalle.edu/~blum/c230wks/martin.gif

5. Go to Design tab (at the bottom) and click on Table on the menu, choose Insert Table

6. Using the Insert Table dialog, choose 2 rows and 2 columns and click OK.

7. Return to the Source view tab. Notice the open and close table tags and. Notice the open and close table row tags and -- there are two sets because there are two rows. Notice the open and close table data (cell) tags and -- -- there are four sets because there are four cells (two rows with two columns each).

8. The HTML code stands for a non-breaking space Spaces in HTML code do not always translate into spaces seen by the user (person looking at the page), but the code does correspond to a space seen by the user http://w3schools.com/html/html_entities.asp http://en.wikipedia.org/wiki/Non-breaking_space

9. Drag from the Image icon in the Toolbox to between the first open cell and close cell tags Remember that if you do not have the Toolbox, you can get it by going to View/Toolbox on the menu

10. Click on the image so it appears in in the Properties Window on the left. Scroll to the src property (attribute) and click on the ellipsis (…) button that appears after you click in the cell next to src Remember that if you don’t have the Properties Window, you can get it by going to View/Properties Window on the menu. (Properties Window is near the bottom of the list.)

11. Use the dialog to select the abraham.gif file and click OK. It is really convenient when you are just starting to make webpages to put the image file and HTML file in the same location.

12. See the result – and remember you can always just type the code provided you know it.

13. Repeat for the second cell which should have an img element with the martin.gif file as its source.

14. Go to File/View in Browser to see the result so far

15. Next we Googled “html youtube” and choose the w3schools link (third).

16. Copy example code from http://www.w3schools.com/html/html_youtube.asp

17. Paste the code between the open cell and close cell tags for both cells in the second row of the table

18. Result so far

19. Search youtube for a video on the Gettysburg Address and pick one.

20. We want the video’s code which appears after the ?v= in the URL

21. Paste the copied video code after the embed/ in the src attribute of the iframe

22. Result so far.

23. Repeat for the “I have a dream speech.”

24. Result so far

25. Give the Lincoln image an onclick event: And add the corresponding script section and function to the head.

26. Give the Abraham iframe an id attribute (ifAbe)

27. Add the code document.getElementById("ifAbe").src = "http://www.youtube.com/embed/_Dlggkx6mks"; to your function. Make the src of the iframe equal to “”

28. The effect is to eliminate the iframe src (youtube video) until the image is clicked.

29. Repeat for Martin: give iframe an id, give image an onclick, write function to handle onclick