How to display a image from another source in your iWeb page?

To do that, you must use the HTML Snippet.

Paste an IFRAME HTML element in the HTML snippet with the relevant info and the image will be displayed.

For every HTML Snippet iWeb creates a widget-markup file in the folder with your Pagename in your Site folder.

With a lot of images, it’s a lot of files the browser has to load.

There’s another way to do it. Here’s how.

First, determine the URL of the image you want to display.

I’ll use : http://www.wyodor.net/fotografie/images/foto_toestel.png

Find out the width and height of the image : 250 x 191.

In iWeb add a blank page to your Site. Just to practice.

Add a HTML Snippet. Widget1. This one will be for the code. Drag it to the bottom of the page. Resize it if you want.

Next, add another HTML Snippet. Widget2. This one will be for the image.

Note : widget0 is the Navigation bar at the top of the page. If you disable/enable it the sequence numbers of the widgets change.

Do not add any code. Simply confirm and then drag the handles to the desired width and height : 250 x 191.

Drag the HTLM Snippet to the location on the page where you want the image displayed.

Publish your page. When viewed in the browser, you’ll see this image.

Look at the source of the webpage to verify the widget numbers.

Adding the code

Now we need to add JavaScript code to the HTML Snippet (Widget0). When you add more HTML Snippets, the numbers increase.

This is the code :

<script language="JavaScript" type="text/javascript">
<!--

elem = parent.document.getElementById("widget2");
elem.innerHTML = "<img src='http://www.wyodor.net/fotografie/images/foto_toestel.png' width='250' height='191' alt='Camera' title='Camera' />";

// -->
</script>

Change the values in the src=, width= and height=.

Copy/Paste the above code in the HTML Snippet.

Publish your page and display it in the browser. The image will show.

iWeb will publish empty widget-markup files, but these will not be loaded by the browser as far as I could determine.

To add more images, or even a movie, add more  HTML Snippets and add the code to the HTML Snippet. Always verify that the widgets keep the same number.

You may have to learn HTML/CSS/JavaScript.

The question