Discussion :

[isitien]

Bonjour,

Je sais pas comment faire pour avoir un retour a la ligne pour une span, voila une partie du code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$mp3 = '<span title="'.$filesize_mp3.'<br>RS"><a href="#"><img src="mp3.gif" align="absmiddle" class="Img01" /></a></span>';

Merci

[ledisciple]

Bonjour,

Je sais pas comment faire pour avoir un retour a la ligne pour une span, voila une partie du code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span title="'.$filesize_mp3.'<br>RS"><a href="#"><img src="mp3.gif" align="absmiddle" class="Img01" /></a></span>';

Merci

tu n'as pas fermer ta balise <span title .. > <br> ...

Pour le retour à la ligne tu connais déjà le <br />

[kabkab]

Bonjour,
Peux-tu décrire ce que tu souhaite avoir?
- SPAN title, je ne connaissais pas.
- Pour ledisciple, </br>, je ne connaissais pas.

[thelvin]

Ce <span> est inutile. Si tu veux juste mettre un attribut title, tu peux le faire sur n'importe quel élément, ici sur le <a>.

On ne peut pas mettre de balise dans un attribut, title ou autre. On ne peut donc pas mettre de fin de ligne dans une bulle title. Si tu en veux vraiment, il va falloir passer au bricolage et mettre du JavaScript pour avoir des bulles dont le contenu est en HTML.

[isitien]

J'ai essaye comme ca, mais sans resultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$mp3 = '<script language="JavaScript">document.write(<span title="'.$filesize_mp3.'\nLigne2">)</script>';
	$mp3 .= '<a href="#"><img src="'.$path2icons.'mp3_yes.gif" align="absmiddle" class="Img01" /></a></span>';

[thelvin]

Wolà, quand j'ai parlé de bricolage en javaScript, je voulais dire "on ne peut pas faire ça avec les infobulles normales avec title, alors à la place on va programmer des infobulles qui acceptent le html, en JavaScript."

Je sais que ça se fait, mais je ne saurais pas te donner un point de départ.

Au fond tu n'en as pas besoin, de ce retour à la ligne.

[kaiser59]

Salut,

Que souhaites-tu faire en entourant ton image avec span ??

[isitien]

Salut,

Que souhaites-tu faire en entourant ton image avec span ??

J'essaie inserer les informations du fichier son:
- Taille
- Duree
- Etc

Avec des retours a la ligne bien sur

[kohsaka]

déjà il serait bien d'avoir un peu plus de code html

je vais partir du principe suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div class="fichier">
  <img  id="logo" src="logoFichier.jpg" alt="">
  <span id="bulle">
     taille : 2Mo<br />
     durée : 02:05<br />
     etc : info
  </span>
</div>

au niveau du CSS, on va placer la bulle d'info un peu en dessous de l'image, et on la cache.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.fichier {
   position: relative;
}
 
.fichier span {
   position: absolute;
   display: none;
   /** a modifier en fonction de l'aspect que tu souhaites **/
   width: 200px;
   top: 80px;
   left: 40px;
   padding: 5px;
   background: #eeffce;
   /*****/
}

avec le javascript on va afficher a l'écran l'info bulle quand on passe sur l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 var img = window.document.getElementById('logo');
 var span = window.document.getElementById('bulle');
 
 img.onmouseover = function(){
	span.style.display = "block";
 }
 
 img.onmouseout = function(){
	span.style.display = "none";
 }

bon d'habitude je gère les éléments avec jQuery (framework javascript) mais si tu débutes mieux ne vaut pas t'embrouiller l'esprit avec ca.
du coup mon code n'est pas très optimisés (notamment le fait de passer par un ID). donc si quelqu'un peut y apporter des modif, ca m'intéresse :)

[isitien]

Je l'ai utilise comme ca, mais ca marche pas, meme l'infobulle n'apparait pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
44
 
<head>
<style>
.fichier {
   position: relative;
}
 
.fichier span {
   position: absolute;
   display: none;
   /** a modifier en fonction de l'aspect que tu souhaites **/
   width: 200px;
   top: 80px;
   left: 40px;
   padding: 5px;
   background: #eeffce;
   /*****/
}
</style>
<script language="JavaScript">
var img = window.document.getElementById('logo');
 var span = window.document.getElementById('bulle');
 
 img.onmouseover = function(){
	span.style.display = "block";
 }
 
 img.onmouseout = function(){
	span.style.display = "none";
 }
 
 
</script>
</head>
<body>
 
<div class="fichier">
  <img  id="logo" src="1.png" alt="">
  <span id="bulle">
     taille : 2Mo<br />
     durée : 02:05<br />
     etc : info
  </span>
</div>

[thelvin]

Je crois que kohsaka a oublié la partie du css qui affiche l'infobulle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.fichier:hover span {
   display: block;
}

[isitien]

ca marche toujours pas

[kohsaka]

le code suivant marche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
	.fichier {
	   position: relative;
	}
 
	.fichier span {
	   position: absolute;
	   display: none;
	   /** a modifier en fonction de l'aspect que tu souhaites **/
	   width: 200px;
	   top: 80px;
	   left: 40px;
	   padding: 5px;
	   background: #eeffce;
	   /*****/
	}
