lo scriptino che si trova in giro ha un difetto... devo aggiungere codice

questo scriptino fa tutto da solo, dovremo inserire solo il codice per il campo file

non gestisce gli stile con selettore # o inline... non copia gli eventi definiti per il campo file (servono?!)

il codice javascript mi sembra pulito e semplice da capire... testatelo per bug e miglioramenti... se vi piace bon

codice:
<!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" xml:lang="it">

<head>

	<script type="text/javascript">
	
(function () {

	var texts = {
	
		en : { browse : 'Browse...' },
		it : { browse : 'Sfoglia...' }
	
	} ;

    	(function (f) {

    		if (window.attachEvent)
    			window.attachEvent('onload', f);
    		else if (window.addEventListener)
    			window.addEventListener('load', f, false);
    		else
    			window['onload'] = f;

    	})(
				
		function () {
	
			var i ;
			var elements = document.getElementsByTagName('input') ;
			var file ;
	
			for (i = 0 ; i < elements.length ; i++) {
			
				// check for file fields
			
				if (elements[i].getAttribute('type') == 'file') {
				
					file = elements[i] ;
				
					// hide field
					
					file.setAttribute('style', '-moz-opacity:0.5;') ;
					file.style.position = 'absolute' ;
					file.style.left = '-10000px' ;
					file.style.filter = 'alpha(opacity=0)' ;
					file.style.opacity = '0' ;
					
					// create textbox
					
					var textbox = document.createElement('input') ;
	
					textbox.setAttribute('type', 'text') ;
					textbox.setAttribute('title', file.getAttribute('title')) ;
					textbox.setAttribute('readOnly', 'readonly') ;
					textbox.setAttribute('className', file.getAttribute('className')) ;
					textbox.setAttribute('class', file.getAttribute('class')) ;
					
					// create button
					
					var button  = document.createElement('input') ;
	
					button.setAttribute('type', 'button') ;
					button.setAttribute('title', file.getAttribute('title')) ;
					button.setAttribute('value', texts[navigator.browserLanguage ? navigator.browserLanguage : navigator.language].browse) ;
					button.setAttribute('className', file.getAttribute('classbutton')) ;
					button.setAttribute('class', file.getAttribute('classbutton')) ;
	
					// add button event
	
					(function (f) {
	
						if (button.attachEvent)
							button.attachEvent('onmouseover', f);
						else if (button.addEventListener)
							button.addEventListener('mouseover', f, false);
						else
							button['onmouseover'] = f;
	
					})(
					
						(function (btn, ff) { return(function () {
	
							// button rect
	
							var x = btn.offsetLeft ;
							var y = btn.offsetTop ;
							var w = btn.offsetWidth ;
							var h = btn.offsetHeight ;
							var p = btn.offsetParent ;
							
							while (p) {
							
								x += p.offsetLeft ;
								y += p.offsetTop ;
							
								p  = p.offsetParent ;
							
							}
	
							// check for mouse pointer in/out button rect
							
							var f = function (event) {
							
	      							if (event.clientX >= x && event.clientX <= (x + w - 1) && event.clientY >= y && event.clientY <= (y + h - 1)) {
	
	      								ff.style.left = (event.clientX - ff.offsetWidth  + 10) + 'px' ;
	      								ff.style.top  = (event.clientY - 10) + 'px' ;
	      							
	      							} else {
	      							
	      								ff.style.left = '-10000px' ;
	
	      								// remove handler
	
	      								(function (f) {
	      				
	      									if (document.body.detachEvent)
	      										document.body.detachEvent('onmousemove', f);
	      									else if (document.body.removeEventListener)
	      										document.body.removeEventListener('mousemove', f, false);
	      									else
	      										document.body['onmousemove'] = null;
	      				
	      								})(
	      								
	      									f
	      								
	      								) ;
	      								
	      							}
							
							} ;
	
	      						// add handler to move file field over the button
	      						
	      						(function (f) {
	      						
	      							if (document.body.attachEvent)
	      								document.body.attachEvent('onmousemove', f);
	      							else if (document.body.addEventListener)
	      								document.body.addEventListener('mousemove', f, false);
	      							else
	      								document.body['onmousemove'] = f;
	      						
	      						})(
	      						
	      							f
	      							
	      						)
						
						}) })(button, file)
	
					) ;
					
					// add file field event
	
					(function (f) {
	
						if (file.attachEvent)
							file.attachEvent('onchange', f);
						else if (file.addEventListener)
							file.addEventListener('change', f, false);
						else
							file['onchange'] = f;
	
					})(
					
						(function (txt, ff) { return(function () {
						
							txt.value = ff.value ;
							
							ff.style.left = '-10000px' ;
						
						}) })(textbox, file)
	
					) ;
					
					// insert new elements
					
					file.parentNode.insertBefore(textbox, file) ;
					file.parentNode.insertBefore(button, file) ;
					
					// skip file field
					
					i++ ; i++ ;
				
				}
				
			}
			
		}
		
	) ;

}) () ;


</script>	




<style>
body {margin:100px;}
.ff1 {background:cyan;border:1px solid red;}
.btn1 {width:123px;color:red;}
.ff2 {background:yellow;border:1px solid green;}
.btn2 {width:123px;color:green}
</style>
	
</head>

<body>

	<form action="" method="post">
		<input type="text" name="testo" id="testo" />

	
		<input type="file" name="ff1" class="ff1" classbutton="btn1" />

		<input type="file" name="ff2" class="ff2" classbutton="btn2" />
	</form>

</html>