Modifier l'image de fond d'un bouton lors du survol

Version imprimable

27/12/2005, 15h45
frechy

Modifier l'image de fond d'un bouton lors du survol

Encore moi 8)

J'arrive sans problème à modifier l'affichage d'une image lors du survol de celle-ci, mais je voudrais un effet identique pour un bouton.

En fait au départ j'avais de bêtes boutons tout simples puis j'ai fait des images pour les remplacer. Au lieu de supprimer chaque bouton et de le remplacer par ses image (de base+ survol), je me suis dit que j'allais mettre comme background l'image. De cette facon je ne dois pas me préoccuper de changer les actions (submit,fonctions javascripts,...).

Voici le code actuel que j'experimente lol;

Code:

<input type="submit" name="bouton_submit45" value="" style=" background:url(images/etape2_1.gif); border:none; cursor:crosshair; height:30px; width:93px; " onMouseover="this.style='background:url(images/etape2_2.gif);'" \>

Evidement il n'apprécie pas trop mon

Code:

onMouseover="this.style='background:url(images/etape2_2.gif);'"

Je supose qu'il y a pourtant une façon de le faire... ou alors je dois me tourner vers le css?

Merci
27/12/2005, 16h36
frechy

Je viens de remarquer que les boutons avaient l'attibu "src". Je me dit cool pas besoin de passer par style background:url.

Je teste alors ceci;

Code:

<input type="submit" name="bouton_submit45" id="bouton_submit45" value="" src="images/etape2_1.gif" style="border:none; cursor:crosshair; height:30px; width:93px; " onMouseover="this.src='images/etape2_2.gif'" onMouseout="this.src='images/etape2_1.gif'" \>

Et tout ce que ca me donne c est un simple bouton sans aucune image, je ne comprends pas.

Quelqu'un aurait un début de réponse pour modifier l'image d'un bouton lors du survol?
27/12/2005, 16h42
SpaceFrog

tes images sont prelaodées ?
27/12/2005, 16h45
frechy

oui...

pour l'instant je test l'input type="image"

En esperant que j'obtienne un comportement identique à mes boutons et submit...
27/12/2005, 16h46
SpaceFrog

ben oui un bouton type image à le même comportement qu'un submit ...
27/12/2005, 16h49
Linaa

Citation:

Envoyé par frechy

Je viens de remarquer que les boutons avaient l'attibu "src". Je me dit cool pas besoin de passer par style background:url.

Je teste alors ceci;

Code:

<input type="submit" name="bouton_submit45" id="bouton_submit45" value="" src="images/etape2_1.gif" style="border:none; cursor:crosshair; height:30px; width:93px; " onMouseover="this.src='images/etape2_2.gif'" onMouseout="this.src='images/etape2_1.gif'" \>

Et tout ce que ca me donne c est un simple bouton sans aucune image, je ne comprends pas.

Quelqu'un aurait un début de réponse pour modifier l'image d'un bouton lors du survol?

Pour le src, c'est plutôt pour un input type="image"
Ensuite, pour soumettre, tu peux appeler une fonction JS au onclick du bouton
27/12/2005, 16h56
frechy

Citation:

Envoyé par SpaceFrog

ben oui un bouton type image à le même comportement qu'un submit ...

Oui mais j'ai des boutons qui ne sont pas submit...
27/12/2005, 17h35
siddh

salut,
remplaces

Code:

onMouseover="this.style='background:url(images/etape2_2.gif);'"

par

Code:

onmouseover="this.style.backgroundImage='url(images/etape2_2.gif);'"

ca devrais mieux marcher
27/12/2005, 18h49
frechy

Bon pour finir j'ai utilisé des input image, merci tout de meme poour l'info je ferai comme ca la prochaine fois.

Ou s'il n'y a pas de réponse à cette question;

2 de mes boutons font appel à des fonctions javascript dans le onclick.

Si certaines conditions sont remplies alors je submit la form, sinon j'affiche une alert.

Le problème que j'ai actuellement, vu que ce sont des boutons submit, quoi qu'il arrive, il submit quand meme la form.

Donc ma question est la suivante...est-il possible d'annuler le submit?

oui en mettant un appel de fonction sur le onsubmit du form.
si cette methode retourne true le submit se fait, sinon non :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type='text/javascript'>
function quEstCeQuOnFait(){
   if(document.getElementById('alors').value == 'part')
       return true;
   else
       return false;
}
</script>
<form method="post" action="mapage.php" onsubmit="return quEstCeQuOnFait()">
<input type="text" name="alors" id="alors" value="part pas"  />
<input type="submit" value="click me" />
</form>

28/12/2005, 12h35
frechy

Merci à tous

Je me demandais s'il existait un site reprenant l'ensemble des propriétés, méthodes, évenements,... par objet avec une courte description.

Je supose que oui mais je ne trouve rien à part des scripts tout fait...
28/12/2005, 13h12
siddh

euh ben regardes dans les post it du forum, y a un lien vers la doc javascript 1.5