</style>
 
</head>
<body>
    <div class="fichier">
      <img  id="logo" src="1.png" alt="fsdhfsdhdf" />
      <span id="bulle">
         taille : 2Mo<br />
         durée : 02:05<br />
         etc : info
      </span>
    </div>
    <script language="JavaScript">
     var img = window.document.getElementById('logo');
     var span = window.document.getElementById('bulle');
 
     img.onmouseover = function(){
        span.style.display = "block";
     }
 
     img.onmouseout = function(){
        span.style.display = "none";
     }
 
 
    </script>
</body>
</html>

Je crois que kohsaka a oublié la partie du css qui affiche l'infobulle

non je ne l'ai pas oublié, c'ets le javascript qui passe le span en display block ou none.

[kohsaka]

je suis bete j'ai oublié qu'on pouvait faire sans javascript, mais j'ai pas le temps de le faire pour l'instant.

wait and see =)

[thelvin]

non je ne l'ai pas oublié, c'ets le javascript qui passe le span en display block ou none.

Ah exact, je n'avais pas vu que tu avais mis du JavaScript -_-°... C'est une bonne idée de préciser qu'il faut le mettre après le HTML concerné, ou alors le lancer quand la page est chargée.

[isitien]

Ca marche tres bien, merci, je l'ai developpe afin de recuperer les resultats d'une requete SQL.. mais il n'affiche que les informations de la 1ere chanson:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<?php
while ($row_an = mysql_fetch_array($query_an))
{
 
if (file_exists($file_mp3)) {
 
$mp3 = '<div class="fichier">
      <a href="#"><img  id="logo" src="'.$path2icons.'mp3_yes.gif" align="absmiddle" alt="MP3" class="Img01" /></a>
      <span id="bulle">
$chanson.'<br>.'
$taille.'<br>.'
$hits.'<br>.'
 
      </span>
 
    <script language="JavaScript">
     var img = window.document.getElementById(\'logo\');
     var span = window.document.getElementById(\'bulle\');
 
     img.onmouseover = function(){
        span.style.display = "block";
     }
 
     img.onmouseout = function(){
        span.style.display = "none";
     }
 
 
    </script>';
 
    } 
	else
	{
	$mp3 = '<img src="'.$path2icons.'mp3_no.gif" align="absmiddle" class="Img01" title="Fichier introuvable" />';
	}
 
echo $mp3;
 
}// end while
?>

[O-Zone]

Je pense que c'est un problème PHP (ou SQL) et plus un problème CSS

[kohsaka]

Oui et non O-Zone.
comme je le disais, mon code est valable uniquement avec un fichier, s'il y a plusieurs fichiers, il faut alors faire moduler toutes les variables relatives au ID car un id doit être unique sur la page.

c'est pourquoi la solution suivante (et de surcroit sans Javascript) est plus adaptée :
HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
   <p class="fichier2">
    	<a href="#">
            <img src="image.jpg" alt="mon image" border="0" />
            <span>
            	 taille : 2Mo<br />
                 durée : 02:05<br />
                 etc : info
            </span>
        </a>
    </p>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
        .fichier2 a {
	    position: relative;
	    text-decoration: none;
	    color: #990000;
	}
 
	.fichier2 a span {
	    display: none;
	    position: absolute;
	    display: none;
	    /** a modifier en fonction de l'aspect que tu souhaites **/
	    width: 200px;
	    top: 80px;
	    left: 40px;
	    padding: 5px;
            color: #000000;
	    background: #eeffce;
	    /*****/
	}
 
	.fichier2 a:hover span {
	    display: block;
	}

avec ce code tu te retrouves avec le même comportement que le précèdent code que j'ai fournis mais qui marchera indépendamment du nombre de fichiers.

[O-Zone]

ou tu gardes la première idée et tu fais en php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
$i=0;
echo '<script language="JavaScript">
	function switch(i,mode)
	{
		if(mode==\'on\') document.getElementById(\'bulle\'+i).display = "block";
		else  document.getElementById(\'bulle\'+i).display = "none";
	}
	</script>';
 
while ($row_an = mysql_fetch_array($query_an))
{
 
	if (file_exists($file_mp3)) 
	{
		$mp3 = '<div class="fichier">
		      <a href="#"><img onmouseOver="javascript:switch(i,\'on\');" onmouseOut="javascript:switch(i,\'off\');" src="'.$path2icons.'mp3_yes.gif" align="absmiddle" alt="MP3" class="Img01" /></a>
		      <span id="bulle'.$i.'">'.$chanson.'<br>'.$taille.'<br>'.$hits.'<br></span>';
	} 
	else
	{
		$mp3 = '<img src="'.$path2icons.'mp3_no.gif" align="absmiddle" class="Img01" title="Fichier introuvable" />';
	}
	echo $mp3;
	$i++;
}// end while
?>

[isitien]

Mais si j'ajoute une autre image avec span, ca ne marche pas pour la 2eme, la 1ere c'est bon, mais la 2eme non plus.