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

**zukuzu** · 18/05/2008, 00h13

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

le probleme c'est que je travaille en css externe il faudrait que je vous envoies le
code html et le css

sinon
j'ai l'impression que c'est ce que je veux "4R416N33" et "htr999" merci

mais c'est pas compatible de langage java et mon xhtml surement très bête comme question mais pas le temps de regarder moi même j'ai répondez trop vite..

en attendant je vais essayer vos reponses

**4R416N33** · 18/05/2008, 00h18

Envoies juste ton fichier html, c'est celui qui est à modifier.

On pourra te donner des orientations plus individualisées sur ce que tu veux faire plutot que de vagues exemples.

Ca t'aidera surement si tu dis que tu es debutant en JavaScript (et non Java, qui est un langage de programmation totalement différent, c'est comme si tu confondait le chanteur Renaud et la voiture Renault).

**zukuzu** · 18/05/2008, 00h33

alors j'espere que vous ne dormez pas et que ça ira..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>noir et blanc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS externe du monde de zukuzu" href="style/test_css_externe.css" />

</head>
<body>

<h1><a href="testoporto.html"><img src="images/baniere01.png" alt="le monde de zukuzu" title="le monde de zukuzu"/></a></h1>

<h2><a href="CATEGOTESTO.html" title="accès aux categories">accès aux categories</a><h2/>

<a href="categoriedessin.html"><img class="c1"src="categories/DESSIN01.png" alt="categorie DESSIN" title="categorie DESSIN"/></a>

<div class="scroll_miniature_1">



<a href="D_01_page1.html"target="_blank"><img class="D_miniature"src="images/miniature_categories/D_01a.JPG" alt="D_01" title="D_01"/></a>



<a href="D_02_arnold.html"target="_blank"><img class="D_miniature"src="images/miniature_categories/D_02a.JPG" alt="D_02" title="D_02"/></a>

</div>

<div class="apercu1_2">

<table>

<thead> 
<tr>
<th>titre</th>
</tr>
</thead>

<tfoot> 
<tr>
<th>description</th>
</tr>
</tfoot>

<tbody> 
<tr>
<td></td>

</tr>

</tbody>
</table>

</div>

</body>
</html>

dite moi si c'est suffisant ou ce que je dois rajouter comme indication

**htr999** · 18/05/2008, 00h46

et si tu précise un peu ce que tu veux faire ?.? modif sur quel endroit ?
bn

**4R416N33** · 18/05/2008, 00h55

Pour htr999, sa demande était précisée dans les commentaires de son code. ;-)

Voila, je ne te l'ai fait que pour le deuxième dessin. A toi de faire le reste sur le même modèle :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>noir et blanc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS externe du monde de zukuzu" href="style/test_css_externe.css" />
<script type="text/javascript" language="javascript">
 
 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 code1 = "<img class=\"D_miniature\" src=\"images/miniature_categories/D_02a.JPG\" alt=\"D_02\" title=\"D_02\"/>";
 
function affiche(monCodeHtml){
      if (dom) {
      document.getElementById("apercu").innerHTML = monCodeHtml;
         return;
      }
      if (ie4) {
          document.all["apercu"].innerHTML = monCodeHtml;
         return;
      }
      if (ns4) {
          with (eval('document.'+"apercu"+'.document')) {
             open();
             write(monCodeHtml);
             close();
         }
         return;
      }
}
 
</script>
 
</head>
<body>
 
<h1><a href="testoporto.html"><img src="images/baniere01.png" alt="le monde de zukuzu" title="le monde de zukuzu"/></a></h1>
 
<h2><a href="CATEGOTESTO.html" title="accès aux categories">accès aux categories</a><h2/>
 
<a href="categoriedessin.html"><img class="c1"src="categories/DESSIN01.png" alt="categorie DESSIN" title="categorie DESSIN"/></a>
 
 
<div class="scroll_miniature_1">
 
<!-- voila en fait c'est pour toute les lignes en dessous, c'est des miniatures de dessin que j'ai fait, je les ai mis dans dans un scroll, et lorsque on se deplace sur la miniature,
je voulais voir apparaitre dans la cellule principale du tableau un apercu du dessin entier-->
 
 
<a href="D_01_page1.html"target="_blank"><img class="D_miniature"src="images/miniature_categories/D_01a.JPG" alt="D_01" title="D_01"/></a>
 
<!-- voici le lien du dessin que je voudrai apercevoir dans ma cellule de tableau, les dimension ne sont pas bonne mais bon...
http://bp0.blogger.com/_64Y0ljzvtSE/RdUq6PRdL1I/AAAAAAAAAHU/qd1krOpekVU/s1600-h/Redimensionnement+de+Vohou+Mana.jpg-->
 
 
<a href="D_02_arnold.html" onMouseOver="affiche(code2)" OnMouseOut="affiche('&nbsp;');" target="_blank"><img class="D_miniature" src="images/miniature_categories/D_02a.JPG" alt="D_02" title="D_02"/></a>
<a href="D_03_page3.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_03a.JPG" alt="D_03" title="D_03"/></a>
<a href="D_04_mohikan.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_04a.JPG" alt="D_04" title="D_04"/></a>
<a href="D_05_bubu.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_05a.JPG" alt="D_05" title="D_05"/></a>
<a href="D_06_page2.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_06a.JPG" alt="D_06" title="D_06"/></a>
<a href="D_07_machette.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_07a.JPG" alt="D_07" title="D_07"/></a>
<a href="D_08_starbuckdk.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_08a.JPG" alt="D_08" title="D_08"/></a>
<a href="D_09_rubishlm.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_09a.JPG" alt="D_09" title="D_09"/></a>
<a href="D_10_marue.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_10a.JPG" alt="D_10" title="D_10"/></a>
 
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_11a.JPG" alt="D_11" title="D_11"/></a>
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_12a.JPG" alt="D_12" title="D_12"/></a>
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_13a.JPG" alt="D_13" title="D_13"/></a>
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_14a.JPG" alt="D_14" title="D_14"/></a>
 
</div>
 
<div class="apercu1_2">
 
 
<table>
 
<thead> <!-- En-tête du tableau -->
<tr>
<th>titre</th>
</tr>
</thead>
 
<tfoot> <!-- Pied de tableau -->
<tr>
<th>description</th>
</tr>
</tfoot>
 
<tbody> <!-- Corps du tableau -->
<tr>
<td><div id="apercu">&nbsp;</div></td>
 
</tr>
 
</tbody>
</table>
 
 
</div>
 
 
 
 
</body>
</html>

**zukuzu** · 18/05/2008, 00h56

oui pardon j'ai rééditer mon dernier message

oki merci je vais essayer tout de suite

**4R416N33** · 18/05/2008, 01h01

Un petit détail, pense à mettre Résolu dans ton titre, ça évitera que des ames charitables ouvrent le message pour rien et ça permettra à ceux qui ont le meme pb que toi de savoir qu'il y a une solution dans ce message !

**zukuzu** · 18/05/2008, 01h11

oui ne t'inquiètes pas j'ai bien lu les règles avant de poster..

mais j'ai du mal à tout prendre sans tout comprendre.

Penses tu que tu pourrais m'indiquer, dans les codes que tu ma mis, d'indication sur certaine choses et ligne car j'avoue me perdre facilement dans tout ça..

si vous ennuie pas trop..

**4R416N33** · 18/05/2008, 01h18

Voila, quelques commentaires dans le code, et au lieu de te le faire pour une seule image, je te l'ai fait pour deux images.

Comme ça, tu pourras voir quels sont les endroits ou tu dois modifier et comment pour finir avec toutes les images.

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>noir et blanc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS externe du monde de zukuzu" href="style/test_css_externe.css" />
<script type="text/javascript" language="javascript">
 
 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 code1 = "<img class=\"D_miniature\" src=\"images/miniature_categories/D_01a.JPG\" alt=\"D_01\" title=\"D_01\"/>";
var code2 = "<img class=\"D_miniature\" src=\"images/miniature_categories/D_02a.JPG\" alt=\"D_02\" title=\"D_02\"/>";
 
 
/**********************************************************************************
Ci dessus, le code HTML que l'on a envie d'insérer à l'intérieur du <div id="body>
Surtout, ne pas oublier le\ avant les guillemets
 
Ci dessous, une fonction qui va te permettre d'afficher du code html dans ton <div id="body">
************************************************************************************/
 
function affiche(monCodeHtml){
      if (dom) {
      document.getElementById("apercu").innerHTML = monCodeHtml;
         return;
      }
      if (ie4) {
          document.all["apercu"].innerHTML = monCodeHtml;
         return;
      }
      if (ns4) {
          with (eval('document.'+"apercu"+'.document')) {
             open();
             write(monCodeHtml);
             close();
         }
         return;
      }
}
 
