/******************************************************************************* * * Here's how you'd make your page popup an info box whenever you move your * mouse over a certain tag. * * Include necessary scripts: * * * * * Install handler, and create a floating layer: * * * * * * Attach callback to your tag: * * Your Tag * * Define initialization, popper-upper, and event handler: * * * *******************************************************************************/ /******************************************************************************* * * Get size and position of an tag. (Returns null if not found.) * * var pos = get_position("id"); * var x = pos.x; * var y = pos.y; * var w = pos.w; * var h = pos.h; * *******************************************************************************/ function get_position(id) { var x, y, w, h; var pos = new Object(); // Get position and size of anchor. x = y = w = h = 0; if (isIE || isNS6) { var obj = isIE ? document.all[id] : document.getElementById(id); if (obj == null) return null; x = obj.offsetLeft; y = obj.offsetTop; w = obj.offsetWidth; h = obj.offsetHeight; while ((obj = obj.offsetParent) != null) { x += obj.offsetLeft; y += obj.offsetTop; } } else if (isNS4) { for (var i=0; i win.w - 5) x = win.w + xoff - pos.w - 5; if (x < xoff + 5) x = xoff + 5; if (y + pos.h - yoff > win.h - 5) y = win.h + yoff - pos.h - 5; if (y < yoff + 5) y = yoff + 5; show_popup(id, x, y); } // Position and show a popup in the center of browser's window. function center_popup(id) { var pos = get_position(id); var win = get_window_size(); var xoff = get_window_x_offset(); var yoff = get_window_y_offset(); var x = (win.w - pos.w) / 2; var y = (win.h - pos.h) / 2; if (x < 0) x = 0; if (y < 0) y = 0; x = xoff + x; y = yoff + y; show_popup(id, x, y); } // Position and show a popup. function show_popup(id, x, y) { var style = get_style(id); style.left = x + "px"; style.top = y + "px"; style.visibility = "visible"; } // Position a popup. function move_popup(id, x, y) { var style = get_style(id); style.left = x + "px"; style.top = y + "px"; } // Hide a popup. function hide_popup(id) { var style = get_style(id); style.visibility = "hidden"; } // Get popup's style object. function get_style(id) { if (isIE6 || isNS6) { return document.getElementById(id).style; } else if (isIE4) { return document.all[id].style; } else if (isNS4) { return document.layers[id]; } return null; } /******************************************************************************* * * Install event handler to watch mouse movements. * * install_onmousemove(your_handler); * watch_mouse(your_handler, 0 || 1); * * function your_handler(event, x, y) { * var in_box = is_in_box( bx, by, bw, bh ); * var in_popup = is_in_popup( "popup_id" ); * } * *******************************************************************************/ var WATCH_MOUSE = 0; var WATCH_RESIZE = 0; var mm_user_handlers = new Array(10); var rs_user_handlers = new Array(10); var mm_num_handlers = 0; var rs_num_handlers = 0; var mm_watch = new Array(10); var rs_watch = new Array(10); var mm_x, mm_y, mm_event; // Install onResize handler. function install_onresize(handler) { if (isNS4) { window.captureEvents(Event.RESIZE); window.onresize = rs_onresize; } else if (isNS6) { window.addEventListener("resize", rs_onresize, true); } else if (isIE) { window.onresize = rs_onresize; } if (rs_num_handlers >= 10) alert("install_onresize() has run out of handlers!"); else { rs_user_handlers[rs_num_handlers] = handler; rs_watch[rs_num_handlers++] = 1; WATCH_RESIZE = 1; } } // Tell it to watch (or not watch) resize events. function watch_resize(handler, state) { for (var i=0; i= 10) alert("install_onmousemove() has run out of handlers!"); else { mm_user_handlers[mm_num_handlers] = handler; mm_watch[mm_num_handlers++] = 0; } } // Tell it to watch (or not watch) mouse events. function watch_mouse(handler, state) { for (var i=0; i= x-r && mm_x < x+w+r && mm_y >= y-r && mm_y < y+h+r) ? 1 : 0; } // Check if an event happened in a popup. function is_in_popup(id) { return is_near_popup(id, 0); } function is_near_popup(id, r) { if (document.layers) { var div = document.layers[id]; return ( mm_x >= div.left-r && mm_x < div.left+div.clip.width+r && mm_y >= div.top-r && mm_y < div.top+div.clip.height+r ) ? 1 : 0; } else if (isIE) { var obj = mm_event.srcElement; while (obj.parentElement != null) { if (obj.id == id) return 1; obj = obj.parentElement; } return 0; } else if (isNS) { var obj = mm_event.originalTarget; while (obj.parentNode != null) { if (obj.id == id) return 1; obj = obj.parentNode; } return 0; } return 0; } /******************************************************************************* * * This will do popup captions for images. * *******************************************************************************/ var img_pos; var img_on = 0; function img_move(x, y) { if (x >= img_pos.x - 5 && x < img_pos.x + img_pos.w + 5 && y >= img_pos.y - 5 && y < img_pos.y + img_pos.h + 5) { fit_popup("img_popup", x + 10, y + 10); } else { hide_popup("img_popup"); img_on = 0; } } function img_enter(n) { var alt = eval("img_alt_" + n); var id = "img" + n; while (alt.match(/
/)) alt = alt.replace(/
/, ""); while (alt.match(//)) alt = alt.replace(//, "
"); write_popup("img_popup", '

' + '

' + ' ' + alt + '' + '

' + '

' ); img_pos = get_position(id); img_on = 1; install_onmousemove_private(); move_popup("img_popup", 0, 0); }