{"id":156,"date":"2009-08-27T17:12:11","date_gmt":"2009-08-27T15:12:11","guid":{"rendered":"http:\/\/www.calvert.ch\/maurice\/?p=156"},"modified":"2012-08-13T22:19:58","modified_gmt":"2012-08-13T20:19:58","slug":"displaying-images-using-the-res-protocol-from-a-ie-bho","status":"publish","type":"post","link":"https:\/\/www.calvert.ch\/maurice\/2009\/08\/27\/displaying-images-using-the-res-protocol-from-a-ie-bho\/","title":{"rendered":"Displaying images using the RES: protocol from a IE BHO"},"content":{"rendered":"<p>Problem: You&#8217;re using Visual Studio to write a Browser Helper Object for Internet<br \/>\nExplorer and you want to add some images to the web page being displayed.<\/p>\n<p>Here is an example, taken from my <a href=\"http:\/\/www.calvert.ch\/affine\">Affine addin<\/a>. The two images I insert are shown by the arrow:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-161\" style=\"border:1px solid\" src=\"http:\/\/www.calvert.ch\/maurice\/files\/2009\/08\/ss11.jpg\" alt=\"Affine in action\" width=\"496\" height=\"201\" srcset=\"https:\/\/www.calvert.ch\/maurice\/files\/2009\/08\/ss11.jpg 496w, https:\/\/www.calvert.ch\/maurice\/files\/2009\/08\/ss11-300x121.jpg 300w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/p>\n<p>Finding out how to do this is trickier than expected, so here&#8217;s the recipe:<\/p>\n<ol>\n<li>Import the images into the project and create a .RC file which identifies them:<br \/>\n<blockquote><p>affinehide.bmp bitmap &#034;affinehide.bmp&#034;<br \/>\naffinefade.bmp bitmap &#034;affinefade.bmp&#034;<\/p><\/blockquote>\n<p>I called this file images.rc in the images directory in my project.<\/li>\n<li>You&#8217;ll need RC.EXE, the resource compiler, which is in the Windows SDK. The<br \/>\n2008 version for .NET 3.5 is <a href=\"http:\/\/www.microsoft.com\/downloads\/details.aspx?FamilyID=53F9CBB4-B4AF-4CF2-BFE5-260CFB90F7C3&amp;displaylang=en\">here<\/a><\/li>\n<li>In your setup project&#8217;s, set the prebuild event to<br \/>\n<blockquote><p>&#034;D:Affinerc.exe&#034; \/r &#034;d:affineimagesimages.rc&#034;<\/p><\/blockquote>\n<p>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.<\/li>\n<li>Open your project&#8217;s .VBPROJ file and insert the three red lines shown:<br \/>\n<blockquote><p>&lt;?xml version=&#8221;1.0&#8243; encoding=&#034;utf-8&#034;?&gt;<br \/>\n&lt;Project DefaultTargets=&#034;Build&#034;<br \/>\nxmlns=&#034;http:\/\/schemas.microsoft.com\/developer\/msbuild\/2003&#034;<br \/>\nToolsVersion=&#034;3.5&#034;&gt;<span style=\"color:red;font-weight:bold\"><br \/>\n&lt;PropertyGroup&gt;<br \/>\n&lt;Win32Resource&gt;imagesimages.res&lt;\/Win32Resource&gt;<br \/>\n&lt;\/PropertyGroup&gt;<\/span><br \/>\n&lt;PropertyGroup&gt;<br \/>\n&lt;Configuration Condition=&#034; &#039;$(Configuration)&#039; == &#039;&#039; &#034;&gt;Debug&lt;\/Configuration&gt;\n<\/p><\/blockquote>\n<p>Thanks to <a href=\"http:\/\/blogs.infosupport.com\/blogs\/wouterv\/\">Wouter van Vugt<\/a> for this!<\/li>\n<li>The HTML to insert the images is straightforward:<br \/>\n<blockquote><p>&lt;img src=&#034;res:\/\/affine.dll\/#2\/affinehide.bmp&#034;<\/p><\/blockquote>\n<p>where #2 means that the embedded object is an image<br \/>\nAssuming this string is stored in the variable &#034;buttonhtml&#034; then the code to insert the button on the page is<\/p>\n<blockquote><p>a.insertAdjacentHTML(&amp;#34afterEnd&amp;#34, buttonhtml)<\/p><\/blockquote>\n<\/li>\n<li>Now for the events. You need an event handler for the DHTML event itself:<br \/>\n<blockquote><p>\nImports mshtml<br \/>\nPublic Delegate Sub DHTMLEvent(ByVal e As IHTMLEventObj)<br \/>\n _<br \/>\nPublic Class DHTMLEventHandler<br \/>\n    Public Handler As DHTMLEvent<br \/>\n    Private Document As mshtml.IHTMLDocument<br \/>\n    Public Sub New(ByVal doc As mshtml.IHTMLDocument)<br \/>\n        Me.Document = doc<br \/>\n    End Sub<br \/>\n     _<br \/>\n    Public Sub [Call]()<br \/>\n        Handler(CType(Document.parentWindow.event, mshtml.IHTMLEventObj))<br \/>\n    End Sub<br \/>\nEnd Class<\/p><\/blockquote>\n<p>Thanks to <a href=\"http:\/\/www.west-wind.com\/Weblog\/posts\/393.aspx\">Rick Strahl<\/a><\/li>\n<li>A handler which the above will call, to actually deal with the event:<br \/>\n<blockquote><p>\nImports mshtml<br \/>\nModule BrowserEventHandler_<br \/>\n    Public Sub BrowserEventHandler(ByVal e As mshtml.IHTMLEventObj)<br \/>\n        Try<br \/>\n            If e.type = &#034;click&#034;&#8221; AndAlso e.srcElement.tagName = &#034;IMG&#034; Then<br \/>\n&#8230;<\/p><\/blockquote>\n<li>and finally tghe code to add in in your DocumentComplete event:<br \/>\n<blockquote><p>\nDim Handler As DHTMLEventHandler = New DHTMLEventHandler(doc)<br \/>\nHandler.Handler = AddressOf BrowserEventHandler<br \/>\ndoc.onclick = Handler<\/p><\/blockquote>\n<\/li>\n<\/ol>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem: You&#8217;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 <a href='https:\/\/www.calvert.ch\/maurice\/2009\/08\/27\/displaying-images-using-the-res-protocol-from-a-ie-bho\/' class='excerpt-more'>[&#8230;]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47,11],"tags":[15,25],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-programming","category-technology","tag-addin","tag-ie","category-47-id","category-11-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":2,"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/posts\/156\/revisions\/607"}],"wp:attachment":[{"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.calvert.ch\/maurice\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}