</script>
 
</head>
<body>
 
<h1><a href="testoporto.html"><img src="images/baniere01.png" alt="le monde de zukuzu" title="le monde de zukuzu"/></a></h1>
 
<h2><a href="CATEGOTESTO.html" title="accès aux categories">accès aux categories</a><h2/>
 
<a href="categoriedessin.html"><img class="c1"src="categories/DESSIN01.png" alt="categorie DESSIN" title="categorie DESSIN"/></a>
 
 
<div class="scroll_miniature_1">
 
<!-- voila en fait c'est pour toute les lignes en dessous, c'est des miniatures de dessin que j'ai fait, je les ai mis dans dans un scroll, et lorsque on se deplace sur la miniature,
je voulais voir apparaitre dans la cellule principale du tableau un apercu du dessin entier-->
 
 
<a href="D_01_page1.html"onMouseOver="affiche(code1)" OnMouseOut="affiche('&nbsp;');" target="_blank"><img class="D_miniature"src="images/miniature_categories/D_01a.JPG" alt="D_01" title="D_01"/></a>
 
<!-- voici le lien du dessin que je voudrai apercevoir dans ma cellule de tableau, les dimension ne sont pas bonne mais bon...
http://bp0.blogger.com/_64Y0ljzvtSE/RdUq6PRdL1I/AAAAAAAAAHU/qd1krOpekVU/s1600-h/Redimensionnement+de+Vohou+Mana.jpg-->
 
 
<a href="D_02_arnold.html" onMouseOver="affiche(code2)" OnMouseOut="affiche('&nbsp;');" target="_blank"><img class="D_miniature" src="images/miniature_categories/D_02a.JPG" alt="D_02" title="D_02"/></a>
 
<!-----------------------------------------------------------------------------------------------
On affiche le contenu de la variable code 2 sur onMouseOver
On affiche un espace lorsque la souris s'en va
------------------------------------------------------------------------------------------------>
 
<a href="D_03_page3.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_03a.JPG" alt="D_03" title="D_03"/></a>
<a href="D_04_mohikan.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_04a.JPG" alt="D_04" title="D_04"/></a>
<a href="D_05_bubu.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_05a.JPG" alt="D_05" title="D_05"/></a>
<a href="D_06_page2.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_06a.JPG" alt="D_06" title="D_06"/></a>
<a href="D_07_machette.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_07a.JPG" alt="D_07" title="D_07"/></a>
<a href="D_08_starbuckdk.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_08a.JPG" alt="D_08" title="D_08"/></a>
<a href="D_09_rubishlm.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_09a.JPG" alt="D_09" title="D_09"/></a>
<a href="D_10_marue.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_10a.JPG" alt="D_10" title="D_10"/></a>
 
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_11a.JPG" alt="D_11" title="D_11"/></a>
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_12a.JPG" alt="D_12" title="D_12"/></a>
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_13a.JPG" alt="D_13" title="D_13"/></a>
<a href="D_01_page1.html"target="_blank"><img class="D_miniature" src="images/miniature_categories/D_14a.JPG" alt="D_14" title="D_14"/></a>
 
</div>
 
<div class="apercu1_2">
 
 
<table>
 
<thead> <!-- En-tête du tableau -->
<tr>
<th>titre</th>
</tr>
</thead>
 
<tfoot> <!-- Pied de tableau -->
<tr>
<th>description</th>
</tr>
</tfoot>
 
<tbody> <!-- Corps du tableau -->
<tr>
<td><div id="apercu">&nbsp;</div></td>
 
</tr>
 
</tbody>
</table>
 
 
</div>
 
 
 
 
</body>
</html>

**zukuzu** · 18/05/2008, 01h26

Alors la c'est parfait

merci merci merci ^________^

donc je note

4R416N33,htr999,Kerod,

merci a vous trois d'avoir pris la peine de m'aider, et pour la vitesse des réponses
je reviendrai vous emmerder le plus tard possible..

**4R416N33** · 18/05/2008, 01h30

Ok, mais alors vraiment tres tard ...

Non, je plaisante, c'est un peu le but du forum, d'aider tant que les messages sont les plus clairs possibles.

Derien et content que tu aies trouvé ta soluce

PS : Penses à mettre résolu dans le titre de ton message !!!

**htr999** · 18/05/2008, 01h31

à 4R416N33 surtout je suis que de passage

manipulation un peu poussé de ":hover"

JavaScript

Discussions similaires

Partager

Partager