Mostrar un Panel Emergente para Mostrar Información

Por medio de un DIV mostramos un panel emergente con información cualquiera en HTML.

Aunque se puede hacer algo más general, en este caso mostraremos como mostrar un panel para
las imágenes de una página web que contiene información sobre la imagen.

El código es el siguiente (lo mejor es guardarlo en un archivo *.js e incluirlo en una página):

 function IMGInfo(evt) { var ID = "IMGInfo" // La ID del panel DIV que contendrá la información evt = (evt) ? evt : ((window.event) ? window.event : null) var img if (evt) img = (evt.target) ? evt.target : evt.srcElement; // El elemento sobre el que se generó el evento // La información HTML que se va a agregar // Notesé que usamos una tabla (e incluso agegamos un 'botón' de cierre del panel) var str = "<table border=0 cellSpacing=0><tbody style="font-size:16px;background:#dfdfdf;padding:0px" mce_style="font-size:16px;background:#dfdfdf;padding:0px">" str += "<tr><td><b>Propiedad</b></td><td style="text-align:center"><b>Valor</b></td><td style="text-align:right"><span onclick='document.getElementById(\""+ID+"\").style.display = \"none\"' style="text-align:right;cursor:pointer;color:#ff0000;font-weight:bold;font-size:12px" mce_style="text-align:right;cursor:pointer;color:#ff0000;font-weight:bold;font-size:12px">X</span></td></tr>" str += "<tbody style="font-size:16px;background:#fefefe;padding:1px" mce_style="font-size:16px;background:#fefefe;padding:1px">" str += "<tr><td>Filename</td><td colspan=2>" + decodeURI(img.src.substring(img.src.lastIndexOf("/")+1,img.src.length)) + "</td></tr>" str += "<tr><td>MimeType</td><td colspan=2>" + img.mimeType + "</td></tr>" str += "<tr><td>Title</td><td colspan=2>" + img.title + "</td></tr>" str += "<tr><td>Path</td><td colspan=2>" + img.src + "</td></tr>" str += "<tr><td>Width</td><td colspan=2>" + img.width + "</td></tr>" str += "<tr><td>Height</td><td colspan=2>" + img.height + "</td></tr>" str += "</table>" // Si el panel no existe (la primera vez solamente) entonces lo creamos if ( !document.getElementById(ID) ) { var panel = document.createElement("<div>") panel.id = ID // Asignamos el ID que seleccionamos panel.style.fontFamily = "verdana" panel.style.border = "solid #ddd 2px" document.body.appendChild(panel) // Se agrega al documento actual document.getElementById(ID).style.position = "absolute" // Posicionamos } // Establecemos como se mostrará el panel, en este caso, a la derecha de la imagen document.getElementById(ID).style.top = evt.clientY document.getElementById(ID).style.left = evt.clientX document.getElementById(ID).style.display = "block" // Por último, asignamos el contenido al DIV document.getElementById(ID).innerHTML = str } function AttachHandlers() { // Incorporamos el evento 'onmouseover' para todas las imagenes for ( var i=0, imgs = document.images.length ; i < imgs ; i++ ) addEvent(document.images[i],"mouseover",IMGInfo) } // Esta función trabaja en multi-plataforma, agrega los eventos function addEvent(elem, evtType, func) { if (elem.addEventListener) elem.addEventListener(evtType, func, false) else if (elem.attachEvent) elem.attachEvent("on" + evtType, func) else elem["on" + evtType] = func } // Cargamos el 'panel' cuando se carga el documento addEvent(window, "load", AttachHandlers)

Aquí la información es estática (siempre es la misma para las imágenes) pero con algunas
modificaciones se puede hacer más dinámico, por ejemplo implementando el manejador del evento sobre un array de IDs para los elementos que deseamos mostrar el panel, e incluso pasando HTML como argumento a la función ó haciendo una petición de la información desde el servidor.

La siguiente imagen muestra como queda este ejemplo:

Por último, decir que funciona adecuadamente en IE7-8 y Firefox 2-3. Opera 9.52 muestra un error sobre el evento y Safari produce un error fatal.