Highlight and De-highlight text on mouse-over - Javascript

The problem is perhaps because you get a wrong value within
getelementbyid.
The code "document.getElementById(id).style.color='Black';" woks okay
in firefox (my one is 1.5.0.7).

"sp" <sp.nnov> wrote in message
news:1158667848.773752.170920@i42g2000cwa.googlegroups.com...
> The problem is perhaps because you get a wrong value within
> getelementbyid.
> The code "document.getElementById(id).style.color='Black';" woks okay
> in firefox (my one is 1.5.0.7).

Right. Thats pointed me in the right direction and I've now found out its
because the onMouseOver event doesn't seem to fire for the paragraph in
Firefox. Odd.

Chowny wrote:

> the onMouseOver event doesn't seem to fire for the paragraph in Firefox.

That`s not true . I`ve tested the code above using p tag:

<p style="color: red;" id="test"
onmouseover="foo('test');">blablabla</p>

and it still works.

Sometimes such things happen when you have one element in another, and
the parent one has event listener. I was very surpirsed when I`ve found
out that in this case:

<div style="padding: 0px;" onmouseover="foo();"
onmouseout="bar();"><div>test</div></div>

pointing the "test" calls bar() function. I don`t think this is
something about your case, but the problem seems to be similar.

> That`s not true . I`ve tested the code above using p tag:
>
> <p style="color: red;" id="test"
> onmouseover="foo('test');">blablabla</p>
>
> and it still works.
>
> Sometimes such things happen when you have one element in another, and
> the parent one has event listener. I was very surpirsed when I`ve found
> out that in this case:
>
> <div style="padding: 0px;" onmouseover="foo();"
> onmouseout="bar();"><div>test</div></div>
>
> pointing the "test" calls bar() function. I don`t think this is
> something about your case, but the problem seems to be similar.

Odd. It really just doesn't work. Below is a copy of my scripts and a cut &
paste from the Source of the page that isn't working (all this HTML is
dynamically generated by an ASP .NET application from information in a
database).

There are quite a few of these paragraphs.

Anyway

****CODE BEGINS HERE****

<script type="text/javascript">

borderstore = ''

function highlight(id) {

element = document.getElementById(id);

event.cancelBubble = true;
if (null != element)
{
element.style.color = 'Red';
element.bgColor = 'Blue';

}
}

function delight(id) {

element = document.getElementById(id);
event.cancelBubble = true;
if (null != element)
{
element.style.color = 'Black';
}}

function highlightImage(id)
{

element = document.getElementById(id);
event.cancelBubble = true;
if (null != element)
{
borderstore = element.style.border
element.style.border = '1px solid red';
}
}

function delightImage(id)
{

element = document.getElementById(id);
event.cancelBubble = true;
if (null != element)
{
element.style.border = borderstore
}
}

</script>


<p id='p2'
onmouseover="highlightImage('i2');highlight('ul2');highlight('p2');highlight('s2');"
onmouseout="delightImage('i2');delight('ul2');delight('p2');delight('s2');"
style='font-family: Verdana, Verdana, Geneva, sans-serif;font-size:
8pt;color:black;background-color:white'>

<img id='i2'
src='http://localhost/TestSite/sites/sitec/user_images/cogs_227x165.jpg'
align='right' style='border-width:0px;border:1px solid black; padding:2px;
margin:10px'/>

In recent years, film versions of Jane Austen novels have become all the
rage, usually overlaid with a slight glossiness and
playful archness that served to give the films a safe feeling, even in the
storylines' darkest moments.
Not so with Patricia Rozema's 1999 adaptation of Mansfield Park, which
instead gives the viewer a grittier,
more grounded view of the time in which the characters lived, a technique
which is not wholly faithful to the book
but is a fascinating exploration nonetheless. One of Austen's most
challenging stories, Mansfield Park centers
on Fanny Price (Frances O' Connor), who as a young girl was born into
poverty but is brought to live with her
wealthy relations (Lindsay Duncan and Harold Pinter) as an act of
ill-founded charity. Rozema's Fanny is strong-willed.

(<a href='AddContentItem.aspx?lt=CNT&Insert=2&Page=9'
style='Color:blue;font-weight:bold'>INSERT BEFORE</a>)
(<a href='AddContentItem.aspx?lt=CNT&ID=2&Page=9'
style='Color:blue;font-weight:bold'>EDIT</a>)
(<a href='DeleteContent.aspx?lt=CNT&ID=2&Page=9'
style='Color:blue;font-weight:bold' onclick="return confirm('Are you sure
you wish to delete this block?');">DELETE</a>)
(<a href='ContentBullet.aspx?lt=CNT&ID=2&Bulleted=1&Page=9'
style='Color:blue;font-weight:bold'>NOT BULLETED</a>)
(<a href='ContentMove.aspx?lt=CNT&Dir=Up&ID=2&Page=9'><img border='0'
src='../images/icons_small/up.gif' alt=''/></a>
<a href='ContentMove.aspx?lt=CNT&Dir=Down&ID=2&Page=9'><img border='0'
src='../images/icons_small/down.gif' alt=''/></a>)

</p>

<a name='Item_1'/>

*** CODE ENDS HERE ****

The strange thing is that if I put "window.close()" in the beginning of one
of those functions and then mouse over the paragraph in IE then it closes
the window. But in FF it doesn't. I took this to mean that FF wasn't firing
the onmouseover event.

Either way...its got me stumped.

Regards
Stephenm

Got it working! It was the event bubbling code that was cause the problem.

Thanks for you help SP!