HTA Menu Rollover Effects

jeffdchapman

HTA Menu Rollover Effects

Visual Studio30
I'm trying to make my menu format effects "stick" when selected. Below is a

snipplet of my code that illustrates. The 2 menu choices use the onmouseover

and onmouseout properties to achieve the roll over effect which is correct.

Each menu choice uses the ChangeMenu() sub function to highlight the menu

selection of "Hot" when clicked. I also provided a button which demostrates

my problem.

If you select either menu option or the button, the sub ChangeMenu() fires

and changes the background color of the "Hot" menu choice.

My problems are:

1. My new highlighted background color of the "Hot" menu choice disappears

if I move out of it's hover area. I'd like to make the highlight effect

remain while keeping the roll over effect.

2. My sub ChangeMenu() does change the background color, but my code doesn't

change the font color of the selection and trying the bold the text causes

an error if I uncomment that line.

Questions:

1. Given my example, is it possible to have rollover menus like mine within

a HTA and also highlight or make menu selections "stick" when selected?

2. If so, how can I change the style properties in my sub ChangeMenu() so

that the text color and weight change?

HTA CODE ************

<html>

<head>

<hta:application

ID='myApp'

applicationName='Change Menu'

border="dialog"

scroll=no

showInTaskBar=yes

contextMenu=no

sysMenu=yes

Quote

<title>Change Menu</title>

</head>

<body>

<table border="0" width="450">

<tr>

<td width=150 rowspan="2" valign="top">

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr><td id="oDIV1"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick=ChangeMenu() href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Hot</a></td></tr>

<tr><td id="oDIV2"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick=ChangeMenu() href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Cold</a></td></tr>

</table>

</td>

<td width=300><input type="button" value="Change Menu"

onclick="ChangeMenu()" name="ChangeMenu"></td>

</tr>

<tr><td width=300> </td>

</tr>

</table>

</body>

</html>

<script language="vbscript">

Sub ChangeMenu()

oDIV1.style.backgroundColor="#d6d5b7"

oDIV1.style.color="#ffffff"

'oDIV2.style.font-weight="bold"

oDIV2.style.backgroundColor="#efefde"

End Sub

</script>

-

Babu

Registered User

Tue Aug 01 04:28:14 CDT 2006

Re:HTA Menu Rollover Effects

Hi,

Is this what you want?

<html>

<head>

<hta:application

ID='myApp'

applicationName='Change Menu'

border="dialog"

scroll=no

showInTaskBar=yes

contextMenu=no

sysMenu=yes

Quote

<title>Change Menu</title>

</head>

<body>

<table border="0" width="450">

<tr>

<td width=150 rowspan="2" valign="top">

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr><td id="oDIV1"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.children[0].style.color='3f3f3f';" xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick="oDIV1.style.backgroundColor='#d6d5b7'" href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Hot</a></td></tr>

<tr><td id="oDIV2"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.children[0].style.color='3f3f3f';" xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick="oDIV2.style.backgroundColor='#d6d5b7'" href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Cold</a></td></tr>

</table>

</td>

<td width=300><input type="button" value="Change Menu"

onclick="ChangeMenu()" name="ChangeMenu"></td>

</tr>

<tr><td width=300> </td>

</tr>

</table>

</body>

</html>

<script language="vbscript">

Sub ChangeMenu()

oDIV1.style.backgroundColor="#d6d5b7"

oDIV1.style.color="#ffffff"

'oDIV2.style.font-weight="bold"

oDIV2.style.backgroundColor="#efefde"

End Sub

</script>

rgds

babu

on 01/08/2006, scott supposed :

Quote

I'm trying to make my menu format effects "stick" when selected. Below is a

snipplet of my code that illustrates. The 2 menu choices use the onmouseover

and onmouseout properties to achieve the roll over effect which is correct.

Each menu choice uses the ChangeMenu() sub function to highlight the menu

selection of "Hot" when clicked. I also provided a button which demostrates

my problem.

If you select either menu option or the button, the sub ChangeMenu() fires

and changes the background color of the "Hot" menu choice.

My problems are:

1. My new highlighted background color of the "Hot" menu choice disappears if

I move out of it's hover area. I'd like to make the highlight effect remain

while keeping the roll over effect.

2. My sub ChangeMenu() does change the background color, but my code doesn't

change the font color of the selection and trying the bold the text causes an

error if I uncomment that line.

Questions:

1. Given my example, is it possible to have rollover menus like mine within a

HTA and also highlight or make menu selections "stick" when selected?

2. If so, how can I change the style properties in my sub ChangeMenu() so

that the text color and weight change?

HTA CODE ************

<html>

<head>

<hta:application

ID='myApp'

applicationName='Change Menu'

border="dialog"

scroll=no

showInTaskBar=yes

contextMenu=no

sysMenu=yes

>

<title>Change Menu</title>

</head>

<body>

<table border="0" width="450">

<tr>

