Its becoming increasingly popular for large web companies (e.g. Google) to allow users to embed external web-applets into any html page. The most prominent example is the embedding of videos (e.g. from youtube) on blogs and even news websites. Another popular example is the embedding of a Google Map. For example, below I generated a custom map using Google’s My Maps.
To embed this interactive map onto your own website, Google provides a small amount of HTML to paste into your own site’s HTML code.
The most common way for others to embed your content in their own website is by including an image. For example the image of myself playing trumpet below is actually hosted at my personal website (www.jeremiahfaith.com).
To include the image on this page, I simply refer to the image location at www.jeremiahfaith.com in the src field of the
<img> in the html code.
<img width=300 height=225 src="http://www.jeremiahfaith.com/images/meTrumpet.jpg">
This trick has been used by web designers for years and is often an annoyance to website designers, because it provides an easy way for others to steal/borrow your content and bandwidth. However, if you want others to be able to include your content in their own website – and your content is images – you have this easy solution. If your content is dynamically generated, you need only provide potential users with instructions on how to generate the appropriate url. For example, I have a biological database from which I dynamically create various image plots (from microarray gene expression data), and I provide some documentation to explain the url construction, allowing other web developers produce and infinite variety of these plots on their own websites (below are a couple of examples).
Imagemaps were very popular on the web a few years ago. They provide a mechanism for you to make various portions of your image clickable. Here’s an imagemap tutorial if you don’t know what an image map is or how to create one. To generate an imagemap you need both an html page (which describes the clickable coordinates on the image and where they link to) and a image (which is linked to from the html page). Below is an example of one of the dynamic plots I discussed above, except this time you can hold your mouse over any of the data points in the plot and a small information pane will appear providing the detailed experimental conditions that were used to generate each datapoint.
The html page and the image are embedded from the M3D website using an iframe that is the same height as the image and contains no border, margin, or scroll bars (so you can’t see the boundaries of the iframe).
<iframe scrolling="no" frameborder="0" marginheight="0" marginwidth="0" height=600 width=600 border=0 src='http://m3d.bu.edu/cgi-bin/long-url......'> </iframe>
One obstacle with this iframe-based content embedding approach is the security limitations of current browsers. Because the domain of the embedded iframe is different than the domain of the main page, the html in the iframe only has access to the area inside the iframe. What this means is that if you want to present relatively large information panes, as I do above, your iframe must also be large to accommodate the pane, because the pane cannot appear outside of the iframe. In the smaller example below, I’ve included a border around the iframe, so you can easily see its bounds. The information pane in this example is almost always generated with a scrollbar and the pane obscures most of the image. Ideally, we would draw the pane above or to the side of the image, but this area is unavailable to us because of browser security limitations.