1 / 29

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

Using an HTML image (img) element’s onclick event to change the source (src) of an iframe to an embedded youtube video. Start an HTML file, give it a title and header, then Save it.

kathy
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 file

  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 <table> and </table>. Notice the open and close table row tags <tr> and </tr> -- there are two sets because there are two rows. Notice the open and close table data (cell) tags <td> and </td> -- -- there are four sets because there are four cells (two rows with two columns each).

  8. &nbsp; • The HTML code &nbsp; 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 &nbsp; 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 <td> and close cell </td> 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.” <iframe width="420" height="345" src="http://www.youtube.com/embed/smEqnnklfYs"></iframe>

  24. Result so far

  25. Give the Lincoln image an onclick event: <img alt="" src="abraham.gif" onclick="return Abe()" /> • 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

More Related