Affichage d'une div au survol (ou clic) d'une image
Bonjour ! et merci pour votre indulgence car je débute.
J'ai créé un player de musique qui marche en js + html et je voudrais que celui ci ne s'affiche que lorsqu'on clique sur une icône.
Je ne parviens pas à le faire et il ne se passe rien lorsque je mets un hover...
Merci à vous si vous avez une idée !
Voici mon code :
javascript
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| function loadSong(link,playerId)
{
var player=document.getElementById(playerId);
player.src=link.href;
player.load();
player.play();
}
function preparePlayer()
{
var links=document.getElementById("playlist").getElementsByTagName("a");
var player=document.getElementById('player');
var audioSource=document.getElementById("source");
var z;
for (z=0;z<links.length;z++)
links[z].onclick=function(e) {loadSong(this,"player");return false;};
player.addEventListener("play",function() {
var k,km=links.length;
for (k=0;k<km;k++)
{
if (audioSource.src==links[k].href)
{
audioSource.src=this.src;
this.setAttribute("data-k",k);
links[k].style.color="#E9967A";
}
else if (this.src==links[k].href)
{
this.setAttribute("data-k",k);
links[k].style.color="#E9967A";
}
else links[k].style.color="grey";
}
},false);
player.addEventListener("ended",function() {
var k=parseInt(this.getAttribute("data-k"));
if (k<(links.length-1)) k++;else k=0;
loadSong(links[k],"player");
},false);
}
window.addEventListener("load",preparePlayer,false);
</script> |
html
Code:
1
2
3
4
5
6
7
8
9
10
| <div id="MUSIC">
<audio tabindex="0" id="player" preload="auto" controls="controls">
<source id="source" src="musiques/Django_Reinhardt_La_Mer.ogg">
Votre navigateur ne reconnaît pas la balise audio HTML5
</audio>
<ul id="playlist">
<li><a href="musiques/Django_Reinhardt_La_Mer.ogg" onclick="loadSong()">Django Reinhardt - La mer</a></li>
<li><a href="musiques/Léo_Ferré_chante_Baudelaire_L_Albatros.ogg" onclick="loadSong()">Léo Ferré - L'Albatros (Baudelaire)</a></li>
</ul> |
et CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| #MUSIC{
position:fixed;
margin-top: -20%;
margin-left : 3%;
}
#player {
margin: 0;
padding: 1;
font-family: sans;
font-size: 12px;
width: 210px;
background-color: #48D1CC;
}
#playlist {
border: solid 5px #48D1CC;
font-family: "Biko";
font-size: 13px;
background-color: #777;
list-style: none;
margin: 0px;
padding: 0px;
width: 200px;
}
#playlist li:nth-child(even) {
background-color: #48D1CC;
}
#playlist li:nth-child(odd) {
background-color: #F0FFFF;
}
#playlist li a,
#playlist li a:visited,
#playlist li a:hover {
color: black;
padding-left: 2px;
padding-right: 2px;
text-decoration: none;
} |
