Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Changing Labels.

    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?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there zameroth,

    do you mean like this......
    Code:
    <form action="#">
    <fieldset>
    <label onmouseover="this.style.color='#f00'">this is an input : </label>
    <input type="text"/>
    </fieldset>
    </form>
    coothead

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there zameroth,

    how about this then...
    Code:
    <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

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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>

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem, you're welcome.

  • #7
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Label Color Change with a Button

    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).

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there zameroth,

    try this button......
    Code:
    <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

  • #9
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question And what if ....

    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?

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    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.

    coothead

  • #11
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Refraise

    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>
    Last edited by zameroth; 04-17-2005 at 08:45 PM.

  • #12
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there zameroth,

    is this what you want...

    main.html
    Code:
    <!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
    Code:
    <!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

  • #13
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What's the [0][1] for?

  • #14
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    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...
    Code:
    
    <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

  • #15
    New Coder
    Join Date
    Apr 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •