IzziD code logo

Topics

Home

Bioinfo

Web

Misc

About

Other IzziDs

IzziDassorted

IzziDtravel

IzziDwetlab

IzziD

How to include an image and an imagemap on an external website

Article created: Jan 05, 2008
Article by: Jeremiah Faith

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.

Simple ways to allow others to embed your site’s content

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).

Jeremiah Faith playing trumpet

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).

scatterplot of araC versus araB histgram of gene expression

Providing more dynamic embedded content with imagemaps

The embedding method I showed above is pretty unexciting; it allows users to look at your content on external pages, but it provides no way for them to interact with your content. For example, the Google Map above allows you to zoom in and drag your way around the map – providing a much richer web experience. Their fancy web-applet involves a lot of javascript, DHTML, and CSS (i.e. ajax) to function. Web-applets of this scale can be embedded in the same manner I’m going to describe below, but in this article I’m only going to describe a simpler way to make dynamic embedded content using an: imagemap.

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>

The html page itself contains some javascript to generate the ajax-based tooltip that appears when you mouseover any of the data points, an link, and an imagemap that specifies the location and mouseover function for each data point on the image. When you mouseover any point specified in the image map,the javascript function SO4() is called to generate the informational tooltip. The details of the html, css, and javascript you generate will be specific for your application. The key is that the html you generate must result in a very barebones webpage with little to no formatting. If viewed as a standard url outside of its iframe, the embedded page should be a blank page that contains the image as the only viewable element in the webpage (here’s the non-iframed version of the example above).

<HTML><HEAD>
    <link rel="stylesheet" href="http://m3d.bu.edu/m3d.css" type="text/css">

    <!-- JAVASCRIPT FOR TOOLTIP -->
    <style type="text/css"> .ovfl { height: 220px; overflow:auto;} </style>
    <script type="text/javascript" src="/javascript/prototype/prototype-1.4.0.js"></script>
    <script type="text/javascript" src="/javascript/overlibmws.js"></script>
    <script type="text/javascript" src="/javascript/m3d.js"></script>
    <script type="text/javascript">
       function SO4(expid,chipid) {
         var url = 'http://m3d.bu.edu/ajax_info.php';
         var pars = 'chipid=' + chipid + '&expid=' + expid + '&db=' + 'E_coli_v4_Build_3';
         var myAjax = new Ajax.Request(
             url,
              {
               method: 'get',
               parameters: pars,
               onComplete: showResponse4
              });
         }
       function showResponse4(originalRequest) { 
           overlib(originalRequest.responseText, STICKY, 
                   CAPTION, 'M<sup>3D</sup>', TEXTSIZE, 2, 
                   CAPTIONSIZE, 2, WRAP, WRAPMAX, 400, TIMEOUT, 10000);
      }
    </script>
</head>
<body>

<!-- IMAGE LINK -->
<img height=500 width=500 src="arrayPlotter?longlink...." usemap='#rma' border=0>

<!-- IMAGE MAP (truncated to allow it to fit on this page) -->
<map name=rma>
<area shape='rect' coords='215,78,218,81' href='#' 
      onmouseover="SO4(-1,1);" onmouseout="nd();">
<area shape='rect' coords='218,68,221,71' href='#' 
      onmouseover="SO4(-1,2);" onmouseout="nd();">
      etc.......
</map>

<!-- M3D HELP URL PLACED IN THE TOP RIGHT CORNER -->
<a style="position:absolute; top:10px; left:460px; text-decoration:none; font-size:11px;" 
   target="_parent" onmouseover="SO2('h', '15');" onmouseout="nd();" 
   href='http://m3d.bu.edu/'>M<sup>3D</sup>[?]</a>
</BODY></HTML>

Caveats

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.