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.
Results 1 to 9 of 9
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Text over button

    I'm using both codes below for buttons but have run out of ideas for putting text over them for lables. Any ideas? Thanks

    <button style="font:bold italic 12 tahoma;color:white;width:91;height:28;border:none;cursor:hand;background-image:url(redblue.gif);"><img src="redblue.gif"></button>
    <br>
    <br>
    <img src="redblue.gif" onMouseDown='this.src="redblue_d.gif"' onMouseUp='this.src="redblue.gif"' style="width:91;height:28;border:none;cursor:hand;">
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #2
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    im unsure as to exactly what you mean...
    whats the problem when you do that? you just want text over those pictures? i think in the <button> tag the value of text goes in between the <button>text</button> tag.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm trying to use the same image for several buttons with different text on top of them for quick loading. Problem is, when I use your method of <button><img src=but.gif>text</button> or vice versa, the text goes outside of the image. I've run out of ideas I'm afraid. I'd prefer to use the top code as the whole button goes up and down...but read where this isn't widely supported. I'll take anything at this point. Thanks
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #4
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    read this:

    http://codingforums.com/showthread.p...seover+buttons

    does that help any? or do you want it all inline?
    you can just use what i posted there, and then add text in bitween the <button></button> tag.


    EX:
    <button class=button
    onmouseover="this.className='buttonOverClass';"
    onmouseout="this.className='button';">text</button>

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahh...That className adding style to the js is sweet. I've just used the <input type="button" value="Button" because I've read where <button> is not totally supported yet. The only thing I've noticed is when adding cursor:hand; to the js style, onmousedown shows the pointer. Thanks again
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #6
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yep no problem, i dont and wouldnt use the <button> tag.

    good luck

    The only thing I've noticed is when adding cursor:hand; to the js style, onmousedown shows the pointer.
    you can just customize each class, no problem.

  • #7
    New Coder
    Join Date
    Nov 2002
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok i found your problem

    try using these attributs

    onclick="this.src='image2.jpg'";
    onmouseout="this.src='image1.jpg'";

    it doesnt get the full feel of a button, because i cant think of the attribut that works when the mouses click is released. If you do know this, you can just use that in replace of onmouseout.
    Last edited by tempest1; 11-27-2002 at 02:56 AM.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've already customized each class with cursor:hand but when I click on the button, the onmousedown still shows the pointer.

    <style type="text/css">
    .button {
    width:91;
    height:28;
    background-color:transparent;
    background-image:url(redblue.gif);
    color:white;
    font:bold italic 17 tahoma;
    border:none;
    cursor:hand;
    }

    .button_dn {
    width:91;
    height:28;
    background-color:transparent;
    background-image:url(redblue_d.gif);
    color:white;
    font:bold italic 17 tahoma;
    border:none;
    cursor:hand;
    }
    </style>

    <input type="button" onfocus="this.blur();" value="ZOOBIE" class="button"
    onMouseDown='this.className="button_dn"'
    onMouseUp='this.className="button"'>

    Maybe it's a result of using this type of styling with this.className.

    Using the <input type="button"> rather than the <img src=blah.gif> looks more like a button because when you click on it, the text actually moves up and down, too.

    However, if I were to use the onclick="this.src='image2.jpg'"; just how am I supposed to include the action of the button itself if onClick has already been used?

    Thanks
    Last edited by zoobie; 11-27-2002 at 03:17 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #9
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why do you have this.className? why not just this.class="button" ??


  •  

    Posting Permissions

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