Añadiendo Overlay Icons de IE9

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.

image

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.

image

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

http://msdn.com/ie

– Ejemplos

http://www.softonic.com

http://www.amazon.com

http://www.facebook.com

– Más en http://www.beautyoftheweb.com/

Un comentario en “Añadiendo Overlay Icons de IE9”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *