manipulation un peu poussé de ":hover"

**zukuzu** · 17/05/2008, 21h14

merci de vous être arrêté

voila un 5 jours que j'ai commencé à me faire un site,
et j'essaye de ne pas poster a tout va,

Malheureusement, comme c'est un peu précis comme question, j'ai du mal a trouver une réponse convenable.

je me lance

est-il possible de faire apparaitre une image et un texte a un endroit précis dans ma page (par exemple dans un tableau),
lorsque je me déplace sur un lien situé ailleurs dans ma page, juste avec ":hover" sans clicker dessus.

je suis débutant je travaille en xhtml sur un fichier css externe
j'espère être assez comprehensible..

**htr999** · 17/05/2008, 21h33

il te faut du javascript car tu vas modifier les éléments de ta page
:hover ne suffit pas.

**Kerod** · 17/05/2008, 21h50

Tout dépend du besoin car tout est possible en CSS

**htr999** · 17/05/2008, 22h02

pourrais-tu expliciter ?.?
aurais-tu un exemple stp ?

**zukuzu** · 17/05/2008, 23h37

meme pas le temps d'aller manger que vous répondez déjà...^^

oui Kerod, pourrais-tu m'expliquer?
car si je peux éviter java ça serai parfait je maitrise déjà mal le xhtml..

**Kerod** · 17/05/2008, 23h51

Ben il faudrait déjà donner ton code par exemple pour qu'on voit ce que tu veux faire exactement.

**htr999** · 17/05/2008, 23h54

un exemple js en attendant

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
<html>
<script type="text/javascript">
function onOver(){
	document.getElementById('divDes1').innerHTML='contenu de divDes1';
	document.getElementById('divDes2').innerHTML='<img src="monImg.png" alt="" />';
}
 
function onOut(){
	document.getElementById('divDes1').innerHTML='';
	document.getElementById('divDes2').innerHTML='';
}
</script>
<body>
<div id="div1"><a href="javascript:void(0)" onmouseover="onOver();" onmouseout="onOut();">Survole-moi</a></div>
<div id="divDes1"></div>
<table><tr><td><div id="divDes2"></div></td></tr></table>
</body>
</html>

**4R416N33** · 17/05/2008, 23h56

Ok, donc pour ta demande :

Dans ton tableau, tu mets un div qui fait la taille de ta cellule auquel tu donnes un id. Ce qui donne

Code :

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

<td><div id="mondiv"></div></td>

Ensuite, il faut faire un peu de javascript

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
 
 var ns4 = (document.layers)? true:false;         //NS 4
   var ie4 = (document.all)? true:false;         //IE 4
   var dom = (document.getElementById)? true:false;   //NS 6 ou IE 5
 
var leCodeAAfficher="du code \"html\" en prenant soin de mettre des antislash devant les guillemets";
 
function affiche(monCodeHtml){
      if (dom) {
      document.getElementById("mondiv").innerHTML = monCodeHtml;
         return;
      }
      if (ie4) {
          document.all["mondiv"].innerHTML = monCodeHtml;
         return;
      }
      if (ns4) {
          with (eval('document.'+"mondiv"+'.document')) {
             open();
             write(monCodeHtml);
             close();
         }
         return;
      }
}

et sur ton lien :

Code :

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

<a ... onMouseOver="affiche(leCodeAAfficher)" onMouseOut="affiche('&nbsp;')">

Voila, en espérant que ça t'aidera

manipulation un peu poussé de ":hover"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager