how can i modify the bold status of a thing that i have the mouse on it?

C

Carlis

I want to make a program that, when you have the mouse on a word, that word
is bold... and when you don't have the mouse on that word, the word is not
bold. Excuse me for my poor English :-(

But the program doesn't work properly. Does somebody know why? This is the
program:

<html>
<head>
<script language="javascript">
function enter (where) {
// Function for put a text in bold style
document.all("debugTable").innerText += "enter ";
where.innerHTML="<b>"+where.innerText+"</b>";
}
function leave (where) {
// Function for put a text in not-bold style
document.all("debugTable").innerText += "leave ";
where.innerHTML=where.innerText;
}
</script>
</head>
<body>
<p><center>

<font face="arial" onmouseover="javascript:enter(this)"
onmouseout="javascript:leave(this)">Example text</font>

<p>DEBUG:<br><table><tr><td id="debugTable"></td></tr></table>

</center>
</body></head>

--




CARLOS GRIMA
· Personal Web:
www.carlosgrima.com
· Email & MSN:
(e-mail address removed)
 
M

Michael Winter

I want to make a program that, when you have the mouse on a word, that
word is bold... and when you don't have the mouse on that word, the word
is not bold.

You can do this, but it may not be a good idea. Effects that result in
size change can, in extreme cases, cause a page to reflow. Not only does
this look unprofessional, but it can frustrate users when something
they're trying to target moves.

Please think carefully about this.
Excuse me for my poor English :-(

Your English is fine. :)

If you feel more comfortable using your native language, do so, but it's a
good idea to provide an English translation if you're able.
But the program doesn't work properly.

In which browsers?
Does somebody know why?

There are several things wrong with the code you presented, not limited to
the script.
This is the program:

<html>

HTML documents should always contain a document type declaration

HTML documents also require a TITLE element.
<script language="javascript">

The language attribute has been deprecated for over six years. Use the
required type attribute in its place:

function enter (where) {
// Function for put a text in bold style
document.all("debugTable").innerText += "enter ";

Both document.all and the innerText property are proprietary elements
invented by Microsoft. Their support amongst other user agents is limited
so they should be avoided.
where.innerHTML="<b>"+where.innerText+"</b>";

The B element is deprecated, as are other presentational elements and
attributes. Use CSS (see <URL:http://www.w3.org/Style/CSS/>) instead.

[snip]
<p><center>

This is invalid mark-up. P elements may only contain text and inline
elements. CENTER, which is deprecated, is a block-level element.
<font face="arial"

The FONT element is deprecated.
onmouseover="javascript:enter(this)"
onmouseout="javascript:leave(this)">

The javascript: prefix is meaningless in the majority of user agents, and
is usually superfluous in IE.
Example text</font>

<p>DEBUG:<br><table><tr><td id="debugTable"></td></tr></table>

Again, this is invalid. The TABLE element is block-level. Moreover, a
table is inappropriate: tables mark-up tabular data and are not meant for
layout.
</center>
</body></head>

I think you'll agree that the mark-up should end, </html>, not </head>.

I strongly suggest you validate (see <URL:http://validator.w3.org/>) your
mark-up. Trying to script an invalid document can lead to unpredictable
behaviour.

What you are trying to achieve is really quite simple:

function setWeight(o, v) {
if(o && (o = o.style)) {o.fontWeight = v;}
}

<span onmouseover="setWeight(this, 'bold')"
onmouseout="setWeight(this, '')">Example Text</span>

A full markup example can be found at
<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/carlis/bold.html>. Be
aware that it will be deleted in due course.

Hope that helps,
Mike
 
C

Carlis

Very thanks Michel for your detailed response.

Im very surprised about the amount of things that have changed in plane HTML
and JavaScript... For example: the label <b> deprecated!!!! :-S

I have already tested your script and it works perfectly, but i don't
understand it a lot :-( I see i have to start studying HTML and JavaScript
from the beginning again, because most things that you said me are new for
me.

The documentation of HTML, JavaScript and DHTML that i have is from 1998 (i
don't attach it because it is 3 megas, but i can send to you if you want).

Anyway, may be if i use your suggestions the web could not work in old
versions of Explorer or Netscape.

What is your opinion about everything?

Very thanks Michael. Im Spanish and Im 26, and you? :)

--




CARLOS GRIMA
· Personal Web:
www.carlosgrima.com
· Email & MSN:
(e-mail address removed)
 
M

MyndPhlyp

Carlis said:
Very thanks Michel for your detailed response.

Im very surprised about the amount of things that have changed in plane HTML
and JavaScript... For example: the label <b> deprecated!!!! :-S

<B> is depreciated? According to my copy of the HTML 4.01 Specifications it
isn't. <FONT> and <BASEFONT> are depreciated, as are <STRIKE>, <S> and <U>,
but <B> is definitely not indicated as depreciated.

Is there a newer HTML Specification I am not aware of?
 
M

Martin Honnen

MyndPhlyp said:
<B> is depreciated? According to my copy of the HTML 4.01 Specifications it
isn't. <FONT> and <BASEFONT> are depreciated, as are <STRIKE>, <S> and <U>,
but <B> is definitely not indicated as depreciated.

Is there a newer HTML Specification I am not aware of?

Neither HTML 4 nor XHTML 1.0 nor XHTML 1.1 deprecate the <b> element, I
guess Michael got a little bit carried away in an attempt to suggest to
use CSS for presentational aspects instead of HTML markup.
 
M

MyndPhlyp

Martin Honnen said:
Neither HTML 4 nor XHTML 1.0 nor XHTML 1.1 deprecate the <b> element, I
guess Michael got a little bit carried away in an attempt to suggest to
use CSS for presentational aspects instead of HTML markup.

Thanks. For a minute there I was worried.

:::returning to the comfort and security under my rock:::
 
M

Michael Winter

Very thanks Michel for your detailed response.

You're welcome.
Im very surprised about the amount of things that have changed in plane
HTML and JavaScript...

The points I made about nesting elements incorrectly have always held
true. Browsers will render them still, but the browser will have to
correct its internal representation to something more acceptable. The
problem with this, apart from making parsing slower, is that every browser
corrects documents differently. They may also "correct" it in such a way
that it breaks your page.

A recent example appeared in comp.infosystems.www.authoring.html (ciwah).
The poster had something along the lines of:

<div>
<form ...>
[form controls]
</div>
<div>
<div>
[form controls]
</form>
</div>
<div>
<form ...>
[form controls]
</form>
</div>
</div>

Aside from the fact that it's "DIV soup", it's complete nonsense,
structurally. The first FORM begins in one DIV, ends in another. It would
be difficult for a user agent to correct that and keep its original
functionality.
For example: the label <b> deprecated!!!! :-S

Sorry, I was wrong there. The B element isn't deprecated, but it is
discouraged in favour of style sheets. See
<URL:http://www.w3.org/TR/html4/present/graphics.html#h-15.2>.

In general, any element or attribute that is purely presentational, such
as FONT and bgcolor, have been deprecated. After all, the intent of HTML
is not a means of presentation, but a way of describing what parts of
document actually are - what they mean.
I have already tested your script and it works perfectly, but i don't
understand it a lot :-(

I have a tendency to be terse.

/* This function will modify the inline style sheet information
* for the given element. Specifically, it will set the font
* weight to the given value.
*
* The result is the equivalent of applying the attribute,
* style="font-weight: <value>;" to the element.
*/
function setWeight(element, value) {
/* First, we should check that the object reference to the
* element is a valid reference. Objects, other than null,
* evaluate to true when converted to a boolean.
*
* Second, we should check that the object supports the style
* object - our way of modifying its inline style information.
*/
if(element && element.style) {
/* If the previous tests pass, we can assign a new value. */
element.style.fontWeight = value;
}
}

Now notice the values passed to the function:

onmouseover="setWeight(this, 'bold');"
onmouseout="setWeight(this, '');"

The value, 'bold', will quite obviously set the font weight to bold, but
what about the empty string? This effectively removes any styling for that
property. With that gone, the element will revert to whatever style is
specified by the page style sheet.
I see i have to start studying HTML

It's mainly a matter of realising that HTML has rules. Many of them are
common sense, like a nested element should be completely contained

<form>
<div>
</div>
</form>

not

<form>
<div>
</form>
</div>

and that certain elements may only contain certain other elements.
Learning this is just a matter of time. Regularly validating your pages
(using the link I gave in my last post) should give you a feel for what's
correct, and what's not.

Due to error correction in browsers, it seems that many people think you
can write any old rubbish and everything will work perfectly. Whilst what
an author has written may be fine for a particular browser, they often
haven't tested it on many other browsers where their page will go horribly
wrong. A lot of people still think that IE and Netscape are the only
browsers in the world. Some only know the former exists.
and JavaScript [...]

Javascript, the language, hasn't changed that much. It's the document
object model (DOM) that browsers expose to scripts that has come a long
way.
The documentation of HTML, JavaScript and DHTML that i have is from 1998

That is quite out-of-date, though HTML 4.01 (the most recent version) only
became a Recommendation in '99.
(i don't attach it because it is 3 megas, but i can send to you if you
want).

If you had attached it, my news server would have rejected your post
entirely. It was a good thing you didn't.

You should never send attachments, which includes sending HTML-based
messages, to Usenet (unless you're posting to a binary group).
Anyway, may be if i use your suggestions the web could not work in old
versions of Explorer or Netscape.

According to Microsoft, that code should work in IE 4, but I can't test
that. As for NN 4, very little will work there. A growing opinion is that
NN 4 is dead and attempting to support it is a wasted effort.

[snip]

As far as resources go, I'm not really the person to ask.

The FAQ for this group (<URL:http://jibbering.com/faq/>) contains some
links, and plenty of its own advice with regard to Javascript.

As for HTML, try <URL:http://www.html-faq.com/>, and
<URL:http://www.htmlhelp.com/> seems to come better recommended than
<URL:http://www.w3schools.com/>.

Mike
 
M

Michael Winter

[snip]
I guess Michael got a little bit carried away in an attempt to suggest
to use CSS for presentational aspects instead of HTML markup.

Unfortunately, yes. I tend to consider everything in section 15 of the
Recommendation (15 - Alignment, font styles, and horizontal rules) as
deprecated. It is, pretty much.

I provided a retraction in my other post.

Mike
 
C

Carlis

Hello Mike :)

Thanks for all explanations and the final links. You have been really nice
with me, so we can drink some beer together one day (I'll pay of course) :-D

--




CARLOS GRIMA
· Personal Web:
www.carlosgrima.com
· Email & MSN:
(e-mail address removed)
 

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,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top