Changing properties of element with function

N

Nico Schuyt

Maybe a stupid question (I'm not so familiar with javascript), but:

I want to change background of a paragraph or list item on mouseover. The
following code works:
<p onMouseover="this.style.backgroundColor='yellow'"
onMouseout="this.style.backgroundColor='white'">ppppp</p>

Now I want to minimize the coding bij using a function.
How do I do that?

Suggestions are appreciated.
 
V

VK

Nico said:
I want to change background of a paragraph or list item on mouseover. The
following code works:
<p onMouseover="this.style.backgroundColor='yellow'"
onMouseout="this.style.backgroundColor='white'">ppppp</p>

Now I want to minimize the coding bij using a function.
How do I do that?

<html>
<head>
<title>My script</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function fHighlight(obj) {
obj.style.backgroundColor='yellow'";
}
function fFade(obj) {
obj.style.backgroundColor='white'";
}
</script>
</head>

<body>

<p onmouseover="fHighlight(this)"
onmouseout="fFade(this)">ppppp</p>

</body>
</html>

P.S. Despite intrinsic event handlers are not case sensitive:
<p onmouseover...
<p onMouseover...
<p onMouseOver...
etc.

but in-code event handlers require all small letters:
....
myObject.onmouseover = myFunction;

To avoid possible confusion and typos in the future you may want to use
all small letters everywhere. It is not a requirement of any kind, just
a humble suggestion.
 
N

Nico Schuyt

VK said:
Nico Schuyt wrote:
<html>
<head>
<title>My script</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function fHighlight(obj) {
obj.style.backgroundColor='yellow'";
}
function fFade(obj) {
obj.style.backgroundColor='white'";
}
</script>
</head>
<body>

I removed the '"' in both functions and it works!
Thanks a lot!!
 
R

RobG

Probably worth noting that CSS 2 (which became a recommendation in 1998)
allows the 'hover' pseudo-class on any element, so when enough browsers
support it (i.e. when IE finally supports it) you can do this without
any script at all:

p:hover {background-color: #ff0;}


[...]
 
V

VK

RobG said:
Probably worth noting that CSS 2 (which became a recommendation in 1998)
allows the 'hover' pseudo-class on any element, so when enough browsers
support it (i.e. when IE finally supports it) you can do this without
any script at all:

p:hover {background-color: #ff0;}

Hi Bob,

That would be nice but Microsoft already gave its final answer on it.
"You have to use our behaviors or go to hell".
So the answer on "When IE will support anyElement:hover?" is: "Never".

Good news is that it is rather easy to combine a highlight behavior for
IE with the standard hover property, so you wouldn't need any
client-side scripting at all:

<html>
<head>
<title>Highlight Combo</title>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<style type="text/css">
body {background-color: #FFFFFF}
p {
font: 10pt Verdana, Geneva, sans-serif;
cursor: hand; cursor: pointer;
}

p {
behavior: url(hilite.htc)
}

p:hover {
color: red
}
</style>
</head>

<body>

<p>Line 1</p>

<p>Line 2</p>

<p>Line 3</p>

</body>
</html>

Where hilite.htc file is located in the same folder as the page itself
and contains something like this:

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />
<SCRIPT LANGUAGE="JScript">
var normalColor;

function Hilite() {
runtimeStyle.color = "red";
}

function Restore() {
runtimeStyle.color = normalColor;
}
</SCRIPT>
</PUBLIC:COMPONENT>
 
T

Thomas 'PointedEars' Lahn

VK said:
RobG said:
Probably worth noting that CSS 2 (which became a recommendation in 1998)
allows the 'hover' pseudo-class on any element, so when enough browsers
support it (i.e. when IE finally supports it) you can do this without
any script at all:

p:hover {background-color: #ff0;}

[...]
That would be nice but Microsoft already gave its final answer on it.
"You have to use our behaviors or go to hell".
So the answer on "When IE will support anyElement:hover?" is: "Never".

Is there any official statement from Microsoft that backs this up?
Especially since we will be facing (or have you already tested the
beta of it?) IE 7.
Good news is that it is rather easy to combine a highlight behavior for
IE with the standard hover property, so you wouldn't need any
client-side scripting at all:

<html>
<head>
<title>Highlight Combo</title>

So you are omitting the start tag for the `head' element. Allowed in HTML,
but since we know there is hardly one fully standards compliant markup
parser in _browsers_ out there, probably error-prone.
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<style type="text/css">

body {background-color: #FFFFFF}

p {
font: 10pt Verdana, Geneva, sans-serif;

`pt' is a unit of length suited for printouts, not for the screen, as can be
seen as bad example on Microsoft's Web site (watch the left menu pane with
different display and font resolutions on different platforms). Use `em'
or `%' instead, IE should do fine with this and should even allow zooming
of fonts. Takes a bit of recalculation on your part, though ;-)
cursor: hand; cursor: pointer;
^^^^
This is invalid CSS.
}

p {
behavior: url(hilite.htc)
^^^^^^^^
And this is, too. However, there is no need for neither (and certainly
not for two selectors for the same element type, but that is for another
discussion in another newsgroup): as the `behavior' property is also
available as property of DOM objects in this particular UA, it is possible
and prudent to assign the property value via scripting. Say, for example,
the `p' element we are talking about has the ID `foo', that can be
accomplished with

....
<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function behave()
{
var t;
if (document.getElementById
&& ((t = typeof document.getElementById) == "function"
|| t == "object"))
{
var o;
if ((o = document.getElementById('foo'))
&& typeof o.style != "undefined"
&& typeof o.style.behavior != "undefined")
{
o.style.behavior = "url(hilite.htc)";
}
}
}
</script>
</head>

<body ... onload="behave()">
...
<p id="foo">...</p>
...
</body>
....


PointedEars
 
R

Randy Webb

Thomas 'PointedEars' Lahn said the following on 11/18/2005 2:57 PM:
VK wrote:


^^^^^^



So you are omitting the start tag for the `head' element.

You may want to re-read what you replied to in that regards, the head
element does indeed have the start tag present.
 
V

VK

Jasen said:
Is there a way to detect hover support?

You don't need to.

p {
behavior: url(hilite.htc)
}
will do the trick for IE and be seemlessly ignored by a
standard-compliant browser (say Gecko-based)

p:hover {
color: red
}
will do the trick for a standard-compliant browser (say Gecko-based)
and will be ignored by IE

On some "other browsers" it will be just silently ignored (no errors).

If it's not IE and still not a standard-compliant browser you should
not support it in any shall perform form. Your primary task as
developer is to ignore until it would desappear and become
standard-compliant. The only exception from this rule would be an
intranet where you have to support whatever the corporate standards
imply (if you intranet is based say on NN 4.x then so shall be it).
 
V

VK

it would desappear and become standard-compliant

read:

it would desappear *or* become standard-compliant
 
R

RobG

VK said:
Hi Bob,

That would be nice but Microsoft already gave its final answer on it.
"You have to use our behaviors or go to hell".
So the answer on "When IE will support anyElement:hover?" is: "Never".

You might want to reconsider that. The Microsoft Internet Explorer
Weblog says that IE 7 will support hover on all elements.

Good news is that it is rather easy to combine a highlight behavior for
IE with the standard hover property, so you wouldn't need any
client-side scripting at all:

In the meantime, I think a simple mousover/out function is by far the best.

[...]
 
T

Thomas 'PointedEars' Lahn

Randy said:
Thomas 'PointedEars' Lahn said the following on 11/18/2005 2:57 PM:

You may want to re-read what you replied to in that regards,
the head element does indeed have the start tag present.

ACK, probably I overlooked it due to missing indentation.
Thanks for notifying me.


PointedEars
 
T

Thomas 'PointedEars' Lahn

VK said:
You don't need to.

p {
behavior: url(hilite.htc)
}
will do the trick for IE and be seemlessly ignored
by a standard-compliant browser (say Gecko-based)

True. said:
p:hover {
color: red
}
will do the trick for a standard-compliant browser (say Gecko-based)
and will be ignored by IE

For the time being.
On some "other browsers" it will be just silently ignored (no errors).

If it's not IE and still not a standard-compliant browser you should
not support it in any shall perform form. Your primary task as
developer is to ignore until it would desappear and become
standard-compliant. The only exception from this rule would be an
intranet where you have to support whatever the corporate standards
imply (if you intranet is based say on NN 4.x then so shall be it).

I am not sure whether I should agree. I tend to, because helping standards
is a Good Thing. However, I do not think it is a Good Thing that standards
should tried to be helped by using obviously invalid code, referring to the
specification that allows that code because it defines a mechanism to
handle it. Such practice rather leads to increased use of proprietary
features like in "why do care about standards in the first place, it works
in $browser anyway!"


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top