Is it possible to "call" or use a style in a DIV onmouseover/onmouseout?

For example:

<DIV ID="SC1" onmouseover=<MY_STYLE_1> onmouseout=<MY_STYLE_2>
Style="border:1px solid #54BC00;">

If so, how do you reference it? Examples much appreciated...

Thanks

Re: Use a style in onmouseover? by Ayush

Ayush
Sat May 12 21:22:33 CDT 2007

[XP]s message :
> Is it possible to "call" or use a style in a DIV onmouseover/onmouseout?
>
> For example:
>
> <DIV ID="SC1" onmouseover=<MY_STYLE_1> onmouseout=<MY_STYLE_2>
> Style="border:1px solid #54BC00;">
>
> If so, how do you reference it? Examples much appreciated...

<DIV ID="SC1"
onmouseover=SC1.style="YOUR STYLES1"
onmouseout=SC1.style="YOUR STYLES2"
Style="border:1px solid #54BC00;">

Re: Use a style in onmouseover? by Evertjan

Evertjan
Sun May 13 04:04:39 CDT 2007

Ayush wrote on 13 mei 2007 in microsoft.public.scripting.vbscript:

> [XP]s message :
>> Is it possible to "call" or use a style in a DIV onmouseover/onmouseout?
>>
>> For example:
>>
>> <DIV ID="SC1" onmouseover=<MY_STYLE_1> onmouseout=<MY_STYLE_2>
>> Style="border:1px solid #54BC00;">
>>
>> If so, how do you reference it? Examples much appreciated...
>
> <DIV ID="SC1"
> onmouseover=SC1.style="YOUR STYLES1"
> onmouseout=SC1.style="YOUR STYLES2"
> Style="border:1px solid #54BC00;">
>


<style type='text/css'>
.mousoverClass {color:red;}
.mousoutClass {color:navy;}
</style>

<div
onmouseover = "this.className='mousoverClass'"
onmouseout = "this.className='mousoutClass'"
class = "mousoutClass"
>
Test me please
</div>


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Re: Use a style in onmouseover? by mayayana

mayayana
Sun May 13 11:08:56 CDT 2007

In addition to the other samples, you can also use
a script sub. Personally I like that method to keep it all in
the header, rather than in local tags, so that I can keep
track of it. So I'll end up with something like:

<HEAD>

