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