Desiging browse button

Right now I am trying to design the browse and upload button. Normal submit buttons are easily designed via CSS but the browse button is rendered differently in every different browser. But I found a trick.http://www.appelsiini.net/projects/filestyle

I downloaded the jquery script:

(function($){$.fn.filestyle=function(options)

{var settings={width:250};

if(options)
	
	{$.extend(settings,options);
	
	};
	
	return this.each(function()
	
{var self=this;var wrapper=$("<div>").css({ "width":settings.imagewidth+"px",
										   "height":settings.imageheight+"px",
										   "background":"url("+settings.image+") 0 0 no-repeat",
										   "background-position":"left",
										   "display":"inline",
										   "position":"absolute",
										   "overflow":"hidden"});
		
var filename=$('<input class="file">').addClass($(self).attr("class")).css({"display":"inline",
																		    "width":settings.width+"px"});
																		    
		
$(self).before(filename);$(self).wrap(wrapper);$(self).css({"position":"relative",
														    "height":settings.imageheight+"px",
															"width":settings.width+"px",
															"display":"inline",
															"cursor":"pointer",
															"opacity":"0.0"});
		
if($.browser.mozilla)
		
{if(/Win/.test(navigator.platform))
	
	{$(self).css("margin-left","-142px");}

else{$(self).css("margin-left","-168px");}
				
				;}
				
				else{$(self).css("margin-left",settings.imagewidth-settings.width+"px");
				
				};
				
				$(self).bind("change",function(){filename.val($(self).val());
																		  
				});
				
				});
	};
	})
(jQuery);

This is how it works.

Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.

I call the script in page.tpl.php of my theme. Everytime there is a input button with the type=file call the filestyle function (above script) and give this parameters.

print '
	    <script type="text/javascript">
	  
	  	$(document).ready(function(){
   			$("input[type=file]").filestyle({
				image: "'.base_path().path_to_theme().'/images/icons/upload.gif",
     			imageheight : 20,
     			imagewidth : 20,
     			width : 250
 				});
 		});
 		</script>'; 

If the user clicks on the attach-button my designed div (which lays over the original browse button) is gone because Drupal wants to display the uploaded file and moves the button downward.

I tried to trick Drupal a second time with this additional script. It is not working properly. It should call the filestyle function everytime a input button with the type submit gets clicked.

print '
	    <script type="text/javascript">
	  
	  	$(document).ready(function(){
			$("input[type=submit]").bind("click", function(){
      			$("input[type=file]").filestyle({
				image: "'.base_path().path_to_theme().'/images/icons/upload.gif",
     			imageheight : 20,
     			imagewidth : 20,
     			width : 250
 				});
    		});
			
			
			
 		});

To achieve my goal i think I need to know more about how the upload form is working. Especially I need to have a look into the code so I can get my script going. I need to understand how Drupal moves the button downward (because that is the spot i have to jump in)

Did somebody try something simliar to this?

Every support is welcomed.

Thank in advance

Best regards
Michael