Hola sheilac.
Estuve renegando un rato con esto porque me pareció interesante y logré hacerlo de la siguiente manera:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function clickFile(){
fileImagen=document.getElementById("btExaminar");
Ruta=document.getElementById("labelRuta");
fileImagen.click(); // ESTO NO FUNCIONA EN FIREFOX Y NO ENCUENTRO COMO HACERLO :-\
Ruta.firstChild.nodeValue=fileImagen.value;
}
</script>
<title></title>
<style type="text/css">
#btExaminar {display: none; }
#labelRuta {
font-family:cursive;
font-size:120%;
font-style:oblique;
font-weight:bold;
}
</style>
</head>
<body>
<form name="formulario">
<input type="file" name="btExaminar" id="btExaminar">
<span id="labelRuta">Seleccione la imágen</span><br />
<a href='javascript:;' onclick="return clickFile()">
<img src="examinar.bmp" alt="" border="0">
</a>
</form>
</body>
</html>
En realidad, el input tipo "file", está oculto ("display: none;") pero utilizando JavaScript para disparar su evento "Click()" y tomar la ruta seleccionada se puede lograr tu cometido. Es más, podés diseñarlo como se te antoje.
El único problema es que de eventos yo no conozco mucho y no logro encontrar la forma correcta de ejecutar esta línea
en FireFox, por lo tanto para probarlo necesitas utilizar IE
. A vos te toca averiguar como hacerlo para que funque en cualquier navegador (y de paso me contás cómo).
De todas es solo una idea de donde puedas arrancar.
Un saludo
