How to include an image and an imagemap in an external website (page 2 of 2)  
Providing more dynamic embedding 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 <img> 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.
Previous Page
Skip to page: 1 | 2
|
Subscribe in a reader