Simuler un input file avec une image - HTML/CSS - Programmation
Marsh Posté le 05-06-2007 à 23:32:23
t'as un screenshot à faire voir de ce que tu as vu ? ( )
Marsh Posté le 05-06-2007 à 23:50:09
Voilà une capture :
Quand on clique sur l'image "Choisissez le votre" ça ouvre une boîte de dialogue qui permet de choisir un fichier. Une boîte de dialogue normale quoi, comme quand on fait un <input type="file" /> et qu'on clique sur le bouton pour sélectionner un fichier.
Marsh Posté le 06-06-2007 à 09:50:18
ReplyMarsh Posté le 06-06-2007 à 11:38:45
Mxtrem a écrit : http://www.quirksmode.org/dom/inputfile.html |
Nan la méthode utilisée n'est pas celle décrite dans quirksmode.
la méthode utilisée est celle-ci :
<div style="position:relative; width:70px; height:30px; overflow:hidden; background:url(image.png) no-repeat right top">
<input type="file" style="font-size:600px; opacity:0; -moz-opacity:0; filter:alpha(opacity=0);" />
</div>
Marsh Posté le 07-06-2007 à 01:26:20
Ca ne fonctionne pas chez moi, ni sur IE, ni sur Opera, ni sur Firefox
Marsh Posté le 07-06-2007 à 09:19:42
Code :
|
il manquait un float:right sur le input
bien sur je t'invite à exporter tout ca dans une feuille de style pour faire plus propre
Marsh Posté le 09-06-2007 à 13:54:22
J'ai mis le code que tu as mis, en changeant l'url de l'image pour une image qui existe sur mon disque.
EDIT : ça marche juste avec Firefox
Marsh Posté le 09-06-2007 à 14:16:56
tu décrirais un peu plus ton problème on pourrait plus t'aider
le ca marche juste avec firefox ca m'aide pas du tout
Marsh Posté le 09-06-2007 à 14:23:00
Voila ca marchera partout maintenant
Code :
|
Marsh Posté le 05-06-2007 à 22:41:18
Bonjour,
J'ai vu sur un site (www.meebo.com) un truc intéressant. Ce site permet de se connecter à MSN et permet le changement de son avatar.
Ce qui est intéressant c'est qu'on a donc une image qui représente l'avatar, et lorsqu'on clique dessus, une boîte de dialogue de sélection de fichier s'ouvre (comme un input file). Ca permet donc de se passer de ce composant assez moche qu'est le input type="file". Le problème c'est que j'ai pas réussi à savoir comment ils font ça.
J'ai regardé la source, il y a en fait un vrai input file qui est caché, mais impossible de trouver l'image...
Bref, quelqu'un saurait-il comment s'y prendre ?