SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    onfocus call function to change background

    hi

    i have 10 input fields.

    i want to change background image of the input fields onfocus event

    My code is not working

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <Script type="text/javascript">
    function changeBG(input){
    input.style.backgroundImage = URL('images/logininput_focus_bg');
    }
    </Script>
    </head>
    
    <body>
    <form>
    <input type="text" onfocus="changeBG{input);" />
    </form>
    </body>
    </html>
    vineet

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    input is an undefined variable, when passing in the argument for changeBG you need to supply it with the keyword "this" which is a reference to the current element object. See the below:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
        function changeBG(input) {
            input.style.backgroundImage = 'url(images/logininput_focus_bg)';
        }
    </script>
    </head>
    
    <body>
    
        <form>
            <input type="text" onfocus="changeBG(this);" />
        </form>
    
    </body>
    </html>
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi chris

    i uploaded your example but it didnt worked for me

    http://wdpixels.com/stuff/changebg.html

    this is the background image
    http://wdpixels.com/stuff/logininput_focus_bg.gif

    vineet

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry, I actually just noticed a typo in your original code that I didn't see before.

    The above should work fine now.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi chris

    yes its working now.

    But what did you changed in the above code, i am not able to relate.

    vineet

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    was it the .gif extension

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot

    works perfect for my form

    vineet


Bookmarks

Posting Permissions

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