Displaying Overlay IconsWindows applications can communicate notifications and status to users by displaying an overlay icon on top of the application’s taskbar button. The
msSiteModeSetIconOverlay method adds an icon overlay to the pinned site’s taskbar button. Overlay icons help draw attention to a website when the view to the pinned site’s window is blocked, as when the browser window is minimized or blocked by another window. Use overlay icons to supply important, long-standing status or notifications such as network status, online status, or new mail. Remember that presenting users with constantly changing overlays or animations creates a negative user experience.
Windows displays overlay icons in the lower-right corner of the taskbar button; however, the taskbar must be in the default large icon mode to display overlay icons. Overlay icons are not visible when the website is not running or when the website is not running as a pinned site. Overlay icons can be displayed from any webpage in the same domain. In addition, a website can apply multiple overlay icons without having to clear them first. However, when an overlay icon is cleared, Windows removes the icons starting from the most recently added. This implies that the clearing order is such that the last icon displayed is the first one removed.
The following screen shot shows how Outlook Web Access uses the overlay icon of a bell to notify the user that it is time for an appointment.
Figure 9: An overlay icon in Outlook Web AccessThe following code example uses the
msSiteModeSetIconOverlay method to add an overlay icon,
overlay1.ico, on the taskbar button and provide a tooltip with the string “Overlay 1”.
window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Overlay 1') ;
Remove the overlay icon by calling the msSiteModeClearIconOverlay method.
window.external.msSiteModeClearIconOverlay() ;
source:msdn.microsoft.com