65.9K
CodeProject is changing. Read more.
Home

CDHtmlDialog with CSS, JavaScript and images

iTreeSoft
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.72/5 (12 votes)

Dec 29, 2003

1 min read

viewsIcon

222847

downloadIcon

4710

An article on how to use CSS, JavaScript and images in resource with CDHtmlDialog in VC++ .NET

Introduction

This article shows how to use CSS, JavaScript and images in resource with CDHtmlDialog in VC++ .NET. I build this project with VC++ 7.1(VS .NET 2003), and it should also work with VC++ 7.0(VS .NET 2002).

Background

CDHtmlDialog is a new class, in MFC 7.x, that enables dialog to use HTML files as resource.

Steps

For example, if there are lines below in the raw HTML file, 

<SCRIPT src="layout.js" type=text/javascript></SCRIPT>
<link type="text/css" rel="stylesheet" href="classic.css" />
<img src="showit.gif">

To use CSS files, JavaScript files and images in resource, you must convert all links in HTML file to be the resource numbers.

  • Step 1 - Add the 3 files: layout.js, classic.css and showit.gif to the resource of your VC++ 7.x project in a custom resource type named "CUS", for example.
  • Step 2 - Record the 3 resource IDs for the 3 files: IDR_CUS1, IDR_CUS2, IDR_CUS3.
  • Step 3 - Find the 3 resource numbers for the 3 IDs in resource.h 
    #define IDR_CUS1                        131
#define IDR_CUS2                        132
#define IDR_CUS3                        133
  • Step 4 - Modify the lines in HTML file to be: 
    <SCRIPT src="res:/CUS/#131" type=text/javascript></SCRIPT>
<link type="text/css" rel="stylesheet" href="res:/CUS/#132" />
<img src="res:/CUS/#133">

Then your HTML dialog can make use of those three files in the resource of the executable file.

:-) Good luck.

And this is my first article on CodeProject.com.

Welcome to my page iTreeSoft.

History

  • 29 Dec 2003

    • Initial release. :)