...

View Full Version : image fadeout when form field selected?



resinpot
12-19-2010, 06:03 PM
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..

Philip M
12-19-2010, 08:53 PM
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.


<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

resinpot
12-20-2010, 08:26 AM
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??

Philip M
12-20-2010, 09:00 AM
onfocus()

resinpot
12-20-2010, 09:15 AM
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..

Philip M
12-20-2010, 09:52 AM
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. :)

resinpot
12-20-2010, 09:56 AM
scroll down...

resinpot
12-20-2010, 10:23 AM
scroll down...

Philip M
12-20-2010, 10:59 AM
I also use IE8. Yes, replace onclick by onfocus.
Let's do it again.


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

resinpot
12-20-2010, 11:10 AM
scroll down...

Philip M
12-20-2010, 12:33 PM
Sorry, I do not see the problem.
When I focus on the textbox, then tab to the textarea, the image changes as expected.

resinpot
12-20-2010, 12:53 PM
scroll down...

resinpot
12-20-2010, 02:03 PM
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:



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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum