Discussion :

[bubulemaster]

Bonjour,

en visitant le site Ubuntu (http://www.ubuntu-fr.org/) j'ai découvert qu'il était possible d'afficher une image dans une input. Comment cela est possible ? Car ce n'est pas le paramètre background (j'ai essayé) car on ne peut pas taper du texte sur l'image.

[BnA]

Salut!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="image" name="xxx" value="yyy" src="image.gif" />

[bubulemaster]

Non, une image dans un input, pas dans un form. Si tu regarde sur le site Ubuntu, dans la zone de saisie recherche, tu as un loupe juste devant le texte à saisir et c'est ça que je me demande comment ils font.
J'ai regardé le code HTML et je n'ai rien trouvé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    <form action="/search/index.php" method="get" id="search">
          <fieldset>
            <input type="text" name="q" id="q" value="Recherche rapide..." onfocus="this.value='';" title="Saisissez les mots-clés à rechercher"/>
            <select name="in" id="in" title="Dans le..">
              <option value="wiki">Documentation</option>
              <option value="forum">Forum</option>
              <option value="planet">Planet</option>
 
            </select>
            <input type="submit" value="ok"/>
          </fieldset>
        </form>

[BnA]

Ah ok, je vois...

Je ne connaissais pas la solution, mais quand tu regarde la source de la page, tu vois que l'input à un style CSS qui est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
background: #FFFFFF url(img/q.png) no-repeat scroll 3px center;

[mLk92]

surement un value ?

[mLk92]

Autant pour moi, c'est comme je le pensais ...

un Background !

code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="q" id="q" value="Recherche rapide..." onfocus="this.value='';" title="Saisissez les mots-clés à rechercher"/>

code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#search #q{
			width: 15em;
			padding: 2px 2px 2px 20px;
			background: #fff url(img/q.png) no-repeat 3px center;
			}

Voili Voilou Voilà

[mLk92]

LoL BnA Vive le mode "Editer" sur le forum

[BnA]

LoL BnA Vive le mode "Editer" sur le forum

Shhhhtt!!!


Et juste pour info, la taille de l'image en question est de 16x16 pixels... Bon à savoir!

[bubulemaster]

Merci les gars, ça fonctionne. Je n'arrivais pas à accèder au feuille de style, le site m'envoyait balader.

[BnA]

Essaie d'installer FireBug sur Firefox, un plugin vraiment génial pour parcourir (et modifier en temps réel) le code d'une page web.

[mLk92]

Essaie d'installer FireBug sur Firefox, un plugin vraiment génial pour parcourir (et modifier en temps réel) le code d'une page web.

Ouh pinez ! Trop bien FireBUG ! Je kiff !

Merci !