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.

onMouseover et temps de defilement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager