Deux images pour un submit de formulaire

**JulienFio** · 19/06/2009, 19h35

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 :

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

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 :

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

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).

**12monkeys** · 19/06/2009, 21h24

Bonsoir

Essaye plutôt :

Code :

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

div#content #send input:hover {

Un lien : http://a-pellegrini.developpez.com/t...ss/formulaire/

**JulienFio** · 19/06/2009, 22h10

Non ça ne fonctionne pas non plus comme ça

**12monkeys** · 19/06/2009, 22h54

Comme ça alors :

Code html :

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

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

**JulienFio** · 20/06/2009, 11h33

Alors, sous Firefox 3.

la bonne image apparait quand on passe la souris mais elle se superpose avec l'autre.

Au lieu de :

.

Sous IE7 :

même en hover, pas de changement d'image.

**12monkeys** · 20/06/2009, 11h59

Peut tu nous montrer ton code...

**JulienFio** · 20/06/2009, 12h24

Code :

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

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>
 
.......

**12monkeys** · 20/06/2009, 12h57

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 html :

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

<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 :

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

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...

**JulienFio** · 20/06/2009, 13h18

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..

**12monkeys** · 20/06/2009, 13h21

Essaye de l'afficher en dur dans ta page :

Code html :

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

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

Tu verra si ton image est trouvée ou pas...

**JulienFio** · 20/06/2009, 13h59

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

Deux images pour un submit de formulaire

CSS

Discussions similaires

Partager

Partager