PROBLEME CODE HTML POUR DES BOUTONS

Fermé
marc2608 Messages postés 13 Date d'inscription lundi 12 janvier 2009 Statut Membre Dernière intervention 22 décembre 2015 - 31 mai 2012 à 15:42
SocialConnection Messages postés 3 Date d'inscription mercredi 23 janvier 2013 Statut Membre Dernière intervention 24 janvier 2013 - 24 janv. 2013 à 21:25
Bonjour,

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 : http://www.lmsoft.com/webcreator/webcreator4/features_fr/pages/boutons.html

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.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>ESSAI BOUTON 2 images</title>
</head>
<body>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>BOUTON EFFET DE CLICK AVEC 2EMME IMAGE OMBREE</title>
<img><a href="https://www.ebay.fr/"><img
src="http://img76.xooimage.com/files/3/9/b/button-1-350ca5b.png"
alt="bouton"
onmousedown="this.src='http://img85.xooimage.com/files/3/5/0/button-2-350ca84.png'"
onmouseup="this.src='http://img76.xooimage.com/files/3/9/b/button-1-350ca5b.png'"
border="0"></a>
</body>
</html>
A voir également:

1 réponse

SocialConnection Messages postés 3 Date d'inscription mercredi 23 janvier 2013 Statut Membre Dernière intervention 24 janvier 2013
Modifié par SocialConnection le 24/01/2013 à 21:25
Essaye ca :

<html>
<head>
<title>Image Change</title>
</head>
<body>
<script>
function change()
{
document.images["img1"].src = "http://img85.xooimage.com/files/3/5/0/button-2-350ca84.png";
}
function dechange()
{
document.images["img1"].src = "http://img76.xooimage.com/files/3/9/b/button-1-350ca5b.png";
}
</script>

<a href="https://www.ebay.fr/" onMouseOver="change()" onMouseOut="dechange()"><img src="http://img76.xooimage.com/files/3/9/b/button-1-350ca5b.png" name="img1"></a>
</body>
</html>
0