Sons des boutons css

lynda789456 Messages postés 225 Date d'inscription Statut Membre Dernière intervention -
lynda789456 Messages postés 225 Date d'inscription Statut Membre Dernière intervention - 11 mai 2016 à 18:09

Bonsoir tous le monde !
SVP comment créer un son en cliquant sur un bouton (image) en css svp ???
Et comment changer la couleur d'une image en glissant le curseur dessus svp, avec css ?
Merci d'avance :)

Afficher la suite

A voir également:

Sons des boutons css
A quoi servent les boutons de couleur sur une telecommande - Guide
Comment réinitialiser un téléphone avec les boutons - Guide
Application pour reconnaître les boutons - Accueil - Outils
Comment telecharger des sons sur pc - Télécharger - Conversion & Extraction
Plus de sons sur mon pc - Guide

2 réponses

Réponse 1 / 2

DelNC Messages postés 2234 Date d'inscription Statut Membre Dernière intervention 2 004

Bonjour,

pour mettre du son sur le bouton, je ne sais pas faire.

Pour modifier la couleur de l'image quand on passe dessus.
(tu fais une copie de ton image et tu modifie la couleur)

<table border=1 width=100%>
<tr>
<td class="menu"><a href="welcome_page.php">bienvenue</a> </td>
<td class="menu"><a href="page1.php">Page1   </a></td>
<td class="menu"><a href="page2.php">Page2</a></td>
</tr>
</table>

Voilà le css à utiliser

td.menu {
	text-align            : center;
	font-family           : "Times New Roman";
	background-image: url('IMAGES_1.jpg');//image normale
	background-color  : lightgrey;
	width                 : 20%;
}
td.menu:hover {
	background-image: url('IMAGES_2.jpg');// image quand tu passe dessus
}

lynda789456 Messages postés 225 Date d'inscription Statut Membre Dernière intervention

Pour le changement des images, c résolu ;)
Par contre pour les sons, j'ai pas bien pigé lol
Merci beaucoup monsieur c gentil :)

Réponse 2 / 2

Hamid

Salut,
"Et comment changer la couleur d'une image en glissant le curseur dessus svp"

Hein du'ne image? Vous ne pourrez pas changer la couleur d'une image mais vous pouvez changer la couleur des éléments de la page(appelés aussi balises). Dans l'exemple de DelNC l'image ne change pas de couleur mais on change l'image par une autre, ce qui reviens au même mais ne change pas la composition d'une image.

Par ex pour changer une couleur en CSS:

/*on définit d'abord une couleur de base à l'élément ayant pour identifiant (id) test */
#test{
background-color:"#FFFFFF";/*la couleur est indiquée en héxadécimal sur 3 paires de 2 octets rouge, vert et bleu correspondant à 256 couleurs*/
}
/*avec la pseudo-classe :hover on rajoute des règles CSS pour le survol de l'élément*/
#test:hover{
background-color:"#ff0000";
}

Pour un son je pense qu'il est mieux d'utiliser javascript car c'est un langage de programmation et qu'il peut gérer des événements(-interactivité) et des valeurs(variables). Qu'il y a une API pou le lecteur audio.
On est pas obligé d'utiliser 2 fichiers mais c'est quand même mieux pour la compatibilité.

<html>
<head>
<style rel=stylesheet>
button{
float:left;
margin-right:0.33em;
padding:0.22em 0 0 0.22em;
}
</style>
</head>
<body>
<audio id=lecteur <!--style="width:1px;height:1px;"--> autoplay>
  <source id="sourceogg" src="ouaf.ogg" type="audio/ogg">
  <source id="sourcempg" src="ouaf.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button id="chien">Chien</button>
<button id="chat">Chat</button>
<button id="mouton">Mouton</button>
<script>
var ogg=document.querySelector("#sourceogg");
var mpg=document.querySelector("#sourcempg");
var changeSon=function(sonogg, sonmpg){
    ogg.src = sonogg;
    mpg.src = sonmpg;
}

// la gestion des survol des boutons
document.querySelector("#chat").addEventListener("mouseenter", function(){
changeSon("miaou.ogg","miaou.mp3"){
}
});

document.querySelector("#chien").addEventListener("mouseenter", function(){
changeSon("ouaf.ogg","ouaf.mp3"){
}
});

document.querySelector("#mouton").addEventListener("mouseenter", function(){
changeSon("beh.ogg","beh.mp3"){
}
});

// bien sûr il faut utiliser les vrais fichiers avec une URL correctement indiquée
</script>

Hamid

Ou plutôt:

<html>
<head>
<style>
button{
border:1px ridge gold;
border-radius:2.2em;
float:left;
margin-right:2em;
}
#chien{margin-left:30%;}
hr{
clear:both;
}
#lecteur{
  border:1px solid red;
  }
 #texte{
    border:3px double blue;
    padding:1em;
 }
</style>
</head>
<body id="me">
<div id="divide">
<audio id="lecteur" autoplay controls>
 <source id="sourceogg" src="ouaf.ogg" type="audio/ogg">
  <source id="sourcempg" src="ouaf.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<button id="chien">Chien</button>
<button id="chat">Chat</button>
<button id="vache">Vache</button>
<hr/>
<p id="texte">

</p>

<script>
var lecteur=document.querySelector("#lecteur");
var ogg=document.querySelector("#sourceogg");
var mpg=document.querySelector("#sourcempg");
var mytexte=document.querySelector("#texte");
var changeSon=function(animal,sonogg, sonmpg){
ogg.src = sonogg;
mpg.src = sonmpg;
mpg.src=sonmpg;
lecteur.load();// pour recharger le lecteur avec le nouveau son
mytexte.innerHTML="C'est "+animal;
}

/* la gestion des survol des boutons*/
document.querySelector("#chat").addEventListener("mouseenter", function(){

changeSon("chat","miaou.ogg","miaou.mp3");

});

document.querySelector("#chien").addEventListener("mouseenter", function(){
changeSon("chien","ouaf.ogg","ouaf.mp3");
});

document.querySelector("#vache").addEventListener("mouseenter", function(){
changeSon("vache","meuh.ogg","meuh.mp3");
});

</script>

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS

Votre réponse

Discussions similaires