|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Visual Basic 6 Black Book
Adding Images To DHTML PagesThe Aesthetic Design Department is calling again. Your new Web page is fine, but what about adding images? Can you do that? you ask. Sure, they say, that’s half of what the Web is all about. To add an image to a DHTML page in the Visual Basic DHTML Page Designer, you click the Image tool, which is the sixth tool down on the left in the Page Designer toolbox in Figure 21.5. Doing so adds an empty image to the page; move that image to the position you want and size it appropriately.
To add an image to this DHTML control, set its src property (the name of this and other DHTML control properties are intended to match the corresponding HTML tag attributes; this property matches the <IMG> tag’s src attribute). In this case, we set the src property to an image on disk: file:/// C:/vbbb/dhtml/image1.bmp, although of course you can use a URL here. Here’s how the image is added to the HTML of our Web page—note that the Page Designer sets the <IMG> tag’s position attribute to absolute, which is how it can let you position the image anywhere you want it in the Web page: <HTML> <HEAD> <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type> <META content=‘"MSHTML 4.72.3007.2"’ name=GENERATOR> </HEAD> <BODY> <P>Here’s some text!</P> <P>Here’s an image:</P> <P> </P> <P><IMG id=Image1 name=Image1 src="c:\vbbb\dhtml\image1.bmp" style="LEFT: 40px; POSITION: absolute; TOP: 107px; Z-INDEX: 100"> </P> Because we’re using dynamic HTML, the image element is an active element: you can click it, for example, and add code to react to that click like this, where we display a message box indicating that the user clicked the image:
Private Function Image1_onclick() As Boolean
MsgBox "You clicked the image!"
End Function
Adding HTML Controls To DHTML PagesUsing the Visual Basic DHTML Page Designer, you can add the standard HTML controls to a Web page: buttons, Submit buttons, Reset buttons, text fields, text areas, password fields, option buttons, checkboxes, select controls, file upload controls, hidden fields, and lists. As you can see, the whole HTML control set is here, and you can use these controls with Visual Basic just as you would in a standard form if you create the DLL file for your DHTML page (see “Creating DHTML Pages” earlier in this chapter), or with a scripting language such as VBScript or JavaScript. Adding these controls to your Web page is just like adding them to a standard Visual Basic project. You just use the control’s tool in the Page Designer’s toolbox in the same way you’d use a tool in the Visual Basic toolbox. For example, we’ve added a Submit button to the DHTML Web page in Figure 21.6.
The code that the Page Designer adds to our Web page for the Submit button looks like this: <HTML> <HEAD> <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type> <META content='"MSHTML 4.72.3007.2"' name=GENERATOR> </HEAD> <BODY> <P>Here’s some text!</P> <P>Here’s an image:</P> <P> </P> <P><IMG id=Image1 name=Image1 src="c:\vbbb\dhtml\image1.bmp" style="LEFT: 40px; POSITION: absolute; TOP: 107px; Z-INDEX: 100"> </P> <P> </P> <P>Here’s a Submit button: <INPUT id=SubmitButton1 name=SubmitButton1 style="LEFT: 17px; POSITION: absolute; TOP: 170px; Z-INDEX: 103" type=submit value=SubmitButton1> </P> To add code to the Submit button, you double-click it in the Page Designer just as you would when creating a standard Visual Basic. Doing so adds an event handler procedure to the page’s code: Private Function SubmitButton1_onclick() As Boolean End Function For example, here’s how we display a message box when the user clicks the Submit button:
Private Function SubmitButton1_onclick() As Boolean
MsgBox "You clicked the Submit button!"
End Function
Adding ActiveX Controls To DHTML PagesYou can add ActiveX controls to DHTML pages just as you can to standard Visual Basic projects—just use the Project|Components menu item to open the Components dialog box and select the ActiveX control you want to add. Then just add that control to the Web page as you would in any standard Visual Basic project. For example, we add a standard HTML button and a progress bar ActiveX control to the Web page, as shown in Figure 21.7.
Here’s the HTML code that the Page Designer adds to our Web page when we add those two new controls, the progress bar and the HTML button:
<P>Here’s an ActiveX control:</P>
<OBJECT classid=CLSID:35053A22-8589-11D1-B16A-00C0F0283628 height=24
id=ProgressBar1
style="HEIGHT: 24px; LEFT: 127px; POSITION: absolute; TOP: 248px; WIDTH:
100px; Z-INDEX: 101"
width=100>
<PARAM NAME="_ExtentX" VALUE=2646>
<PARAM NAME="_ExtentY" VALUE="635">
<PARAM NAME="_Version" VALUE="393216">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="Appearance" VALUE="1">
<PARAM NAME="MousePointer" VALUE="0">
<PARAM NAME="Enabled" VALUE="1">
<PARAM NAME="OLEDropMode" VALUE="0">
<PARAM NAME="Min" VALUE="0">
<PARAM NAME="Max" VALUE="100">
<PARAM NAME="Orientation" VALUE="0">
<PARAM NAME="Scrolling" VALUE="0">
</OBJECT>
<INPUT id=Button1 name=Button1 style="LEFT: 26px; POSITION: absolute; TOP:
248px; Z-INDEX: 102" type=button value="Click Me!">
Now we’re free to use the HTML button to set the progress bar’s value like this, just as you would in a standard Visual Basic project:
Private Function Button1_onclick() As Boolean
ProgressBar1.Value = 20
End Function
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited.
|
)
)
)
){kind=link}
){kind=link}
){kind=link}