...

View Full Version : Changing Labels.



zameroth
04-16-2005, 09:01 AM
Is their any way to change a form label (<label></label>) with the onMouseover?

-or-

Go about changing particular text onMouseover without using a textarea or text field some other way?

coothead
04-16-2005, 01:22 PM
Hi there zameroth,

do you mean like this......

<form action="#">
<fieldset>
<label onmouseover="this.style.color='#f00'">this is an input : </label>
<input type="text"/>
</fieldset>
</form>

coothead

zameroth
04-16-2005, 06:07 PM
Yes, but change the text between the label tags.

Just trying to find a way to change the text so there is no text or textarea bounding box.

I'm open to using an image with the text on it, but I'm unsure how to do that.

coothead
04-16-2005, 06:31 PM
Hi there zameroth,

how about this then...

<form action="#">
<fieldset>
<input type="text"/>
<label onmouseover="this.innerHTML='this is green text';this.style.color='#0f0'">this is black text</label>
</fieldset>
</form>

coothead

zameroth
04-16-2005, 07:54 PM
Thank you, this works great!

<label onmouseover="this.innerHTML='this is green text';this.style.color='#0f0'" onMouseout="this.innerHTML='this is black text';this.style.color='#000'">this is black text</label> :thumbsup: :D

coothead
04-16-2005, 08:07 PM
No problem, you're welcome. :D

zameroth
04-16-2005, 09:50 PM
One other question?

How would you change the label color with a button?

I'm guessing it would call on the form element:

document.formName.labelName. (and I'm not sure what's next).

coothead
04-16-2005, 10:10 PM
Hi there zameroth,

try this button......

<form action="#">
<fieldset>
<input type="text"/>
<label id="label">this is black text</label>
<input type="button" value="click me"
onclick="document.getElementById('label').style.color='#0f0'"/>
</fieldset>
</form>

coothead

zameroth
04-17-2005, 03:47 AM
You'll have to forgive me, labels are new to me. I had been shying away from them for a while.

What about onLoad you declair it one color then change its color with a button?

coothead
04-17-2005, 08:19 AM
Hi there zameroth,

What about onload you declare it one color then change its color with a button?
Well, you've just described the previous example not a forthcomimg one. :D

coothead

zameroth
04-17-2005, 06:33 PM
OK, but how would you have the label color change from a button on a popup window outside of the main window that contains the label?



main window
==========================
|
| label
|
| popup-button
|
----------------------------------

popup window
==========================
|
| button(click to change label)
|
----------------------------------




- & -

Why does the following not work? :

<html><head>
<script language="JavaScript">
function goON() {
document.myC.poLBL.style.color='yellow';
}
</script></head>
<body onLoad="goON()">

<form name="myC">
<label id="poLBL">Something</label> Different
</form>

</body></html>

coothead
04-17-2005, 09:16 PM
Hi there zameroth,

is this what you want...

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>zam form</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

</head>
<body>

<form action="#">
<fieldset>
<input type="text"/>
<label id="label">this is black text</label>
</fieldset>
</form>

<div>
<a href="popup.html"
onclick="window.open(this.href,'','left=200,top=200,width=200,height=200');return false">
popup
</a>
</div>

</body>
</html>
popup.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>zam pop_up</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

</head>
<body>

<form action="#">
<fieldset>
<input type="button" value="change label"
onclick="opener.document.getElementById('label').style.color='#f00';
opener.document.getElementById('label').innerHTML='this is now red text';
opener.document.forms[0][1].value='zameroth';
window.close()"/>
</fieldset>
</form>

</body>
</html>
..and

Why does the following not work?
You cannot access the label through the form, you need to use...

document.getElementById(label id)

coothead

zameroth
04-18-2005, 05:47 AM
What's the [0][1] for?

coothead
04-18-2005, 07:02 AM
Hi there zameroth,

What's the [0][1] for?
For each form the browser will automatically create the array....

document.forms[].elements[]

This will contain all the elements in the form.
(n.b. 'label' is not a form element and is accesed by document.getElementById)

You are probably accustomed to accessing the form and it's elements by name like this...


<script type="text/javascript">
<!--
function insertValue() {
document.myform.myinput.value="some string";
}
onload= insertValue;
//-->
</script>

<form name="myform" action="#">
<fieldset>
<input name="myinput" type="text"/>
</fieldset>
</form>

It is not mandatory to use names, you can just as easily refer to the form and it's elements by number.
In the example above this would become...

document.forms[0].elements[1]

which can be further shortened to...

document.forms[0][1]


I hope that this helps. :)

coothead

zameroth
04-18-2005, 09:14 PM
That's great! I'm always happy to shorten my code.

I forgot to ask about the ACTION in the <form action=> tag.

I'm guessing it is affiliated with form submition. My books do not cover it and the searches I've attempted have given vauge descriptions.

coothead
04-18-2005, 09:48 PM
Hi there zameroth,

this is what
Dynamic HTML - The Definitive Reference
has to say about 'action'...


"Action specifies the URL to be accessed when the form is being submitted.
When the form is submitted to a server for further processing, the URL may
be to a CGI program or to an HTML page that includes server-side scripts...."

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum