Este artículo forma parte de una serie sobre Internet Explorer para explicar el nuevo modo de anclado.
– Internet Explorer 9 en Modo Anclado
– Utilizando la Jumplist de IE9
– Creando ThumbBar Buttons de IE9
– Añadiendo Overlay Icons de IE9
Los Overlay Icons son unos iconos utilizados como sistema de notificaciones, que permiten mostrar eventos ocurridos o estados de los usuarios en nuestro sitio web. Las notificaciones aparecerán en forma de iconos superpuestos al icono de nuestra aplicación. De esta manera llamaremos la atención del usuario aunque este se encuentre visualizando otra aplicación.
El ejemplo más común para explicar los Overlay Icons son los iconos de notificación utilizados en los programas de correo. En estos programas aparece un pequeño icono sobre el icono de la barra de tareas para avisarnos de que tenemos correo sin leer.
De la misma forma podemos crear estos iconos de notificación con los eventos de nuestro sitio web, por ejemplo si alguien nos ha hablado o enviado un mensaje, si se ha publicado un nuevo artículo o si el evento que estábamos esperando para visualizar online ha empezado.
Como es lógico sólo podremos tener un icono a la vez, es decir, que si añadimos uno nuevo sobrescribiremos el anterior.
Para añadirlo a nuestra página sólo necesitamos definirlo.
window.external.msSiteModeSetIconOverlay(‘/images/Alarme.ico’, ‘Alarma’);
Y para borrarlo llamaremos al método:
window.external.msSiteModeClearIconOverlay();
El código resultante sería similar al siguiente:
1: <body onload="onLoad()">
2:
3: <script type="text/javascript">
4: function onLoad() {
5: try {
6: if (window.external.msIsSiteMode()) {
7:
8: // Overlay Icon
9: window.external.msSiteModeClearIconOverlay();
10: window.external.msSiteModeSetIconOverlay('/images/Alarme.ico', 'Alarma');
11:
12: }
13: catch (ex) {
14: // Site Mode not supported.
15: alert("Instala IE9.");
16: }
17: }
18: </script>
Si tenéis cualquier duda no os cortéis en preguntar.
Más información en:
– La web de MSDN
– Ejemplos
– Más en http://www.beautyoftheweb.com/
Como ya comentamos en el artículo anterior de Discoverability , las nuevas características