<td width=150 rowspan="2" valign="top">

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr><td id="oDIV1"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick=ChangeMenu() href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Hot</a></td></tr>

<tr><td id="oDIV2"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick=ChangeMenu() href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Cold</a></td></tr>

</table>

</td>

<td width=300><input type="button" value="Change Menu"

onclick="ChangeMenu()" name="ChangeMenu"></td>

</tr>

<tr><td width=300> </td>

</tr>

</table>

</body>

</html>

<script language="vbscript">

Sub ChangeMenu()

oDIV1.style.backgroundColor="#d6d5b7"

oDIV1.style.color="#ffffff"

'oDIV2.style.font-weight="bold"

oDIV2.style.backgroundColor="#efefde"

End Sub

</script>

Scott

Registered User

Tue Aug 01 10:40:50 CDT 2006

Re:HTA Menu Rollover Effects

Yes, but how could I also change the font-weight to bold and the color of

the font to red? I tried modifying your method, but couldn't get the

style.color or the style.fontweight properties to change the effects.

Ideally, the onlick event would

1. change background color

2. change fontweight to bold

3. change fontcolor to red

"Babu VT" <babuvt@nospam.nospam>wrote in message

Quote

Hi,

Is this what you want?

<html>

<head>

<hta:application

ID='myApp'

applicationName='Change Menu'

border="dialog"

scroll=no

showInTaskBar=yes

contextMenu=no

sysMenu=yes

>

<title>Change Menu</title>

</head>

<body>

<table border="0" width="450">

<tr>

<td width=150 rowspan="2" valign="top">

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr><td id="oDIV1"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.children[0].style.color='3f3f3f';" xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick="oDIV1.style.backgroundColor='#d6d5b7'" href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Hot</a></td></tr>

<tr><td id="oDIV2"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.children[0].style.color='3f3f3f';" xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick="oDIV2.style.backgroundColor='#d6d5b7'" href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Cold</a></td></tr>

</table>

</td>

<td width=300><input type="button" value="Change Menu"

onclick="ChangeMenu()" name="ChangeMenu"></td>

</tr>

<tr><td width=300> </td>

</tr>

</table>

</body>

</html>

<script language="vbscript">

Sub ChangeMenu()

oDIV1.style.backgroundColor="#d6d5b7"

oDIV1.style.color="#ffffff"

'oDIV2.style.font-weight="bold"

oDIV2.style.backgroundColor="#efefde"

End Sub

</script>

rgds

babu

on 01/08/2006, scott supposed :

>I'm trying to make my menu format effects "stick" when selected. Below is

>a snipplet of my code that illustrates. The 2 menu choices use the

>onmouseover and onmouseout properties to achieve the roll over effect

>which is correct. Each menu choice uses the ChangeMenu() sub function to

>highlight the menu selection of "Hot" when clicked. I also provided a

>button which demostrates my problem.

>

>If you select either menu option or the button, the sub ChangeMenu()

>fires and changes the background color of the "Hot" menu choice.

>

>My problems are:

>

>1. My new highlighted background color of the "Hot" menu choice

>disappears if I move out of it's hover area. I'd like to make the

>highlight effect remain while keeping the roll over effect.

>2. My sub ChangeMenu() does change the background color, but my code

>doesn't change the font color of the selection and trying the bold the

>text causes an error if I uncomment that line.

>

>Questions:

>1. Given my example, is it possible to have rollover menus like mine

>within a HTA and also highlight or make menu selections "stick" when

>selected?

>2. If so, how can I change the style properties in my sub ChangeMenu() so

>that the text color and weight change?

>

>HTA CODE ************

>

><html>

><head>

><hta:application

>ID='myApp'

>applicationName='Change Menu'

>border="dialog"

>scroll=no

>showInTaskBar=yes

>contextMenu=no

>sysMenu=yes

>>

><title>Change Menu</title>

></head>

>

><body>

><table border="0" width="450">

><tr>

><td width=150 rowspan="2" valign="top">

><table border="0" width="100%" cellspacing="0" cellpadding="0">

><tr><td id="oDIV1"

>onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

>onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

>xnowrap

>style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

>solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

><a onclick=ChangeMenu() href="#"

>style="font-size:8pt;text-decoration:none;margin-left:

>7;color:3f3f3f;font-family:verdana,arial,sans-serif">

>Hot</a></td></tr>

><tr><td id="oDIV2"

>onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

>onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

>xnowrap

>style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

>solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

><a onclick=ChangeMenu() href="#"

>style="font-size:8pt;text-decoration:none;margin-left:

>7;color:3f3f3f;font-family:verdana,arial,sans-serif">

>Cold</a></td></tr>

></table>

></td>

><td width=300><input type="button" value="Change Menu"

>onclick="ChangeMenu()" name="ChangeMenu"></td>

></tr>

><tr><td width=300> </td>

></tr>

></table>

></body>

>

></html>

>

>

><script language="vbscript">

>

>Sub ChangeMenu()

>oDIV1.style.backgroundColor="#d6d5b7"

