Presentation on theme: "Using an HTML image (img) element’s onclick event to change the source (src) of an iframe to an embedded youtube video."— Presentation transcript:
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.
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
Repeat for http://www.lasalle.edu/~blum/c230wks/martin.gif
Go to Design tab (at the bottom) and click on Table on the menu, choose Insert Table
Using the Insert Table dialog, choose 2 rows and 2 columns and click OK.
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).
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
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
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.)
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.
See the result – and remember you can always just type the code provided you know it.
Repeat for the second cell which should have an img element with the martin.gif file as its source.
Go to File/View in Browser to see the result so far
Next we Googled “html youtube” and choose the w3schools link (third).
Copy example code from http://www.w3schools.com/html/html_youtube.asp
Paste the code between the open cell and close cell tags for both cells in the second row of the table