Tutorial Rápido, Utilizar Overlays Icons en tu página con IE9
Hoy vamos ver como agregar rápidamente Overlays Icons en nuestro sitio web, para eso, como siempre vamos paso a paso.
Paso 1: Los Iconos:
Elegí estos íconos para el ejemplo para mostrar los posibles estados por ej. del resultado de un proceso en una página de mi WebSite.
Paso 2: El Código:
El código es bastante sencillo y se va a llamar desde los linkls “Error”, “Warning” y “Ok” , obviamente esta función puede ser llamada por el resultado de algún proceso utilizando ajax. Más información acerca de la API la puedes encontrar en:
http://msdn.microsoft.com/en-us/library/ff976316(VS.85).aspx
function IconOverlay(icono,tooltip) {
try {
if (window.external.msIsSiteMode()) {
window.external.msSiteModeClearIconOverlay();
window.external.msSiteModeSetIconOverlay('icons/' + icono + '.ico',
tooltip);
}
} catch (ex) {
alert("Debes tener IE9 Instalado");
}
}
Como vez, revisamos si el sitio esta anclado , luego limpiamos los íconos, para así setear el ícono y el Tooltip asociado. La llamada la hacemos en el HTML
<a onclick="IconOverlay('Error','Error en la Aplicación');"
href="#">ERROR</a><br />
<a onclick="IconOverlay('Warn','Alerta en la Aplicación');"
href="#">WARNING</a><br />
<a onclick="IconOverlay('Ok','Todo OK');" href="#">OK</a>
Y eso es todo amigos!, con esto ya puedes indicarle al usuario una mediante una señal sobre el estado de algún proceso sin que el usuario tenga que restaurar o maximizar la página.
Si estás interesado en tumbnails icos, puedes ver este artículo que hice:
http://geeks.ms/blogs/gperez/archive/2010/11/16/tutorial-r-225-pido-crea-tus-propios-thumbnails-icons-en-ie9.aspx
Espero que te sirva!
Saludos,