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 21
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Adding Graphic To Text Field

    How can I add a graphic to a text field, like on the top of this page:

    CLICK HERE


    Thanks,
    Dan

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Using CSS. Set a background-image, and background-repeat should be no-repeat. Override it in an onmouseover and an onfocus handler, so that it disappears when mousing over or focusing. If you wish to reset it, override the setting from the mouseover or focus events with onmouseout and onblur handlers.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How would I add, what you said, to this code:

    <TABLE width="480" border="8" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#000000">
    <tr>
    <td height="21"><font size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>Super
    Search</strong></font></td>
    </tr>
    <tr>
    <td height="26"><form onKeyUp="highlight(event)" style="{display:inline}" class="one">
    <input name="S1" type="text" style="background-color:#CCFF99;" value="Start Here" size="40" onFocus="clearText(this)">
    <input type="button" value="Add To All Searches" onclick="popSearch(this.form)">
    <input type="button" value="Clear Text" onclick="this.form.S1.value=''">
    </form></td>
    </tr>
    </table>


    Thank you,
    Dan

  • #4
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Liorean?

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How much CSS do you know? It appears that you've got a mix of deprecated (that means obsolete) properties and CSS already but since you didn't seem to understand the reply it'd help to know how much learning you need in order to be able to understand.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #6
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know that I have to add CSS scripts to my head and then add something that corresponds to that CSS script in the Form or Table, etc. that I want - correct?


    Thank you,
    Dan

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not really, you've already got a style on your input field where you're setting it's background color. You only need to set up the background image and repeat in place of that style.

    http://www.w3.org/TR/CSS2/colors.htm...ckground-image
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Thank you, Roy...

    As I am a novice, how can I add this image:

    http://www.PianoManFan.com/LootTool/FieldText1.gif

    ...to this code:

    <TABLE width="450" border="8" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#000000">
    <tr>
    <td width="441"> <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin

    var initialsubj="Check Out: www.LOOTTOOL.com"
    var initialmsg="Hey...\n Check Out The Best Comparison Price Search Portal: http://www.LOOTTOOL.com"
    var good;
    function checkEmailAddress(field) {

    var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.co op)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi);
    if (goodEmail) {
    good = true;
    }
    else {
    alert('Please Enter A Valid E-Mail Address.');
    field.focus();
    field.select();
    good = false;
    }
    }
    u = window.location;
    function mailThisUrl() {
    good = false
    checkEmailAddress(document.eMailer.email);
    if (good) {

    //window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+document.title+" "+u;
    window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg
    }
    }
    // End -->
    </script> <form name="eMailer" style="{display:inline}" class="two">
    <strong><font size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
    A Friend: </font> </strong>
    <input type="text" name="email" size="30" value="Enter E-Mail Address Here" onFocus="this.value=''" onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true" onMouseOut="window.status='';return true" style="background-color:#CCFF99;">
    <a href="onClick=mailThisUrl();"><img name="Go" src="http://www.PianoManFan.com/LootTool/EnterButton.gif" width="72" height="23" border="0" alt="" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true"></a>
    </form></td>
    </tr>
    </table>


    (Also, I tried to put in a SUBMIT graphic, but it's suddenly not working, as when the BUTTON was on the page. Can you help me with that, please?)



    THANK YOU!!!
    Dan

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After the all nasty popup windows and everything else that happened when I clicked on the link above Forget I ever replied.

    Last edited by Roy Sinclair; 01-15-2004 at 09:53 PM.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #10
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy I'm Sorry...

    Roy, I am so sorry, I got dyslexic with my link...


    http://www.pianomanfan.com/LootTool/TextField1.gif


    That's the real one...


    Thanks,
    Dan

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <input type="text" 
        name="email" 
        size="30" 
        value="Enter E-Mail Address Here"
        onFocus="this.value='';this.style.background='#CCFF99'" 
        onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true" 
        onMouseOut="window.status='';return true"
        style="background-image: url('http://www.pianomanfan.com/LootTool/TextField1.gif'); background-repeat: no-repeat;" />
    Last edited by Roy Sinclair; 01-16-2004 at 04:06 PM.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #12
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Roy, I messed around with your code for so long, but I was unsuccessful, how can I use your above code, with my code:


    <form name="eMailer" style="{display:inline}" class="two">
    <strong><font color="#CCFF99" size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell
    A Friend: </font> </strong>
    <input name="email" type="text" style="background-color:#CCFF99;" onFocus="this.value=''" onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true" onMouseOut="window.status='';return true" value="Enter E-Mail Address Here" size="30">
    <input name="button" type="button" onClick="mailThisUrl();" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true" value="Send This URL">
    </form>



    Thanks SOOOOOOOO Much,
    Dan

  • #13
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like this I think, oh and dan when u make a post and wanna post some code there is a button just above the text area '#' if you click that and then make a space and click ok to the promt u get 2 code tags post the code inside that.

    Code:
     
    <form name="eMailer" style="{display:inline}" class="two">
    <strong><font color="#CCFF99" size="3" face="Verdana, Arial, Helvetica, sans-serif">Tell 
    A Friend: </font> </strong>
    <input type="text" 
        name="email" 
        size="30" 
        value="Enter E-Mail Address Here"
        onFocus="this.value='';this.style.background='#CCFF99'" 
        onMouseOver="window.status='Enter E-Mail Address Here & Tell A Friend About This Site...'; return true" 
        onMouseOut="window.status='';return true"
        style="background-url: url('http://www.pianomanfan.com/LootTool/TextField1.gif'); background-repeat: none;" />
    
    <input name="button" type="button" onClick="mailThisUrl();" onMouseOver="window.status='Click Here To Tell A Friend About www.LOOTTOOL.com'; return true" onMouseOut="window.status='';return true" value="Send This URL">
    </form>

  • #14
    Regular Coder
    Join Date
    Dec 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Roy, it didn't work, can you look at it again, please?

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It didn't work because of a typo, I put "background-url" where I should have put "background-image". Change that and you should be good to go. Also note that I wrote "none" as the value for the "background-repeat" and it should have been "no-repeat" instead.

    (I also edited the original message to fix those problems).
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  
    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
    •