Afficher un texte au survol de la souris

**Death83** · 04/03/2006, 00h20

Salut a tous,

désolé de pauser une question surement simple, mai sle javascript n'est pas mon fort.

Je voudrais pouvoir faire afficher un texte sur un epage au survol d'un bouton.

Comment faire?

J'ai essayer un truc comme ca:

sur le bouton:

Code :

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

1
2
 
document.astuce.text=test;

et a l'endroit ou je veut afficher le texte:

Code :

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

<input tpye="text" id="astuce">

Ca ne marche pas comme ca.

Suis oubliger d'utiliser un input pour faire ca ou puisje faire ca avec un span ou un div?

Merci d'avance

.

**ArHacKnIdE** · 04/03/2006, 00h34

Salut,

Code :

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

OnMouseOver="document.all.texte.innerText='Salut !'"

Pour le javascript sur ton bouton,
et pour l'affichage, par exemple :

Code :

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

<p id="texte"></p>

Ce qui donnerai, pour exemple :

Code :

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

1
2
<input type=button onMouseOver="document.all.texte.innerText='Salut !'" value="Ok !">
<p id="texte"></p>

Voilà

Après à toi de te débrouiller...

Et sinon n'oublie pas...

**Death83** · 04/03/2006, 00h52

J'ai essayé ca:

document.all.astuce.innerText='Salut !';

avec:

<p id="astuce"></p>

mais ca ne marche pas

.

**Death83** · 04/03/2006, 00h53

Je réctifie, ca ne marche QUE sous IE lol.

Une idée pour que ca march esur les autres navigateurs?

**Kerod** · 04/03/2006, 02h23

Testes avec ceci :

Code :

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

1
2
<input type=button onMouseOver="document.all.astuce.innerHTML='Salut !'" value="Ok !">
<p id="astuce"></p>

Mais ca fonctionne avec FF et IE, donc ....

**Death83** · 04/03/2006, 12h06

J'ai essayer ca et ca ne fonctionne pas sous FF!

(je deteste le javascript

)

**gorgonite** · 04/03/2006, 12h17

perso, j'utiliserais plutôt une solution du type...

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
 
<style>
#astuce1 {
  visibility: hidden;
}
</style>
 
<script>
function show(i) {
  var astuce = document.getElementById('astuce'+i);
  astuce.visibility = 'visible';
}
 
function hide(i) {
  var astuce = document.getElementById('astuce'+i);
  astuce.visibility = 'hidden';
}
 
</script>
 
<div onmousover="show(1)" onmouseout="hide(1)">coucou</div>
<div id="astuce1">astuce</div>

**Death83** · 04/03/2006, 12h54

