Bouton-image qui change au clic de la souris
Résolu
flo4020
Messages postés
62
Statut
Membre
-
flo4020 Messages postés 62 Statut Membre -
flo4020 Messages postés 62 Statut Membre -
Bonjour,
J'aimerai savoir comment faire pour qu'un bouton (image personnalisée) se change en une autre image (plus sombre) au clic de la souris pour faire un effet de pression du bouton.
J'ai essayé d'intégrer onclic à mon code html mais ça ne marche pas...
Voici le code de mon image de menu :
J'ai regardé pas mal de recherches mais je n'arrive pas à trouver la solution. Faut il obligatoirement passer par du javascript?
D'avance merci
J'aimerai savoir comment faire pour qu'un bouton (image personnalisée) se change en une autre image (plus sombre) au clic de la souris pour faire un effet de pression du bouton.
J'ai essayé d'intégrer onclic à mon code html mais ça ne marche pas...
Voici le code de mon image de menu :
<div class="element_menu">
<h3><a href="Inscriptions.php"><img src="Inscriptionsbtn.png" alt="Inscrivez vous !" width="163" height="42" hspace="0" border="0" title="Inscriptions"
onmouseover="this.src='Inscriptionseffetover.png';"onmouseout="this.src='Inscriptionsbtn.png';"
onclick="this.src='Boutononclick.png'"
/></a></h3>
J'ai regardé pas mal de recherches mais je n'arrive pas à trouver la solution. Faut il obligatoirement passer par du javascript?
D'avance merci
4 réponses
-
Es-tu sûr que cela ne marche pas? (à première vue, le code est bon). Parce que si le fait de cliquer provoque le chargement d'une nouvelle page (en l'occurrence la page Inscriptions.php), le temps d'afficher le nouveau bouton, l'ancienne page est sans doute déjà partie !
Pour le vérifier, modifie comme suit:onclick="this.src='Boutononclick.png'; return false;"
Ce qui aura pour effet d'empêcher le lien de fonctionner... -
-
Merci pour cette réponse rapide
Tu as raison c'est bien le rechargement de l'image qui fait que ça ne marche pas...
Mais du cou je m'aperçois que ce n'est pas au clic que l'image change mais au rélachement du clic...
Pas très esthétique...
Il y aurait une autre solution?-
Mon hover ! :)
Pour ne pas généraliser sur tous les liens, je te conseil de faire un <span id='inscription'> TON lien, ton image, blabla </span>
Puis dans le fichier CSS,
#inscription:hover {
mmhh d'après mes souvenir ce serai un background-attachment avec donc le liens de ton image en plus foncé et hop
} -
-
-
