Using an HTML image (img) elements onclick event

Using an HTML image (img) elements onclick event

Using an HTML image (img) elements 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 file

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 dont 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 Result so far Search youtube for a video on the

Gettysburg Address and pick one. We want the videos 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.