Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > DHTML Problem with DIV and OnMouseOver

Reply
Thread Tools

DHTML Problem with DIV and OnMouseOver

 
 
John Smith
Guest
Posts: n/a
 
      12-18-2003
I have a DIV element containing some text. I have onmouseover and on
mouseout events declared. However, the onmouseover event only fires with the
mouse is over the actual text, and not the div as a whole. I have tried
setting the div style to display:block, but it makes no difference. Any
ideas?

<DIV id='divTest' OnMouseOver='changeColor()' OnMouseOut='revertColor()'>
Hello, this is some test text!
</DIV>

javascript:

function changeColor(){
document.all('divTest').style.backgroundColor='red ';
}

function revertColor(){
document.all('divTest').style.backgroundColor='blu e';
}


 
Reply With Quote
 
 
 
 
altamir
Guest
Posts: n/a
 
      12-18-2003
"John Smith" <(E-Mail Removed)> wrote in
newsPjEb.6755$(E-Mail Removed):

> I have a DIV element containing some text. I have onmouseover and on
> mouseout events declared. However, the onmouseover event only fires
> with the mouse is over the actual text, and not the div as a whole. I
> have tried setting the div style to display:block, but it makes no
> difference. Any ideas?


which browser, which version?


> <DIV id='divTest' OnMouseOver='changeColor()'
> OnMouseOut='revertColor()'>
> Hello, this is some test text!
> </DIV>


try

<div onmouseover="this.style.backgroundColor='red'" ... >
....
</div>

> javascript:
>
> function changeColor(){
> document.all('divTest').style.backgroundColor='red ';
> }


document.all is a microsoft idea. it's better to have
document.getElementById('divTest').style.backgroun dColor='red' which is
supported in most of the modern browsers.

--
altamir
 
Reply With Quote
 
 
 
 
John Smith
Guest
Posts: n/a
 
      12-18-2003
Thanks. I'm using IE6. The example I gave actually works fine but my real
code doesn't, and I'm not sure what the difference is. My actual code is:

<div id="chartmenu" class="ContextMenu" style="VISIBILITY:hidden"
ONMOUSEOUT="this.tid = setTimeout('chartmenuhide(event)', 900);"
ONMOUSEOVER="clearTimeout(this.tid);">
<div class="ContextMenuItem" id="ChartMenuItemAdd"
onMouseover="chartmenuhighlight(event)"
onMouseout="chartmenulowlight(event)">
Add to Graph
</div>
</div>

The onMouseover="chartmenuhighlight(event)" only fires when I'm over the
'Add to Graph' text.

"altamir" <(E-Mail Removed)> wrote in message
news:Xns9455C54C1D802alt2003@213.180.128.20...
> "John Smith" <(E-Mail Removed)> wrote in
> newsPjEb.6755$(E-Mail Removed):
>
> > I have a DIV element containing some text. I have onmouseover and on
> > mouseout events declared. However, the onmouseover event only fires
> > with the mouse is over the actual text, and not the div as a whole. I
> > have tried setting the div style to display:block, but it makes no
> > difference. Any ideas?

>
> which browser, which version?
>
>
> > <DIV id='divTest' OnMouseOver='changeColor()'
> > OnMouseOut='revertColor()'>
> > Hello, this is some test text!
> > </DIV>

>
> try
>
> <div onmouseover="this.style.backgroundColor='red'" ... >
> ...
> </div>
>
> > javascript:
> >
> > function changeColor(){
> > document.all('divTest').style.backgroundColor='red ';
> > }

>
> document.all is a microsoft idea. it's better to have
> document.getElementById('divTest').style.backgroun dColor='red' which is
> supported in most of the modern browsers.
>
> --
> altamir



 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      12-18-2003
altamir wrote:

> "John Smith" <(E-Mail Removed)> wrote in
> newsPjEb.6755$(E-Mail Removed):


>> I have a DIV element containing some text. I have onmouseover and on
>> mouseout events declared. However, the onmouseover event only fires
>> with the mouse is over the actual text, and not the div as a whole. I
>> have tried setting the div style to display:block, but it makes no
>> difference. Any ideas?


> which browser, which version?



>> <DIV id='divTest' OnMouseOver='changeColor()'
>> OnMouseOut='revertColor()'>
>> Hello, this is some test text!
>> </DIV>


> try


> <div onmouseover="this.style.backgroundColor='red'" ... >
> ...
> </div>


Works better with just "background".
I tested yours out and got nothing.



>> javascript:
>>
>> function changeColor(){
>> document.all('divTest').style.backgroundColor='red ';
>> }


> document.all is a microsoft idea. it's better to have
> document.getElementById('divTest').style.backgroun dColor='red' which is
> supported in most of the modern browsers.


> --
> altamir



 
Reply With Quote
 
altamir
Guest
Posts: n/a
 
      12-18-2003
"John Smith" <(E-Mail Removed)> wrote in news:WcnEb.6882$031.1449
@fe3.columbus.rr.com:

> Thanks. I'm using IE6. The example I gave actually works fine but my real
> code doesn't, and I'm not sure what the difference is. My actual code is:
>
> <div id="chartmenu" class="ContextMenu" style="VISIBILITY:hidden"
> ONMOUSEOUT="this.tid = setTimeout('chartmenuhide(event)', 900);"
> ONMOUSEOVER="clearTimeout(this.tid);">
> <div class="ContextMenuItem" id="ChartMenuItemAdd"
> onMouseover="chartmenuhighlight(event)"
> onMouseout="chartmenulowlight(event)">
> Add to Graph
> </div>
> </div>


i guess it's time to change a group to comp.lang.javascript

--
altamir
 
Reply With Quote
 
altamir
Guest
Posts: n/a
 
      12-18-2003
"Richard" <anonymous@127.000> wrote in news:(E-Mail Removed):


>> <div onmouseover="this.style.backgroundColor='red'" ... >
>> ...
>> </div>


> Works better with just "background".
> I tested yours out and got nothing.


maybe. depends on the browser. but as usual it's better to keep to the
standards.

--
altamir
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Problem with a:hover + div onmouseover Ciuin Javascript 1 02-05-2007 12:15 AM
(DHTML) using onmouseover and onmouseout to swap images jazzerus@gmail.com Computer Support 1 01-07-2007 09:49 AM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
Do any DHTML books cover contemporary DHTML? Steve Javascript 1 04-09-2005 04:16 PM



Advertisments