Mettre une img enFermé

Question

Bonjour à tous,

J'ai déjà posé la question, mais Okuni n'a certainement pas compris ce que je voulais.

J'ai fait un petit moteur de recherches interne qui est totalement opérationnel.

Dans le champ de recherche de mots-clés, à l'affichage il y a de marquer "Recherche" et quand on clique dans ce champ, ça s'efface.
Donc, de ce côté là, c'est OK.

Ce que je voudrais savoir c'est, si à la place du texte on ne pouivait pas y mettre une image; du genre une petite loupe à gauche suivie du texte, et quand on clique le champ, ça s'efface ?

<input type="submit" name="Submit" value="Rechercher" style="cursor:pointer" />

J'ai essayé mais aucun résultat positif.

Merci de votre aide.

Groarh · Answer

Ouaip !
J'ai vu ça sur les champs de recherche que Google vous propose d'ajouter à votre site. C'est une astuce assez élégante je dois dire. Elle utilise la propriété css background et l'évènement focus. Tu vois déjà où je veux en venir ?

Tiens en passant : mets ton style cursor dans un css, c'est mieux. input[type=submit] { cursor: pointer }

Bon. On va dire un truc du genre : <input type="text" id="recherche" />En réalité, il n'y a pas de texte, car le texte est contenu dans l'image de fond avec la petite loupe !
#recherche { background: url(...) no-repeat left }
Reste plus qu'à écrire le comportement au focus :
function clearOnFocus() {
	document.getElementById('recherche').style.background = 'none';
}

Et tu l'attaches avec un gestionnaire d'évènement, ou bien à l'ancienne (ce que je déconseille mais bon...) avec l'attribut onfocus.

Voilà ;)

Mettre une img en

1 réponse

Discussions similaires

Newsletters