#HTML IFRAME CODE EXAMPLE FOR FREE#

The tag target attribute and the iframe name need to match. The tag uses its target attribute to point to the iframe. The iframe name is needed by the tags as a destination for the images. This example uses three tags which are used to select which image to display. For this example, the image is located on the same server as the web page so a relative address can be used instead of the full web address. The value of the src attribute is the URL of the image. When the web page is initially loaded, the iframe will display the image that is pointed to by the iframe src attribute. The iframe is sized to 130 x 198 pixels using the following syntax: For this example the image is 100 x 168 pixels. Some browsers may clip the image unless the iframe is sized a little larger than the image. To embed an iframe in a content page, select the Embed layout, choose the HTML block, and paste the iframe code there.

#HTML IFRAME CODE EXAMPLE FOR FREE#

We have created a bunch of responsive website templates you can use - for free Web Hosting.

Learn the basics of HTML in a fun and engaging video tutorial. Likewise, the height is set using the iframe height attribute. Code Editor (Try it) With our online code editor, you can edit code and view the result in your browser. The width of the iframe is set using the iframe width attribute. The scrollbars can be removed by using the iframe scrolling attribute. Some browsers may try to add scrollbars when they are not desired. The iframe borders can be removed by using the iframe frameborder attribute. We start by hiding the iframe borders so that only the image is visible. Iframes are not supported by your browser. Try it! - Click on a link next to the 8-ball image. The rest of the page does not need to be reloaded.

The only thing that is changed is the contents of the iframe. When a user clicks on an image link, the image is loaded into the iframe. This iframe example will show how the tag can be used as an image container. Flip through images without reloading the whole pageĮver wonder how to change an image, in a web page, without reloading the whole page every time the user clicks on a link? It's easy using the HTML tag.

Html iframe code example