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 13 of 13
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image fadeout when form field selected?

    Is it possible to have a form's textarea background image fadeout to an alternate bg image, when that textarea is selected (by clicking the textarea or tabbing to it)? I've never seen this done before, but I'd really like to do it..

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    It is certainly possible to change the background image of a textarea by changing the className, but I don't think a fade effect using opacity is possible.

    Code:
    <html>
    <head>
    
    <style type="text/css">
    .TA {
    background-image: url(One.jpg);
    }
    .TB {
    background-image: url(Two.jpg);
    }
    </style>
    
    <script type = "text/javascript">
    function change(elm) {
    document.getElementById(elm).className = "TB";
    } 
    </script>
    </head>
    
    <body>
    
    <textarea id = "tarea" class = "TA" style="height: 150px;width: 190px" onclick = "change(this.id)";></textarea>
    
    </body>
    </html>

    "Very unusually it has turned noon here in Newcastle." - Football commentator

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks you for the code, but is there a way to make the image switch when I tab to the textarea? In other words, when I click the first text input in the form, I then press the tab key to select the next form field (rather than clicking on each field individually).. how can I do this??

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    onfocus()

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again, but something really strange is happening with the table now. After adding that code, the textarea automatically gets selected on page load now, causing the textarea bg image to switch on pageload which I do not want..
    Last edited by resinpot; 12-20-2010 at 10:19 AM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by resinpot View Post
    Thanks again, but something really strange is happening with the table now. After adding that code, when I load the page now a form element automatically gets selected.. first time it was the textarea, then the submit button.. furthermore, after adding that onfocus and then tabbing to the textarea, it worked fine, but when I loaded the page again, it kept the alternate bg image (TB) displayed as default.. what is going on??
    Not a clue, but it is nothing to do with the code I gave you! It works just fine for me.
    Last edited by Philip M; 12-20-2010 at 09:55 AM.

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    scroll down...
    Last edited by resinpot; 12-20-2010 at 12:50 PM.

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    scroll down...
    Last edited by resinpot; 12-20-2010 at 12:51 PM.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    I also use IE8. Yes, replace onclick by onfocus.
    Let's do it again.

    Code:
    <html>
    <head>
    
    <style type="text/css">
    .TA {
    background-image: url(One.jpg);
    }
    .TB {
    background-image: url(Two.jpg);
    }
    </style>
    
    <script type = "text/javascript">
    function change(elm) {
    document.getElementById(elm).className = "TB";
    } 
    </script>
    </head>
    
    <body>
    <input type = "text" value = "Test"><br><br>
    
    <textarea id = "tarea" class = "TA" style="height: 150px;width: 190px" onfocus = "change(this.id)";></textarea>
    
    </body>
    </html>
    Tab from textbox to textarea, image changes, no?

  • #10
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    scroll down...
    Last edited by resinpot; 12-20-2010 at 12:52 PM.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Sorry, I do not see the problem.
    When I focus on the textbox, then tab to the textarea, the image changes as expected.

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    scroll down...
    Last edited by resinpot; 12-20-2010 at 02:06 PM.

  • #13
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is this: It seems the browser is somehow remembering the last selected form field after refreshing the page, and reselects that last selected field automatically when the page is refreshed.. Note: If I load the page and select a field, and then close that page's tab and reopen it (rather than refresh), the problem does not occur..

    Update: I've found the culprit. It's a js file which the free host requires to be in the code. Here is the js code:

    Code:
    var _fwr = "_load_random_xmd0kf4ghe846jqo9pd";
    window[_fwr] = top[_fwr] = 'Freewebs';
    var _fw_imagesprefix = "http://images.freewebs.com/Images/Freebar/";
    var _fw_url = "http://newaccounts.freewebs.com/?referer=advbar&cm_mmc=Freewebs-_-Free%20Website-_-AdvBar-_-Free%20Website";
    
    var _fw_pngimage = _fw_imagesprefix + "btn_circleblack.png";
    if (document.all) document.write('<div onclick="document.location.href=\''+_fw_url+'\'" style="cursor:hand; background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=\''+_fw_pngimage+'\'); display:block; position:relative; width:91px; height:91px;"></div>');
    else document.write('<a href="'+_fw_url+'" target="_top"><img src="'+_fw_pngimage+'" width=91 height=91 border=0></a>');
    ..any idea as to where the problem lies? I won't be able to change this code, but maybe someone can come up with a fix or hack that can override whatever is in this code that's causing the problem?


  •  

    Posting Permissions

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