apparition de texte au passage de la souris

programmeur400 · 08/11/2011, 15h07

Bonjour,

Voici le code js et html:

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
 
...
<body>
   <ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Images</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#" >Tango</a>
 
        <a href="#" >Falmenco</a>
        <a href="#" >L'âme</a>
        </div>
    </li>
...

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
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
 
// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();
 
	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
 
}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
 
// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}
 
// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}
 
// close layer when click-out
document.onclick = mclose;

J'aimerais que tango, falmenco et l'âme apparaisent lorsque la souris passe sur Images, ou bien, lorsque la page html qui contient ce code js et html s'affiche alors j'aimerais que tango, falmenco et l'âme apparaissent avant que l'on ne clique sur Images. Comment faire pour que n'apparaisse que Images et ensuite, lorsqu'on survole Images, apparaissent à cet instant tango, falmenco et l'âme ?

Golgotha · 08/11/2011, 15h44

Bonjour,

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
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
 
<!--functions javascript to greyed/degreyed cases-->
<script type="text/javascript">
 
 
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
 
// open hidden layer
function mopen(id,v)
{	
 
 
	el = document.getElementById(id);
	if (v)
	 el.style.display="block";
	else
	 el.style.display="none";
 
}
 
 
</script>
  </head>
<body>
   <ul id="sddm">
    <li><div  style="width:100px" onmouseover="mopen('m1',true)" onmouseout="mopen('m1',false)">
        <a href="#">Images</a></div>
        <div id="m1" style="display:none"
            onmouseover="mopen('m1',true)" 
            onmouseout="mopen('m1',false)">
        <a href="#" >Tango</a>
 
        <a href="#" >Falmenco</a>
        <a href="#" >L'âme</a>
        </div>
    </li>
    </ul>
 
  </body>
</html>

RomainVALERI · 08/11/2011, 16h53

1) Si ces 3 éléments ne sont pas des liens mais simplement du texte.... pourquoi choisir la balise <a> ?

2) Flamenco ^^

3) petite simplification :

Code :

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

1
2
3
4
// open hidden layer
function mopen(id,v) {
   document.getElementById(id).style.display = v ? "": "none";
}

(plus court, évite de créer une globale pour rien, et s'adapte à des éléments qui auraient un autre style.display que "block" par défaut)

Golgotha · 08/11/2011, 17h01

Citation:

Envoyé par RomainVALERI

1) Si ces 3 éléments ne sont pas des liens mais simplement du texte.... pourquoi choisir la balise <a> ?

2) Flamenco ^^

3) petite simplification :

Code :

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

1
2
3
4
// open hidden layer
function mopen(id,v) {
   document.getElementById(id).style.display = v ? "": "none";
}

(plus court, évite de créer une globale pour rien, et s'adapte à des éléments qui auraient un autre style.display que "block" par défaut)

Et moi qui pensais qu'on était venu me féliciter pour mon superbe travail

m'en fou moi j'aime les trucs long qui s'adapte à rien...

RomainVALERI · 08/11/2011, 17h03

Citation:

Envoyé par Golgotha

Et moi qui pensais qu'on était venu me féliciter pour mon superbe travail

4) ...et bien sûr je remercie notre chocobo punk préféré pour son superbe travail.

(eh oh en plus les deux premières remarques ne te concernent même pas, alors...

)

Bovino · 08/11/2011, 17h12

[Troll]

Citation:

Code :

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

document.getElementById(id).style.display = v ? "": "none";

A condition bien sûr que l'id "id" soit unique dans la page...

[/Troll]

Golgotha · 08/11/2011, 17h16

Citation:

Envoyé par RomainVALERI

4) ...et bien sûr je remercie notre chocobo punk préféré pour son superbe travail.

(eh oh en plus les deux premières remarques ne te concernent même pas, alors...

)

C'était juste pour travailler mon image punk

Je compte bien devenir le chocobo le plus célèbre dans les bas-fonds des forum privés de développez...

Blag appart, tu as tout a fait raison

en plus j'adore les opérateurs ternaires.
(j'ai mis 10 minutes à retrouver le terme "ternaire")

Je savais bien que Bovino rodai aux alentours

(il a du mettre une alerte dès que je met "id" dans un de mes messages

)

NoSmoking · 08/11/2011, 18h52

Bonsoir,
le CSS pur devrait convenir

Code css :

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

1
2
3
4
5
6
li div{
  display : none;
}
li:hover div{
  display : block;
}

No Javascript Inside !

RomainVALERI · 08/11/2011, 19h44

Citation:

Envoyé par NoSmoking

Bonsoir,
le CSS pur devrait convenir

Code css :

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

1
2
3
4
5
6
li div{
  display : none;
}
li:hover div{
  display : block;
}

No Javascript Inside !

Oui, c'est juste : mort à IE6 !

(quoique ici, justement comme ce sont des liens ça passerait même sur IE4

)

Bovino · 08/11/2011, 19h53

Citation:

Envoyé par RomainVALERI

quoique ici, justement comme ce sont des liens ça passerait même sur IE4

[/SIZE]

Hum... pour toi, des <li> ce sont des liens...

RomainVALERI · 08/11/2011, 22h40

Citation:

Envoyé par Bovino

Hum... pour toi, des <li> ce sont des liens...

Rhooô

j'ai même pas dit ça

Mais effectivement j'ai fait pas regardé le css en détail j'ai pensé tout de suite ":hover: et fait le rapprochement incongru avec les <a> intempestifs dont je parlais plus haut...

et donc je...

et voilà

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email