<STYLE>
.div1 {color: #000000;}
</STYLE>

<SCRIPT LANGUAGE="VBScript">
Sub div1_onmouseout()
With div1.style
.color = "#FF0000"
.borderColor = "#FFFF00"
End With
End Sub
</SCRIPT>

</HEAD>
<BODY>
<DIV CLASS="div1" ID="div1">
text here
</DIV>

By doing it that way I have all CSS and dynamic scripting
actions in the HEAD section where I can organize them and
edit them easily, and I don't have to worry about unplanned
cascading. (The in-tag styles take precedence over styles
declared in a CSS file or STYLE tag.) But of course it's all
just a matter of taste.


> Is it possible to "call" or use a style in a DIV onmouseover/onmouseout?
>
> For example:
>
> <DIV ID="SC1" onmouseover=<MY_STYLE_1> onmouseout=<MY_STYLE_2>
> Style="border:1px solid #54BC00;">
>
> If so, how do you reference it? Examples much appreciated...
>
> Thanks



Re: Use a style in onmouseover? by Ayush

Ayush
Sun May 13 12:29:55 CDT 2007

[Evertjan.]s message :
>
> <style type='text/css'>
> .mousoverClass {color:red;}
> .mousoutClass {color:navy;}
> </style>
>
> <div
> onmouseover = "this.className='mousoverClass'"
> onmouseout = "this.className='mousoutClass'"
> class = "mousoutClass"
> Test me please
> </div>
>
>

Yes, test it please (this=Not an object, ' = Comment char )


Good Luck, Ayush.
--
XP-Tips [Adjust the vertical space between icons] :
http://www.microsoft.com/windowsxp/using/setup/tips/iconspace.mspx

Re: Use a style in onmouseover? by mayayana

mayayana
Sun May 13 13:15:15 CDT 2007

> Yes, test it please (this=Not an object, ' = Comment char )
>
>

That one was confusing me, too. But it
works. I finally realized that "this" is javascript.
(The combined use of ' and " gave me the clue.)

So XP wasn't aware of the difference and
Evertjian is posting the wrong language. I guess the
confusion is not surprising, since the script type
doesn't need to be named when it's in the tag. We've
wandered off of VBScript into straight DHTML.



Re: Use a style in onmouseover? by Evertjan

Evertjan
Sun May 13 15:58:20 CDT 2007

mayayana wrote on 13 mei 2007 in microsoft.public.scripting.vbscript:

>> Yes, test it please (this=Not an object, ' = Comment char )
>>
>>
>
> That one was confusing me, too. But it
> works. I finally realized that "this" is javascript.
> (The combined use of ' and " gave me the clue.)
>
> So XP wasn't aware of the difference and
> Evertjian is posting the wrong language. I guess the
> confusion is not surprising, since the script type
> doesn't need to be named when it's in the tag. We've
> wandered off of VBScript into straight DHTML.

You are right, I thought I was in a Javascript NG

However, jacvascript is the way to do this "this".

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Re: Use a style in onmouseover? by XP

XP
Mon May 14 08:42:00 CDT 2007

Hi Mayayana,

I like the code style you suggest with the separate Subs in the HEAD section;

In my case, I have nested DIVs and the mouseover/out event never triggers.

THis is similar to the other issue I had with the context menu where we
needed "parent." in front of the call in order for it to work.

I tried using "parent." again like so: <DIV parent.Class="My_Class"> but
this doesn't work...do you have any suggestions? If it is easier, here is a
full example...

<HTML>
<HEAD>
<TITLE>File Encryption Device</title>
<HTA:Application
ID="oEncryptorApp"
SINGLEINSTANCE="Yes"
CAPTION="Yes"
SCROLL="No"
Border="Thin"
BorderStyle="Sunken"
InnerBorder="No"
MinimizeButton="No"
MaximizeButton="No"/>

<Style>
.divGR {color: #000000;}
</style>

<SCRIPT LANGUAGE="VBScript">

Sub divGR_onmouseover()

With divGR.style
.color="BLACK"
.backgroundcolor="#00FF00"
End With
End Sub

Sub divGR_onmouseout()
With divGR.Style
.color="#00FF00"
.backgroundcolor="Black"
End With
End Sub

</script>
</head>

<SCRIPT LANGUAGE="VBScript">

Dim sBegGrad
Dim sEndGrad
Dim oPopup
Set oPopup = window.createpopup

Sub Window_OnLoad
Self.ResizeTo 425,360

End Sub

Function ContextMenu
lefter=window.event.offsetX+10
topper=window.event.offsetY+10
oPopup.document.body.innerHTML=oContextHTML.innerHTML
oPopup.document.body.style.cursor="hand"
oPopup.document.body.style.fontfamily="VERDANA"
oPopup.document.body.style.fontsize="9pt"
oPopup.document.body.style.color="#60dd49"
oPopup.document.body.Style.padding="1"
oPopup.document.body.style.Backgroundcolor="black"
oPopup.document.body.style.border="2px solid"
oPopup.document.body.style.bordercolor="#0000FF"
oPopup.show lefter, topper, 130, 180, window.document.body
window.event.returnvalue=false
End Function

Sub MenuItem1()

Msgbox "Test click item 1"
End Sub

Sub MenuItem2()

Msgbox "Test click item 2"
End Sub

</Script>

<BODY oncontextmenu="ContextMenu"
STYLE="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,
StartColorStr='#000000', EndColorStr='#0000FF')">

<DIV ID="oContextHTML" Style="display:none;">

<DIV ID="SC1" Class="divGR">
<SPAN onclick="parent.MenuItem1()" language="VBScript">Menu Item 1</span>
</div>

<DIV ID="SC2" Class="divGR">
<SPAN onclick="parent.MenuItem2()" language="VBScript">Menu Item 2</span>
</div>

</Body>

Thanks again for you help...

"mayayana" wrote:

> In addition to the other samples, you can also use
> a script sub. Personally I like that method to keep it all in
> the header, rather than in local tags, so that I can keep
> track of it. So I'll end up with something like:
>
> <HEAD>
>
> <STYLE>
> .div1 {color: #000000;}
> </STYLE>
>
> <SCRIPT LANGUAGE="VBScript">
> Sub div1_onmouseout()
> With div1.style
> .color = "#FF0000"
> .borderColor = "#FFFF00"
> End With
> End Sub
> </SCRIPT>
>
> </HEAD>
> <BODY>
> <DIV CLASS="div1" ID="div1">
> text here
> </DIV>
>
> By doing it that way I have all CSS and dynamic scripting
> actions in the HEAD section where I can organize them and
> edit them easily, and I don't have to worry about unplanned
> cascading. (The in-tag styles take precedence over styles
> declared in a CSS file or STYLE tag.) But of course it's all
> just a matter of taste.
>
>
> > Is it possible to "call" or use a style in a DIV onmouseover/onmouseout?
> >
> > For example:
> >
> > <DIV ID="SC1" onmouseover=<MY_STYLE_1> onmouseout=<MY_STYLE_2>
> > Style="border:1px solid #54BC00;">
> >
> > If so, how do you reference it? Examples much appreciated...
> >
> > Thanks
>
>
>

Re: Use a style in onmouseover? by mayayana

mayayana
Mon May 14 09:23:18 CDT 2007


> In my case, I have nested DIVs and the mouseover/out event never triggers.
>
> THis is similar to the other issue I had with the context menu where we
> needed "parent." in front of the call in order for it to work.
>

That looks like it could be quite a can of worms.
If you've got DIVs within DIVs, and SPANs within
those, you'll just have to test them to see what IE
thinks you're hovering over. I've never tried such
extensive hovering code, and SPAN and DIV are
not really meant for that kind of usage, so it might
get tricky. If you can't get the formatting tags to work
right you might try a table inside the DIV; then code
to the TD.

In the case you posted, you're writing the sub for the
class:

Sub divGR_onmouseout()

But VBS knows nothing about your CSS designations.
You need to use the ID for that. Your ID is here:

<DIV ID="SC1" Class="divGR">

So the sub needs to be:

Sub SC1_onmouseout()

Otherwise, what's the ID for? Why did you give
an ID to each DIV if it's not serving any purpose?
Nothing has to have an ID. It's only of value if you're
going to use it for scripting. It's kind of confusing, though,
because the design of this stuff was not very well
thought out, in many cases.
ID can actually be for scripting *and/or* for specific
CSS designations using #. In other words, ID is a unique
ID for any purposes where that's needed. You can use
something like:

<Style>
#SC1 {color: #000000;}
</style>

That will set the style for the element that has ID of
"SC1". In that case you can use the same ID in
your script sub. But ID is not often relevant in CSS
because it's intended to be used on a single, unique
element. Usually you'd be using classes to set your
graphical style and then IDs to script dynamic changes
to specific elements.

Class is *only* for CSS. So you don't use that in script.
(As Evertjian pointed out, there is an IE DOM property
className, but I can't think of a case where that would
be useful, since className would be used to change
or retrieve the class of an element. If you find yourself
doing that then you're probably in a real mess. CSS and
script are confusing and complex enough already without
blending them into a changing landscape. :)

If I may say so, I think you need to study both script
and CSS. You seem to be trying to learn by rote, copying
code that you hope will work. But the result is that you're
running into a lot of problems because of javascript
accidentally mixed with VBS, CSS accidentally blended
with script, etc.