Probleme code html pour des boutons

Logiciel & apps Programmation
1

Bonjour, et bravo pour ce forum passionnant,

J’ai un problème de code HTML, je fais appel à vos compétences d’experts pour m’aider à le résoudre.

j’ai créé un bouton HTML avec 2 images, visant à rediriger une personne qui clique dessus. L’exemple que je fournis ici n’est qu’un brouillon
et le site vers lequel il redirige est le site ebay (ce n’est qu’un exemple).

J’ai un effet de clic qui me satisfait, cependant, je voudrais avoir un effet de “rollover” simplement quand la personne passe sa souris sur le bouton
juste avant de cliquer. je voudrais que le bouton commence à changer avant le clic, pour que l’on sache que c’est bien là qu’il faut faire un clic.
je vous soumet mon code, je suis embêté car je ne sais pas ce qu’il faut que je rajoute, ou que je modifie pour avoir effet de clic + rollover.
Je voudrais que le bouton ait le même comportement que ceux qui sont sur ce site : www.lmsoft.com…

VOICI MON CODE: (vous pouvez l’essayer car les images sont fonctionnelles (hébergées sur xooimages.com) je vous remercie beaucoup pour vos éventuelles corrections.

ESSAI BOUTON 2 images BOUTON EFFET DE CLICK AVEC 2EMME IMAGE OMBREE bouton
2

Grâce à mes compétences d’experts… s’étouffe à moitié

OnMouseDown = clic gauche de la souris enfoncé
OnMouseUp = clic gauche de la souris relaché
OnMouseOver = La souris entre en survol
OnMouseOut = La souris sors du survol

Il te faut donc 1 image de plus pour le OnMouseDown

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ESSAI BOUTON 2 images</title>
</head>
<body>
<title>BOUTON EFFET DE CLICK AVEC 2EMME IMAGE OMBREE</title>
<a href="http://www.ebay.fr/"><img
src="http://img76.xooimage.com/files/3/9/b/button-1-350ca5b.png"
alt="bouton"
onmouseover="this.src='http://img85.xooimage.com/files/3/5/0/button-2-350ca84.png'"
onmouseout="this.src='http://img76.xooimage.com/files/3/9/b/button-1-350ca5b.png'"
border="0"></a>
</body>
</html>

Edité le 31/05/2012 à 18:16

3

Utilise la fonction “hover” en css
par exanple :

HTML

<div id="Bouton">
                 <img scr="lien_de_l'image" width="150" height="150" alt="image"/>
        </div>

CSS

#Bouton:hover {
         ...
}
#Bouton:active {
         ...
}
Où vas voire ce tuto : [http://www.css3create.com/Creer-un-bouton-en-CSS3-sans-images](http://www.css3create.com/Creer-un-bouton-en-CSS3-sans-images) Edité le 09/06/2012 à 11:56