onMouseover et temps de defilement

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

1 2 3 4 <a class="MsoNormal" style="font-size: 11pt;" onmouseover="javascript:getElementById('monCalque').innerHTML = 'texte2';" onmouseout="javascript:getElementById('monCalque').innerHTML = '';"> ? texte 1</a> <div id="monCalque"> </div> 
J'ai trouvé que la fonction settimeout permet de faire cela, j'ai essayé d'adapter mon code ainsi :
Code:

1 2 3 <a class="MsoNormal" style="font-size: 11pt;" onmouseover="javascript:getElementById('monCalque').innerHTML = 'texte2';" onmouseout="javascript:setTimeout (getElementById('monCalque').innerHTML='texte2', 3000);"> ? texte 1</a> <div id="monCalque"> </div> 
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.

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:

1 2 3 4 5 function linkover(obj){ obj.innerHTML="'texte2"; obj.onmouseout=function(){setTimeout(fucntion(){obj.innerHTML="texte2"},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 ...

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

Code:

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.

18/06/2008, 19h18
Bovino

Code:

obj.innerHTML="'texte2";

Ooops ! un guillemet de trop...

Code:

obj.innerHTML="texte2";
18/06/2008, 19h22
Bovino

Et :

Code:

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

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

Code:

obj.onmouseout=function(){setTimeout(function(){obj.innerHTML="texte2"},3000)}

C'ailleurs SpaceFrog,

Code:

obj.onmouseout=function(){setTimeout(obj.innerHTML="texte2",3000)}

voire

Code:

obj.onmouseout=setTimeout(obj.innerHTML="texte2",3000)

ne suffit pas ?
18/06/2008, 20h06
zaldiko

Je vous remercie de vos réponses, mais cela ne fonctionne pas le deuxiéme texte n'apparait pas.
18/06/2008, 20h11
SpaceFrog

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

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

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

Code:

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>

18/06/2008, 21h03
Bovino
Citation:

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

Citation:

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:

<body onload="quelquechose">

ou dans le script

Code:

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:

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

Et :
Code:

1 2 3 4 5 function linkover(monElement){ var obj = document.getElementById(monElement).innerHTML; var text=(obj==' '?["texte2",3000]:[' ',0]); setTimeout(function(){obj=text[0]},text[1]) }
18/06/2008, 21h16
zaldiko

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

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

Code:

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])
}

18/06/2008, 21h29
Bovino

Et si ça marche pas, ce serait possible d'avoir un lien vers la page ?
18/06/2008, 21h33
zaldiko

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

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

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

18/06/2008, 21h53
zaldiko

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.
18/06/2008, 21h59
zaldiko

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
18/06/2008, 22h00
Bovino
Ah... désolé, j'avais pas compris ça (dommage, c'est plus simple à réaliser !)

Code:

var text=(obj.innerHTML.length>1?['texte2',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:

1 2 3 4 5 function linkover(monElement){ var obj = document.getElementById(monElement); var text=(obj.innerHTML.length>1?'texte2':' '); 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...
18/06/2008, 22h16
zaldiko

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:

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

Je te remercie de ta patience.
18/06/2008, 22h25
Bovino
Code:

var text=(obj.innerHTML.length>1?['texte2',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:

1 2 3 4 5 function linkover(monElement){ var obj = document.getElementById(monElement); var text=(obj.innerHTML.length>1?'texte2':' '); 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:

var text=(obj.innerHTML.length>1?['texte2',3000]:['texte2',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 !
18/06/2008, 22h35
zaldiko
:PAvec 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:

1 2 3 4 5 function linkover(monElement){ var obj = document.getElementById(monElement); var text=(obj.innerHTML.length>1? ' ' : 'texte2'); setTimeout(function(){obj.innerHTML=text},3000) }
Je te remercie beaucoup de ton aide Bovino, je commencais à m'arracher les cheveux. Encore merci.:salut:

Voir 40 message(s) de cette discussion en une page