Sample script for the Layout Control

For the HTML Layout Control we have created two bitmaps, one to represent the Disabled state and another for the Enabled state. We then used the Microsoft Form 2.0 image control and laid the two images directly on top of each other. Using the hotspot control we created a hotspot the same size as the bitmaps and laid this on top of the two bitmaps. Then through script we modified the MouseEnter and MouseExit events for the hotspots, making the Enabled bitmap visible during the MouseEnter event and the Disabled bitmap visible on the MouseExit. To ensure that the bitmaps are viewed correctly the first time, in the OnLoad event we made sure that all the Disabled bitmaps are visible and that all the Enabled bitmaps are not.

<SCRIPT FOR=Layout1 EVENT=OnLoad()>
b1on.Visible = false
b1off.Visible = true
b2on.Visible = false
b2off.Visible = true
b3on.Visible = false
b3off.Visible = true
b4on.Visible = false
b4off.Visible = true
b5on.Visible = false
b5off.Visible = true
</SCRIPT>

Here we have the MouseEnter and MouseExit event functions for the first bitmap. These functions are then repeated for each bitmap thereafter.

<SCRIPT FOR=HotSpot1 EVENT=MouseEnter()>
b1on.Visible = true
b1off.Visible = false
</SCRIPT>

<SCRIPT FOR=HotSpot1 EVENT=MouseExit()>>
b1on.Visible = false
b1off.Visible = true
</SCRIPT>

Script for the MSDN Online ActiveX Navigation Control

Here we set up our two global variables and in the OnLoad event load all the GIFs to cache and display the Disabled GIFs first.

dim Site, Imgdir
Site = "http://" & location.host
Imgdir = Site + "/images/"

Sub window_onLoad()
Ld b1,"button1__off.gif"
Ld b1,"button1__on.gif"
Show b1,"button1__off.gif"

Ld b2,"button2_off.gif"
Ld b2,"button2_on.gif"
Show b2,"button2_off.gif"

Ld b3,"button3_off.gif"
Ld b3,"button3_on.gif"
Show b3,"button3_off.gif"

Ld b4,"button4_off.gif"
Ld b4,"button4_on.gif"
Show b4,"button4_off.gif"

Ld b5,"button5_off.gif"
Ld b5,"button5_on.gif"
Show b5,"button5_off.gif"

end sub

sub Ld (obj, pic)
set lobj = obj
lobj.LoadPictureToCache=Imgdir + pic
end sub

sub Show (obj, pic)
set lobj = obj
lobj.picture=Imgdir + pic
end sub

For the MouseEnter and MouseExit event functions we change the GIFs accordingly. These functions are then repeated for each GIF thereafter.

Sub b1_MouseEnter()
Show b1,"button1__on.gif"
end sub

Sub b1_MouseExit()
show b1,"button1__off.gif"
end sub

Using Dynamic HTML

To use Dynamic HTML we have given each image a unique ID for the <img> tag, for example our ID for button 1 is "b1". We then grouped these images within a <DIV> tag, referencing functions to be called for the OnMouseOver and OnMouseOut events, these functions being enablenavimg() and disablenavimg() accordingly. In these functions we change the value of the src attribute from the Enabled GIF to the Disabled GIF depending on the ID of the srcElement.

<DIV onmouseover="enablenavimg()" onmouseout="disablenavimg()">
<img id=b1 src="button1_off.gif">
   .
   .
   .
<DIV>

For the script functions all we have to do is change the src attribute of the <img> tag accordingly.

sub enablenavimg()
Select Case window.event.srcElement.id
Case "b1"
b1.src="/images/button1_on.gif"
Case "b2"
b2.src="/images/button2_on.gif"
Case "b3"
b3.src="/images/button3_on.gif"
Case "b4"
b4.src="/images/button4_on.gif"
Case "b5"
b5.src="/images/button5_on.gif"
End Select
end sub

sub disablenavimg()
Select Case window.event.srcElement.id
Case "b1"
b1.src="/images/button1_off.gif"
Case "b2"
b2.src="/images/button2_off.gif"
Case "b3"
b3.src="/images/button3_off.gif"
Case "b4"
b4.src="/images/button4_off.gif"
Case "b5"
b5.src="/images/button5_off.gif"
End Select
end sub