onMouseover et temps de defilement

**zaldiko** · 18/06/2008, 16h56

Bonjour,

Je veux créer sur mon site une animation en rollover avec un texte qui apparait lorsqu'on survole un autre texte avec la souris.
J'ai reussi grace au forum à la créer avec le code :

Code :

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

1
2
3
4
 
<p><span style="font-size: 11pt;"><a class="MsoNormal" style="font-size: 11pt;" onmouseover="javascript:getElementById('monCalque').innerHTML = '<em>texte2</em>';" onmouseout="javascript:getElementById('monCalque').innerHTML = '';"> ? texte 1</a> <br />
<div id="monCalque">&nbsp;</div>
</span></p>

J'ai trouvé que la fonction settimeout permet de faire cela, j'ai essayé d'adapter mon code ainsi :

Code :

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

1
2
3
<p><span style="font-size: 11pt;"><a class="MsoNormal" style="font-size: 11pt;" onmouseover="javascript:getElementById('monCalque').innerHTML = '<em>texte2</em>';" onmouseout="javascript:setTimeout (getElementById('monCalque').innerHTML='<em>texte2</em>', 3000);"> ? texte 1</a> <br />
<div id="monCalque">&nbsp;</div>
</span></p>

Mais avec ce code, lorsque la souris quitte le texte 1, le texte 2 ne disparait pas. J'ai du mal à régler cette fonction settimeout, car je suis novice en javascript.
Merci de votre aide.

**SpaceFrog** · 18/06/2008, 17h05

externalise tes instructions, ne les mets pas dans la balise mais dans des fonctions dans le head de la page et appelle les dans les evènements...

Code :

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

1
2
3
4
5
function linkover(obj){
obj.innerHTML="'<em>texte2</em>";
obj.onmouseout=function(){setTimeout(fucntion(){obj.innerHTML="<em>texte2</em>"},3000)}
}
<a class="MsoNormal" style="font-size: 11pt;" onmouseover="linkover(getElementById('monCalque'))"> ? texte 1</a>

ou alors un autre focntion séparée pour le linkout ...

**zaldiko** · 18/06/2008, 17h33

J'ai rentré le code suivant en séparant la fonction dans le <head> et le <body> :

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script language="javascript">
function linkover(obj){
obj.innerHTML="'<em>texte2</em>";
obj.onmouseout=function(){setTimeout(fucntion(){obj.innerHTML="<em>texte2</em>"},3000)}
}
</script> 
</head>
 
<body>
 
<a class="MsoNormal" style="font-size: 11pt;" onmouseover="linkover(getElementById('monCalque'))"> ? texte 1</a>
</body>

Mais cela ne fonctionne pas le deuxiéme texte n'apparait pas.

**Bovino** · 18/06/2008, 19h18

Code :

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

obj.innerHTML="'<em>texte2</em>";

Ooops ! un guillemet de trop...

Code :

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

obj.innerHTML="<em>texte2</em>";

**Bovino** · 18/06/2008, 19h22

Et :

Code :

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

obj.onmouseout=function(){setTimeout(fucntion(){obj.innerHTML="<em>texte2</em>"},3000)}

Un peu de vérification avant de copier coller...

Code :

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

obj.onmouseout=function(){setTimeout(function(){obj.innerHTML="<em>texte2</em>"},3000)}

C'ailleurs SpaceFrog,

Code :

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

obj.onmouseout=function(){setTimeout(obj.innerHTML="<em>texte2</em>",3000)}

voire

Code :

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

obj.onmouseout=setTimeout(obj.innerHTML="<em>texte2</em>",3000)

ne suffit pas ?

**zaldiko** · 18/06/2008, 20h06

Je vous remercie de vos réponses, mais cela ne fonctionne pas le deuxiéme texte n'apparait pas.

**SpaceFrog** · 18/06/2008, 20h11

oui desolé avec des pattes palmées je m'emporte sur le clavier et je code direct sans vérifier

Bovi ... la seconde peut être... la dernière non !
mais je préfère toujours être sur de passer une fonction dans au onclick et au setInterval, ça évite une interprétation inutile

**zaldiko** · 18/06/2008, 20h54

J'ai essayé avec les quatres, mais cela ne fonctionne pas. Cela vient peut être de mon interprétation du code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
 
<script language="javascript">
function linkover(obj){
obj.innerHTML="<em>texte2</em>";
obj.onmouseout=function(){setTimeout(function(){obj.innerHTML="<em>texte2</em>"},3000)}
}
</script> 
</head>
 
<body>
 
<a class="MsoNormal" style="font-size: 11pt;" onmouseover="linkover(getElementById('monCalque'))"> ? texte 1</a>
</body>

**Bovino** · 18/06/2008, 21h03

avec des pattes palmées je m'emporte sur le clavier et je code direct sans vérifier

L'intérêt, c'est que ça oblige à vérifier avnt de copier coller, et une faute de frappe, ça arrive à tout le monde

C'ailleurs

Plus sérieusement et pour en revenir au problème de zaldiko, pourquoi faire une fonction externe pour le onmouseover et pas pour le onmouseout ?
Je m'explique : on a constaté que le onload fonctionne différement selon qu'il est dans le body

Code :

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

<body onload="quelquechose">

ou dans le script

Code :

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

window.onload=quelquechose

Est-ce qu'il ne pourrait pas s'agir du même genre de problème...
Du coup, la solution ne serait-elle pas

Code :

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

<a class="MsoNormal" style="font-size: 11pt;" onmouseover="linkover('monCalque')" onmouseout="linkover('monCalque')"> ? texte 1</a>

Et :

Code :

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

1
2
3
4
5
function linkover(monElement){
var obj = document.getElementById(monElement).innerHTML;
var text=(obj==' '?["<em>texte2</em>",3000]:[' ',0]);
setTimeout(function(){obj=text[0]},text[1])
}

**zaldiko** · 18/06/2008, 21h16

Je viens de tester ta solution bovino, mais cela ne fonctionne pas non plus.

**Bovino** · 18/06/2008, 21h28

Oui, je me suis peut-être un peu emballé sur le coup, essaye comme ça :

Code :

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

1
2
3
4
5
function linkover(monElement){
var obj = document.getElementById(monElement);
var text=(obj.innerHTML==' '?["<em>texte2</em>",3000]:[' ',0]);
setTimeout(function(){obj.innerHTML=text[0]},text[1])
}

**Bovino** · 18/06/2008, 21h29

Et si ça marche pas, ce serait possible d'avoir un lien vers la page ?

**zaldiko** · 18/06/2008, 21h33

Je viens d'essayer également cette solution, mais cela ne fonctionne pas

**Bovino** · 18/06/2008, 21h42

D'après moi, c'est la valeur du champ vide qui pose souci, on va essayer autrement...

Code :

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

1
2
3
4
5
function linkover(monElement){
var obj = document.getElementById(monElement);
var text=(obj.innerHTML.length>1?['<em>texte2</em>',3000]:[' ',0]);
setTimeout(function(){obj.innerHTML=text[0]},text[1])
}

**zaldiko** · 18/06/2008, 21h53

Ok ce code fonctionne quand on survol avec la souris il met bien les 3 secondes avant d'afficher le texte.
Par contre quand on quitte le texte, le texte disparait de suite. Je voudrais qu'il mettent aussi 3 secondes avant de partir.

**zaldiko** · 18/06/2008, 21h59

Pardon j'avais sauté le post ou tu demandé un lien. Je t'ai mis la page en ligne avec le dernier code à l'adresse :

http://temp.fidanza-audit.fr/Untitled-11.html

**Bovino** · 18/06/2008, 22h00

Ah... désolé, j'avais pas compris ça (dommage, c'est plus simple à réaliser !)

Code :

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

var text=(obj.innerHTML.length>1?['<em>texte2</em>',3000]:[' ',0]);

Dans cette ligne, en fonction du innerHTML de ta div, on crée un tableau avec la nouvelle div et le temps d'apparition / disparition.
Donc tu peux, soit vouloir affecter une durée différente en apparition / disparition et tu gardes cette structure en modifiant les durées (ici 3000 et 0 en millisecondes), soit tu veux la même durée, et tu modifies avec ce code :

Code :

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

1
2
3
4
5
function linkover(monElement){
var obj = document.getElementById(monElement);
var text=(obj.innerHTML.length>1?'<em>texte2</em>':' ');
setTimeout(function(){obj.innerHTML=text},3000)
}

Où tu peux ajuster la durée.

Edit :
Dans la page html d'origine, ta div contient juste   c'est pour ça que j'ai essayé de prendre en compte cet espace...

**zaldiko** · 18/06/2008, 22h16

J'aurais souhaité le même temps d'affichage, mais j'ai essayé tes deux codes et dans cela le texte 2 n'apparait pas.
Si je rajoute un deuxiéme texte2 le texte apparait bien au bout de 3 secondes, mais par contre il ne disparait pas.

Code :

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

var text=(obj.innerHTML.length>1?['<em>texte2</em>',3000]:['<em>texte2</em>',0]);

Je te remercie de ta patience.

**Bovino** · 18/06/2008, 22h25

Code :

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

var text=(obj.innerHTML.length>1?['<em>texte2</em>',3000]:[' ',0]);

Ca, je l'ai mis pour ensuite t'expliquer ce qu'il fait...

Si tu souhaites la même durée, utilises :

Code :

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

1
2
3
4
5
function linkover(monElement){
var obj = document.getElementById(monElement);
var text=(obj.innerHTML.length>1?'<em>texte2</em>':' ');
setTimeout(function(){obj.innerHTML=text},3000)
}

Dans lequel tu peux modifier le 3000 par la durée de ton choix (en ms).

Pour info :

Code :

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

var text=(obj.innerHTML.length>1?['<em>texte2</em>',3000]:['<em>texte2</em>',0]);

te remplace le contenu de ta div par texte2 au survol au bout de 3s et remplace ce contenu par... le second texte2 immédiatement. Donc, on ne voit pas le changement !

**zaldiko** · 18/06/2008, 22h35

Avec le dernier code que tu m'a donné ca ne fonctionnais pas. Mais avec ton explication, je commence un peu à comprendre comment cela fonctionne.
J'ai essayé avec le code suivant et cela fonctionne parfaitement.

Code :

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

1
2
3
4
5
function linkover(monElement){
var obj = document.getElementById(monElement);
var text=(obj.innerHTML.length>1? ' ' : '<em>texte2</em>');
setTimeout(function(){obj.innerHTML=text},3000)
}

Je te remercie beaucoup de ton aide Bovino, je commencais à m'arracher les cheveux. Encore merci.

onMouseover et temps de defilement

JavaScript

Discussions similaires

Partager

Partager