J'ai créé un bouton en CSS3 avec les trois positions classiques: en visualisation, en survol (hover) et en cliquage (:active) / je cherche à associer un fichier audio qui doit se déclencher quand je clique sur le bouton (:active), MAIS je ne veux pas afficher le fichier audio dans une nouvelle fenêtre, ni de voir apparaître un lecteur audio (WMP...) / je souhaite entendre seulement mon fichier audio quand je clique sur le bouton. Merci pour vos viables solutions.
Bonsoir, merci de votre réponse rapide, je souhaite préciser mon encodage sur les parties CSS3 (bouton), et HTML avec la feuille de style javascript externe, et la partie texte avec mon code HTML présentant mon bouton en lien dynamique. Je souhaite présenter mes codes du même format que votre réponse ci-dessus (arrière-plan en noir et code en couleurs), j'utilise Notepad++, sublime text2 et Netbeans de manière indifférenciée, comment faîtes vous pour présenter votre code de cette façon, encore merci
Sur l'éditeur de ta réponse tu as un logo avec un symbole inférieur supérieur qui ressemble à une balise html fermé. Tu cliques dessus et colle le code copier entre les deux 'guillemets' apparu lors de ton clic !
Merci macox et Lud00, je continue en présentant mes codes CSS3 qui présente les états de mon bouton et ensuite, comme je ne résouds toujours pas ma problématique je suis toujours ouvert aux commandes Javascript à inscrire dans ma page pour faire fonctionner ce bouton: je rappelle que je souhaite activer un fichier mp3 (audio) associé à ce bouton et lorsque je clique dessus (bouton:active), je sais que cela existe, je l'ai déjà vu, merci de vos éclairantes propositions
.bouton1 {
display: inline-block;
text-align: center;
color: rgb(0,0,50);
background-color: rgb(120,185,255);
box-shadow: 6px 8px 4px rgb(100,200,55);
border-radius: 10px;
padding:8px 12px;
width:auto;
height:auto;
}
.bouton1:hover {
display: inline-block;
text-align: center;
color: rgb(0,25,80);
background-color: rgb(120,185,255);
box-shadow: 6px 8px 4px rgb(40,100,155);
border-radius: 10px;
padding:8px 12px;
width:auto;
height:auto;
}
.bouton1:active {
display: inline-block;
text-align: center;
color: rgb(125,0,50);
background-color: rgb(120,185,255);
box-shadow: 6px 8px 4px rgb(40,10,155);
border-radius: 10px;
padding:8px 12px;
width:auto;
height:auto;
}
Première recommandation, concernant ton code CSS, évites de répéter des propriétés qui ont les mêmes valeurs entre l'état principal et les états conjoints.
Par exemple dans ton code, ce qui est ci-dessous, est répété dans button1, button1:hover et button1:active :
display: inline-block;
text-align: center;
background-color: rgb(120,185,255);
border-radius: 10px;
padding:8px 12px;
width:auto;
height:auto;
Ce qui suit, est largement suffisant et tout aussi fonctionnel :
.bouton {
display: inline-block;
text-align: center;
color: rgb(0,0,50);
background-color: rgb(120,185,255);
box-shadow: 6px 8px 4px rgb(100,200,55);
border-radius: 10px;
padding: 8px 12px;
width: auto;
height: auto;
}
.bouton:hover {
color: rgb(0,25,80);
box-shadow: 6px 8px 4px rgb(40,100,155);
}
.bouton:active {
color: rgb(125,0,50);
box-shadow: 6px 8px 4px rgb(40,10,155);
}
Deuxième recommandation, évites les chiffres dans les noms de classe.
Pour terminer, je ne vois pas en quoi le fait que le bouton soit :active ou non change quoi que ce soit pour le déclenchement du fichier audio, étant donné qu'à partir du moment que lorsque l'utilisateur va cliquer dessus, le bouton sera :active ou alors c'est que l'élément qui a la classe button est un lien et que tu confonds entre :active et :visited.
Justement macox a donné à ce que tu veux.
Il suffit de modifier button par bouton1 et son.mp3 par le lien vers ton fichier .mp3
Il faut mettre le code dans un fichier .js que tu charge dans ta page ou alors de mettre sur la meme page le code entre les balises <script></script>
Pour le bon conseil de l'économie de code et d'éviter toute redondance, merci Lartak, pour l'articulation en Javascript je n'ai pas encore mis le doigt dessus, ça ne fonctionne pas encore, maintenant, si l'un d'entre vous connaît et dispose d'un code javascript fonctionnel pour faire fonctionner un fichier audio associé à un bouton sans image donc en CSS3, et sans que le fichier s'ouvre dans un lecteur (WMP ou autre) extérieur, qu'il n'hésite surtout, surtout pas à le poster; j'ai déjà vu cela sur un site numérique,ergo, ça existe, merci au trois mousquetaires qui sont quatre "macox, Lud00, Lartak, krysenn"
Le code javascript que t'a proposé macox est fonctionnel et te permet de lire un fichier audio au click sur l'élément dont le sélecteur à la classe button dans ce cas là du code, sans ouvrir une quelconque autre page, c'est en gros comme si le fichier audio est lu en arrière plan.