Displaying images using the RES: protocol from a IE BHO

Problem: You’re using Visual Studio to write a Browser Helper Object for Internet
Explorer and you want to add some images to the web page being displayed.

Here is an example, taken from my Affine addin. The two images I insert are shown by the arrow:

Finding out how to do this is trickier than expected, so here’s the recipe:

1. Import the images into the project and create a .RC file which identifies them:
   

   affinehide.bmp bitmap "affinehide.bmp"
   affinefade.bmp bitmap "affinefade.bmp"

   I called this file images.rc in the images directory in my project.

2. You’ll need RC.EXE, the resource compiler, which is in the Windows SDK. The
   2008 version for .NET 3.5 is here
3. In your setup project’s, set the prebuild event to
   

   "D:Affinerc.exe" /r "d:affineimagesimages.rc"

   I copied RC.exe into my project directory because I sometimes work on a 64-bit box, where Program Files becomes Program Files (X86). Adjust the paths to suit your installation.

4. Open your project’s .VBPROJ file and insert the three red lines shown:
   

   <?xml version=”1.0″ encoding="utf-8"?>
   <Project DefaultTargets="Build"
   xmlns="http://schemas.microsoft.com/developer/msbuild/2003"
   ToolsVersion="3.5">
   <PropertyGroup>
   <Win32Resource>imagesimages.res</Win32Resource>
   </PropertyGroup>
   <PropertyGroup>
   <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>

   Thanks to Wouter van Vugt for this!

5. The HTML to insert the images is straightforward:
   

   <img src="res://affine.dll/#2/affinehide.bmp"

   where #2 means that the embedded object is an image
   Assuming this string is stored in the variable "buttonhtml" then the code to insert the button on the page is

   a.insertAdjacentHTML(&#34afterEnd&#34, buttonhtml)

6. Now for the events. You need an event handler for the DHTML event itself:
   

   Imports mshtml
   Public Delegate Sub DHTMLEvent(ByVal e As IHTMLEventObj)
   _
   Public Class DHTMLEventHandler
   Public Handler As DHTMLEvent
   Private Document As mshtml.IHTMLDocument
   Public Sub New(ByVal doc As mshtml.IHTMLDocument)
   Me.Document = doc
   End Sub
   _
   Public Sub [Call]()
   Handler(CType(Document.parentWindow.event, mshtml.IHTMLEventObj))
   End Sub
   End Class

   Thanks to Rick Strahl

7. A handler which the above will call, to actually deal with the event:
   

   Imports mshtml
   Module BrowserEventHandler_
   Public Sub BrowserEventHandler(ByVal e As mshtml.IHTMLEventObj)
   Try
   If e.type = "click"” AndAlso e.srcElement.tagName = "IMG" Then
   …

8. and finally tghe code to add in in your DocumentComplete event:
   

   Dim Handler As DHTMLEventHandler = New DHTMLEventHandler(doc)
   Handler.Handler = AddressOf BrowserEventHandler
   doc.onclick = Handler

Happy coding!