>oDIV1.style.color="#ffffff"

>'oDIV2.style.font-weight="bold"

>

>oDIV2.style.backgroundColor="#efefde"

>

>End Sub

>

></script>

Scott

Registered User

Tue Aug 01 12:37:50 CDT 2006

Re:HTA Menu Rollover Effects

i found a fix thanks.

"Babu VT" <babuvt@nospam.nospam>wrote in message

Quote

Hi,

Is this what you want?

<html>

<head>

<hta:application

ID='myApp'

applicationName='Change Menu'

border="dialog"

scroll=no

showInTaskBar=yes

contextMenu=no

sysMenu=yes

>

<title>Change Menu</title>

</head>

<body>

<table border="0" width="450">

<tr>

<td width=150 rowspan="2" valign="top">

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr><td id="oDIV1"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.children[0].style.color='3f3f3f';" xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick="oDIV1.style.backgroundColor='#d6d5b7'" href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Hot</a></td></tr>

<tr><td id="oDIV2"

onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

onmouseout="this.children[0].style.color='3f3f3f';" xnowrap

style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

<a onclick="oDIV2.style.backgroundColor='#d6d5b7'" href="#"

style="font-size:8pt;text-decoration:none;margin-left:

7;color:3f3f3f;font-family:verdana,arial,sans-serif">

Cold</a></td></tr>

</table>

</td>

<td width=300><input type="button" value="Change Menu"

onclick="ChangeMenu()" name="ChangeMenu"></td>

</tr>

<tr><td width=300> </td>

</tr>

</table>

</body>

</html>

<script language="vbscript">

Sub ChangeMenu()

oDIV1.style.backgroundColor="#d6d5b7"

oDIV1.style.color="#ffffff"

'oDIV2.style.font-weight="bold"

oDIV2.style.backgroundColor="#efefde"

End Sub

</script>

rgds

babu

on 01/08/2006, scott supposed :

>I'm trying to make my menu format effects "stick" when selected. Below is

>a snipplet of my code that illustrates. The 2 menu choices use the

>onmouseover and onmouseout properties to achieve the roll over effect

>which is correct. Each menu choice uses the ChangeMenu() sub function to

>highlight the menu selection of "Hot" when clicked. I also provided a

>button which demostrates my problem.

>

>If you select either menu option or the button, the sub ChangeMenu()

>fires and changes the background color of the "Hot" menu choice.

>

>My problems are:

>

>1. My new highlighted background color of the "Hot" menu choice

>disappears if I move out of it's hover area. I'd like to make the

>highlight effect remain while keeping the roll over effect.

>2. My sub ChangeMenu() does change the background color, but my code

>doesn't change the font color of the selection and trying the bold the

>text causes an error if I uncomment that line.

>

>Questions:

>1. Given my example, is it possible to have rollover menus like mine

>within a HTA and also highlight or make menu selections "stick" when

>selected?

>2. If so, how can I change the style properties in my sub ChangeMenu() so

>that the text color and weight change?

>

>HTA CODE ************

>

><html>

><head>

><hta:application

>ID='myApp'

>applicationName='Change Menu'

>border="dialog"

>scroll=no

>showInTaskBar=yes

>contextMenu=no

>sysMenu=yes

>>

><title>Change Menu</title>

></head>

>

><body>

><table border="0" width="450">

><tr>

><td width=150 rowspan="2" valign="top">

><table border="0" width="100%" cellspacing="0" cellpadding="0">

><tr><td id="oDIV1"

>onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

>onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

>xnowrap

>style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

>solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

><a onclick=ChangeMenu() href="#"

>style="font-size:8pt;text-decoration:none;margin-left:

>7;color:3f3f3f;font-family:verdana,arial,sans-serif">

>Hot</a></td></tr>

><tr><td id="oDIV2"

>onmouseover="this.style.backgroundColor='#efefde';javascript:this.children[0].style.color='#990000';"

>onmouseout="this.style.backgroundColor='#efefde';this.children[0].style.color='3f3f3f';"

>xnowrap

>style="font-color:3f3f3f;font-weight:normal;background-color:#efefde;border:0px

>solid #efefde;text-align:;padding-left:3px;padding-right:0px;">

><a onclick=ChangeMenu() href="#"

>style="font-size:8pt;text-decoration:none;margin-left:

>7;color:3f3f3f;font-family:verdana,arial,sans-serif">

>Cold</a></td></tr>

></table>

></td>

><td width=300><input type="button" value="Change Menu"

>onclick="ChangeMenu()" name="ChangeMenu"></td>

></tr>

><tr><td width=300> </td>

></tr>

></table>

></body>

>

></html>

>

>

><script language="vbscript">

>

>Sub ChangeMenu()

>oDIV1.style.backgroundColor="#d6d5b7"

>oDIV1.style.color="#ffffff"

>'oDIV2.style.font-weight="bold"

>

>oDIV2.style.backgroundColor="#efefde"

>

>End Sub

>

></script>