Simuler un input file avec une image

Simuler un input file avec une image - HTML/CSS - Programmation

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 ?

Reply

Marsh Posté le 05-06-2007 à 22:41:18   

Reply

Marsh Posté le 05-06-2007 à 23:32:23    

t'as un screenshot à faire voir de ce que tu as vu ? ( :heink: )


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 05-06-2007 à 23:50:09    

Voilà une capture :
http://trucs.patatefruitee.com/meebo.png
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.

Reply

Marsh Posté le 06-06-2007 à 08:51:40    

excellent ce site :love:

Reply

Marsh Posté le 06-06-2007 à 09:50:18    

Reply

Marsh Posté le 06-06-2007 à 11:38:45    


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>


Message édité par gatsu35 le 06-06-2007 à 11:39:47
Reply

Marsh Posté le 07-06-2007 à 01:26:20    

Ca ne fonctionne pas chez moi, ni sur IE, ni sur Opera, ni sur Firefox

Reply

Marsh Posté le 07-06-2007 à 09:19:42    

Code :
  1. <div style="position:relative; width:70px; height:30px; overflow:hidden; background:red url(image.png) no-repeat right top;">
  2.   <input type="file" style="font-size:600px; opacity:0; -moz-opacity:0; filter:alpha(opacity=0); float:right; cursor:pointer" />
  3. </div>
 

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


Message édité par gatsu35 le 07-06-2007 à 09:20:00
Reply

Marsh Posté le 08-06-2007 à 13:07:44    

Ca ne fonctionne toujours pas pour moi :s

Reply

Marsh Posté le 08-06-2007 à 15:51:14    

ben colle tout le code que tu as mis. [:spamafote]

Reply

Marsh Posté le 08-06-2007 à 15:51:14   

Reply

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


Message édité par PsychedeChed le 09-06-2007 à 13:56:13
Reply

Marsh Posté le 09-06-2007 à 14:16:56    

tu décrirais un peu plus ton problème on pourrait plus t'aider :o
le ca marche juste avec firefox ca m'aide pas du tout

Reply

Marsh Posté le 09-06-2007 à 14:23:00    

Voila ca marchera partout maintenant :o
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Test bordered box</title>
  5. <style type="text/css">
  6.  .inputfile {
  7.   position:relative;
  8.   width:70px;
  9.   height:30px;
  10.   overflow:hidden;
  11.   background:red url(image.png) no-repeat right top;
  12.  }
  13.  .inputfile input {
  14.   position:absolute;
  15.   right:0;
  16.   top:0;
  17.   font-size:600px;
  18.   opacity:0;
  19.   -moz-opacity:0;
  20.   filter:alpha(opacity=0);
  21.   cursor:pointer;
  22.   text-align:right;
  23.  }
  24. </style>
  25. </head>
  26. <body>
  27.   <div class="inputfile">
  28.   <input type="file" style="" />
  29. </div>
  30. </body>
  31. </html>

Reply

Marsh Posté le 09-06-2007 à 20:42:17    

Ah oui là ça marche cette fois, merci !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed