// called from body onload event, creates 'on the fly' functions for 'hotspots' to respond to events function initialise() { // get handle of layer containing image and hotspots var parent = document.getElementById("image"); // get array of handles to child layers in parent (ie hotspots) var child_layer = parent.getElementsByTagName("div"); /* Attach 'on the fly' functions to the onclick, mouseover and mouseout events of each 'hotspot' Include e as an event parameter to 'on the fly' function. The parameter doesn't have to be pre-defined, as "when an event occurs, an event object is dynamically created" (DOM:event reference at http://developer.mozilla.org/en/docs/DOM:event). The 'if tree' is just in case, and not strictly necessary. */ for (var i=0; i < child_layer.length; i++) { child_layer[i].onclick = function(e) { var event; if(e) { event = e; } else if(window.event) { event = window.event; } else { event = null; } shownotes(event, this.id); } child_layer[i].onmouseover = function(e) { var event; if(e) { event = e; } else if(window.event) { event = window.event; } else { event = null; } rollover(event, this.id); } child_layer[i].onmouseout = function(e) { var event; if(e) { event = e; } else if(window.event) { event = window.event; } else { event = null; } rollover(event, this.id); } } } function rollover(e, layer_id) /* Change layer appearance on mouse over/out. */ { // get handle of layer referenced in area_id var layer = document.getElementById(layer_id); if (e.type == "mouseover") { layer.style.border = "2px ridge gray"; } else if (e.type == "mouseout") { layer.style.border = "none"; } } function shownotes(e, layer_id) { // get handle of layer that has been clicked var layer = document.getElementById(layer_id); // get handle of notesbox layer var notesbox = document.getElementById("notesbox"); // get handle of
element inside the notesbox var description = document.getElementById("description"); /* set position of notesbox to appear inside the parent layer, by getting the click coords relative to the client area, then setting the style of the notesbox layer to those. */ notesbox.style.position = "absolute"; notesbox.style.top = e.clientY + "px"; notesbox.style.left = e.clientX + "px"; notesbox.style.visibility = "visible"; // line below gives invalid assignment error due to the - in z-index ;-\ // notesbox.style.z-index = '10'; /* Change the text of the
element inside the notesbox layer textContent property setting fails in IE, so have to use nodeValue to set the text of the
inside the notesbox layer */ switch (layer.id) { case "scale": description.firstChild.nodeValue = "Scale for the treatment effect being measured. In this review, less than 1 indicates a decreased risk of neonatal death when following a corticosteroid treatment, more than 1 an increased risk."; break; case "lines": description.firstChild.nodeValue = "Confidence intervals. Square size is proportional to the percentage weight given to the study. The horizontal line represents the certainty of the treatment effect, the shorter the line the greater the certainty."; break; case "labels": description.firstChild.nodeValue = "Review title and labels. The comparison indicates what treatments are being compared, and the outcome describes the outcome of interest."; break; case "vertical": description.firstChild.nodeValue = "Vertical line indicates that both treatments have had the same effect on the outcome."; break; case "studies": description.firstChild.nodeValue = "Individual study titles and dates."; break; case "corticosteroid": description.firstChild.nodeValue = "Quantitative results for the corticosteroid treatment group, expressed as the number of outcomes (n) over the number of subjects in the study (N)."; break; case "placebo": description.firstChild.nodeValue = "Quantitative results for the placebo treatment group, expressed as the number of outcomes (n) over the number of subjects in the study (N)."; break; case "oddsratio": description.firstChild.nodeValue = "Odds ratio values for the studies. "; break; case "weight": description.firstChild.nodeValue = "The percentage weights given to the studies in the pooled meta-analysis. In general, the larger the study sample size the larger the weight. "; break; case "diamond": description.firstChild.nodeValue = "Representation of the pooled quantitative result from the meta-analysis. In this review, the position of the diamond to the left of the vertical line strongly suggests a significantly reduced risk of adverse outcome when a course of corticosteroids is administered"; break; case "isquared": description.firstChild.nodeValue = "The I squared value, a measure of the heterogeneity of the studies - that is, the variation between them."; break; default: description.firstChild.nodeValue = "No notes text for this hotspot as yet" } }
Below is a typical forest plot, where many of the important features are 'hotspots'. Pass the mouse over the image to find the hotspots, then click a hotspot to get a popup with brief notes on the meaning of that part of the plot.
This box contains 'tooltip' text, set at runtime. The box is initially hidden.