Using an HTML image img elements onclick event

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/c 230 wks/abraham. gif, right click on image and save to same location as HTML file

Repeat for http: //www. lasalle. edu/~blum/c 230 wks/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 <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).

  • 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: //w 3 schools. com/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 w 3 schools link (third).

Copy example code from http: //www. w 3 schools. com/html_youtube. asp

Paste the code between the open cell <td> and close cell </td> tags for both cells in the second row of the table

Result so far

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

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

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

Result so far.

Repeat for the “I have a dream speech. ” <iframe width="420" height="345" src="http: //www. youtube. com/embed/sm. Eqnnklf. Ys"></iframe>

Result so far

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.

Give the Abraham iframe an id attribute (if. Abe)

Add the code document. get. Element. By. Id("if. Abe"). src = "http: //www. youtube. com/embed/_Dlggkx 6 mks"; to your function. Make the src of the iframe equal to “”

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

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