OKi je vais essayer ca.
Mais aussi il faut que je fasse attention a un truc: Il ne faut pas que le texte agrandisse la zone ou il sera affiché. Si je fais un visibility hidden, la zone (quand il n'y aura pas de texte) sera pas affiché et donc moin haute.

EN gros je veut faire le meme truc que phpbb a fait lorsqu'on suvol les bouton pour mettre des balises lorsque l'on poste un message (Taille du texte: [size=x-small]texte en petit[/size])
...

**Death83** · 04/03/2006, 14h26

J'y arrive pas

. (ou alors ca marche pas).

voila mon bouton:

Code :

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

<BUTTON type="button" class="out"   onMouseOver="this.className=\'over\';show(1);" onMouseOut="this.className=\'out\';hide(1);" onClick="BBcode(\'b\',\'postagenews\',\'news\');"><span class=bold>B</span></button>

(les \ c'est normal c'est parce que c'est dans un echo ''

l'endroit ou ca doit s'afficher:

Code :

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

<div id="astuce1">astuce</div>

Etj'ai rajouter ca dans ma feuille .js qui est lié a la page:

Code :

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

1
2
3
4
5
6
7
8
9
10
function show(i) 
{
var astuce = document.getElementById('astuce'+i);
astuce.visibility = 'visible';
}
function hide(i) 
{
var astuce = document.getElementById('astuce'+i);
astuce.visibility = 'hidden';
}

Ai-je fais une erreur?

**Auteur** · 04/03/2006, 14h48

bonjour,

est-ce genre de chose que tu souhaites faire ? (fonctionne sous IE et FF)

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
<html>
<head>
<title></title>
<style type="text/css">
<!--
span{
color: #0000FF;
font-weight: bold;
visibility: hidden;
}
 
//-->
</style>
<script type="text/javascript">
<!--
function Affiche()
{
 var elmt = document.getElementById("idDiv");
 elmt.style.visibility ="visible";
}
 
function Cache()
{
 var elmt = document.getElementById("idDiv");
 elmt.style.visibility="hidden";
}
 
//-->
</script>
 
</head>
 
<body>
<input type="button" value="Bouton" id="BNom" onmouseover="Affiche()" onmouseout="Cache()">
<br><br>
<div> bla bla bla</div>
<span id="idDiv">ceci est mon texte</span>
<div>suite du document....
 
</div>
 
</body>
 
</html>

**Death83** · 05/03/2006, 01h10

oui merci

.

Je vais adapter ca pour mon cas.

**Death83** · 05/03/2006, 01h36

Oui c'est bien ce que je veut faire sauf qu'en fait j'ai plusieurs bouton et le texte qui doit s'afficher doit etre différents au survol des différents buttons. Avec cette methode c'est toujours le meme texte qui s'affiche.

Une idée pour y arriveR?

**Auteur** · 05/03/2006, 13h05

transmet le texte à afficher comme paramètre :

1er exemple :

le   dans le span est nécessaire pour éviter un mouvement du texte qui suit le span.

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
span{
color: #0000FF;
font-weight: bold;
visibility: hidden;
}
 
//-->
</style>
<script type="text/javascript">
<!--
function Affiche(txt)
{
 var elmt = document.getElementById("idDiv");
 elmt.innerHTML = txt;
 elmt.style.visibility ="visible";
}
 
function Cache()
{
 var elmt = document.getElementById("idDiv"); 
 elmt.innerHTML = "&nbsp;";
 elmt.style.visibility="hidden";
}
 
//-->
</script>
 
</head>
 
<body>
<input type="button" value="Texte 1" id="BNom1" onmouseover="Affiche('Ceci est le texte 1')" onmouseout="Cache()">
<input type="button" value="Texte 2" id="BNom2" onmouseover="Affiche('Texte 2 Texte 2 Texte 2')" onmouseout="Cache()">
<input type="button" value="Texte 3" id="BNom3" onmouseover="Affiche('Alors c\'est ici que je dois afficher le texte 3?')" onmouseout="Cache()">
<br><br>
<div> bla bla bla</div>
<span id="idDiv">&nbsp;</span>
<div>suite du document....
 
</div>
 
</body>
 
</html>

2ème exemple (j'ai une préférence pour celui-ci) : on définit les textes à afficher dans un tableau. txt[0] contient la valeur à afficher lors du over sur le bouton. Dans ce cas c'est un index qui est transmit comme paramètre à la fonction. Tu remarqueras le onload="Cache(0)" pour initialiser le contenu du span avec la valeur par défaut.

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
51
52
53
54
55
56
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
span{
color: #0000FF;
font-weight: bold;
visibility: hidden;
}
 
//-->
</style>
<script type="text/javascript">
<!--
txt = new Array();
txt[0] =  "&nbsp;"; // valeur par defaut
txt[1] =  "Ceci est le texte 1";
txt[2] =  "Texte 2 Texte 2 Texte 2";
txt[3] =  "Alors c 'est ici que je dois afficher le texte 3?";
 
 
function Affiche(nTxt)
{
 var elmt = document.getElementById("idSpan");
 elmt.innerHTML = txt[nTxt];
 elmt.style.visibility ="visible";
}
 
function Cache(nDefaut)
{
 var elmt = document.getElementById("idSpan");
 elmt.innerHTML = "txt[nDefaut]"; //valeur par défaut
 elmt.style.visibility="hidden";
}
 
//-->
</script>
 
</head>
 
<body onload="Cache(0)">
<input type="button" value="Texte 1" id="BNom1" onmouseover="Affiche(1)" onmouseout="Cache(0)">
<input type="button" value="Texte 2" id="BNom2" onmouseover="Affiche(2)" onmouseout="Cache(0)">
<input type="button" value="Texte 3" id="BNom3" onmouseover="Affiche(3)" onmouseout="Cache(0)">
<br><br>
<div> bla bla bla</div>
<span id="idSpan"></span>
<div>suite du document....
 
</div>
 
</body>
 
</html>

N'oublie pas que le visibility=hidden n'est pas display=none : dans le 1er cas l'élément est simplement caché, second cas l'élément est retiré de la page.

**Death83** · 05/03/2006, 13h16

Oki merci

.

Histoire d'encore compliquer un peu les chose. Mettons que j'ai plusieurs formulaires comme ca sur une meme page.

DOnc j'aurais 2 fois (ou plus) <span id="idDiv"> </span>

Et ca ne sera pas valider au niveau du validateur HTML car les id ne doivent etre utilisé qu'un seul fois pour le meme nom.

Peut etre en envoyant le nom de l'id en argument suplémentaire dans la fonction ca marchera?

**Auteur** · 05/03/2006, 18h40

Peut etre en envoyant le nom de l'id en argument suplémentaire dans la fonction ca marchera?

sans aucun problème :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function Affiche(txt, idElement)
{
 var elmt = document.getElementById(idElement);
 elmt.innerHTML = txt;
 elmt.style.visibility ="visible";
}
 
function Cache(idElement)
{
 var elmt = document.getElementById(idElement);
 elmt.innerHTML = "&nbsp;"; //valeur par défaut
 elmt.style.visibility="hidden";
}

et dans le code HTML

Code :

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

1
2
3
<input type="button" value="Texte 1" id="BNom1" onmouseover="Affiche('MonTexte', 'idElement')"
onmouseout="Cache('idElement')">
<span id="idElement">&nbsp;</span>

**Death83** · 05/03/2006, 19h21

Meric beaucoup auteur je vais essayer ca

.

**Death83** · 05/03/2006, 19h28

C'est bon ca marche nickel

.

Encore merci.

Afficher un texte au survol de la souris

JavaScript

Discussions similaires

Partager

Partager