( Résolu ) Png transparent comme bouton de formulaire ?

Bonjour,

j'ai installé une image à la place du bouton submit de mon formulaire de la manière suivante :

<input type="image" src="bouton_ok.png"  height="20px" width="20px" alt="Rechercher" id="searchsubmit" value="Chercher" />

Le hic, c'est qu'à la place de l'image, j'ai un joli carré de 20x20 totalement blanc... Un problème avec le png 24 ???

Quelqu'un a une idée ?
Modifié par tybo (15 Dec 2008 - 22:49)

Le chemin vers l'image est mauvais? Tu n'as pas respecté les majuscules et les minuscules dans le nom du fichier?

Si c'est sous ie6, il ne gère pas les png transparents.

Diwatt a écrit :
Si c'est sous ie6, il ne gère pas les png transparents.

Hum...IE6 ne gère pas la transparence alpha des PNG serait une formulation plus exacte

Je serai de l'avis de Patidou, problème de chemin d'accès à l'image ou une bétise du genre...

@tybo : Une page en ligne ?

Merci pour les réponses mais :
- le chemin est bon, j'ai essayé avec le même chemin dans un autre div, ça s'affiche sans problème.

- je ne parle pas de IE6 mais de IE 7 et FF

Le problème doit être tout autre...

tybo a écrit :
Merci pour les réponses mais :
- le chemin est bon, j'ai essayé avec le même chemin dans un autre div, ça s'affiche sans problème.
Le problème doit être tout autre...

Tu reçois pour Noël pour que nous puissions constater cela de visue (en mangeant quelques conchonneries), ou tu nous donnes accès à l'ensemble des informations (une page en ligne dans l'idéal) ?

En l'occurrence, difficile de te venir en aide...

A la demande générale : http://www.pourquoi-un-blog.fr/soon/

Encore merci pour l'aide.

Le chemin est bon, l'image est affichée. Sauf qu'elle est affichée en non-transparent, donc comme c'est écrit en blanc sur fond blanc, ça se voit moins bien

Maintenant, j'arrive à l'ouvrir avec XNView et photoshop, et là la transparence fonctionne... A noter qu'elle s'affiche aussi dans l'onglet (comme un favicon) si je l'affiche seule dans FF.

Donc je dirais que ton formulaire ne la prend pas comme transparente... Peut-être peut-on spécifier qqch pour ça, comme dans les CSS backgrounds ?
Modifié par mistike (15 Dec 2008 - 15:40)

Hello

Ben si je suis ce lien pour accèder à ton image, elle est ressemble apparemment beaucoup à un carré de 20 par 20 tout blanc

Normal, il s'agit d'un texte blanc, sur fond "transparent" donc tu ne vois rien. Mais pourtant il y a quelque chose !

Peut-être quelque chose comme ça en CSS au lieu de directement dans le code :

input
{
    background: transparent url("bouton_ok.png") no-repeat;
}

Modifié par mistike (15 Dec 2008 - 15:50)

Re,

@mistike: il me semble qu'il est plus pertinent de laisser l'image dans le code html

@tybo : Article interessant sur le png en général :
http://www.css-ig.net/docs/transparence_format_png/

J'ai fait un test avec un png 8 + support canal Alpha, et le résultat semble probant

Ceci dit, pour l'effet recherché, il me semble que tu peux te passer d'une image :

<input class="Truc" type="submit" value="OK" />

.truc {
	background none;
	color:#FFF;
	font: à définir;
	etc...si besoin;
}

Devrait te donner le résultat escompté, non ?
Cela évite également les "problèmes" de gestion de transparence d'IE6...pour ce point là en tout cas, il te faudra palier à ce comportement particulier pour tes autres images...

A suivre...

Cdt,
Sylvain

J'ai résolu le problème en faisant ainsi :

<form method="get" id="searchform" action="#">
						<input type="text" value="pourquoi" onfocus="if(this.value=='pourquoi') this.value='';" onblur="if(this.value=='')this.value='pourquoi';" />
						<button type="submit" title="Rechercher"></button>
						</form>

et

button {
	width:20px;
	height:20px;
	background: url(images/bouton_ok.png);
	margin-left:5px;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='skin/default/imgs/borders.png', sizingMethod='scale');
	border:0;
	cursor:pointer;
}