Deux images pour un submit de formulaire

Version imprimable

19/06/2009, 19h35
JulienFio

Deux images pour un submit de formulaire
J'ai un formulaire que je souhaite personnaliser. J'ai remplacé le bouton submit de base par une image et j'aimerais qu'il en apparaisse une autre quand on y passe la souris dessus.

j'ai tenté quelque chose du genre :

formulaire:
Code:

1 2 3 4 <div id=send> <input src="../images/send.jpg" type="image" name="envoi" width="81" height="22" border="0"> </div>
CSS:
Code:

1 2 3 4 5 6 7 8 div#content #send:hover { width:81px; height:22px; background: url(../images/send_over.jpg); z-index:10; }
mais ça ne fonctionne pas :?

J'en profite pour vous poser une autre question : Est-ce possible d'utiliser une police de caractère "spéciale" et de faire en sorte qu'elle marche chez tous les clients (même ceux qui n'ont pas cette police d'installer en local).
19/06/2009, 21h24
12monkeys

Bonsoir

Essaye plutôt :

Code:

div#content #send input:hover {

Un lien : http://a-pellegrini.developpez.com/t...ss/formulaire/
19/06/2009, 22h10
JulienFio

Non ça ne fonctionne pas non plus comme ça :?

Comme ça alors :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#send input
{       
        width:81px;
        height:22px;
        background: url(img1.jpg);
        z-index:10;
}#send input:hover
{       
        width:81px;
        height:22px;
        background: url(img2.JPG);
        z-index:10;
        cursor:pointer;
}
</style>
</head>
 
<body>
 
<div id="send">
	<input type="submit" name="envoi" width="81" height="22" border="0">
</div>
 
</body>
</html>

Testé sous Firefox 3 et IE 7

20/06/2009, 11h33
JulienFio

Alors, sous Firefox 3.

http://img197.imageshack.us/img197/308/wrongsend.jpg http://img31.imageshack.us/img31/4838/wrongsendover.jpg la bonne image apparait quand on passe la souris mais elle se superpose avec l'autre.

Au lieu de :
http://img31.imageshack.us/img31/2374/send.jpg http://img197.imageshack.us/img197/643/sendover.jpg.

Sous IE7 :
http://img189.imageshack.us/img189/9295/wrongsendie.jpg même en hover, pas de changement d'image.
20/06/2009, 11h59
12monkeys

Peut tu nous montrer ton code...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<html>
	<head>		
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>WoD - Fiche Personnage</title>
 
		<link rel="stylesheet" type="text/css" href="CSS/Screen.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="CSS/Print.css" media="print" />
		<link rel="stylesheet" type="text/css" href="CSS/Handheld.css" media="handheld" />
		<!--[if gte IE 6]>
		<link rel="stylesheet" type="text/css" href="CSS/MSIE.css" />
		<![endif]-->
		<!--[if IE 6]>
		<link rel="stylesheet" type="text/css" href="CSS/MSIE6.css" />
		<![endif]-->
		<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" href="CSS/MSIE7.css" />
		<![endif]-->
		<style type="text/css">
		#send input
		{	
			width:81px;
			height:22px;
			background: url(../images/send.jpg);
			z-index:10;
		}
		#send input:hover
		{	
			width:81px;
			height:22px;
			background: url(../images/send_over.jpg);
			z-index:10;
			cursor:pointer;
		}
		</style>
 
 
	</head>
	<body>
 
...........
 
<div id=send>
				<input type="submit" name="envoi" width="81" height="22" border="0">	
			</div>
 
.......

20/06/2009, 12h57
12monkeys
Non en fait les images ne se superposent pas, par défaut avec l'input de type submit le navigateur indique une valeur de texte par défaut. Différent entre IE et Firefox d'ailleurs...

C'est ce texte qui se superpose avec celui que tu as dans ton image. Pour le supprimer (ou le modifier) change la valeur de l'attribut value du input :

Code:

<input type="submit" name="envoi" value="" width="81" height="22" border="0">

Egalement pour améliorer la présentation supprime la bordure du input en mettant border:0px none :
Code:

1 2 3 4 5 6 7 8 #send input { width:81px; height:22px; background: url(send.jpg); border:0px none; z-index:10; }
Pour IE7 tu dois avoir un problème de cache parce que ça passe très bien chez moi...
20/06/2009, 13h18
JulienFio

Merci c'est beaucoup mieux, par contre je ne comprend pas pourquoi il ne m'affiche pas image1... Alors que image2 s'affiche très bien, qu'elles sont dans le même dossier et que le chemin d'accès est le même..
20/06/2009, 13h21
12monkeys

Essaye de l'afficher en dur dans ta page :

Code:

<img src="../images/send.jpg" alt="image">

Tu verra si ton image est trouvée ou pas...
20/06/2009, 13h59
JulienFio

Bon ça marche, ce que je ne comprend pas c'est que pour deux images stockées au même endroits si je spécifie le même chemin pour les deux je n'en vois qu'une...

Pour image1 il m'a fallu changer le chemin...

Merci pour ton aide et ta patience :ccool: