manipulation un peu poussé de ":hover"

Version imprimable

17/05/2008, 21h14
zukuzu

manipulation un peu poussé de ":hover" [resolu]

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..:roll:
17/05/2008, 21h33
htr999

il te faut du javascript car tu vas modifier les éléments de ta page
:hover ne suffit pas.
17/05/2008, 21h50
Kerod

Tout dépend du besoin car tout est possible en CSS :P
17/05/2008, 22h02
htr999

pourrais-tu expliciter ?.?
aurais-tu un exemple stp ?
17/05/2008, 23h37
zukuzu

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..
17/05/2008, 23h51
Kerod

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

un exemple js en attendant :D

Code:

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>

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:

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

Ensuite, il faut faire un peu de javascript

Code:

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:

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

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

18/05/2008, 00h13
zukuzu

Citation:

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
18/05/2008, 00h18
4R416N33

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).
18/05/2008, 00h33
zukuzu

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

Citation:

<!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
18/05/2008, 00h46
htr999

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

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:

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>

18/05/2008, 00h56
zukuzu

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

oki merci je vais essayer tout de suite
18/05/2008, 01h01
4R416N33

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 !
18/05/2008, 01h11
zukuzu

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..

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:

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>

18/05/2008, 01h26
zukuzu

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..
18/05/2008, 01h30
4R416N33

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 !!!
18/05/2008, 01h31
htr999

à 4R416N33 surtout je suis que de passage :D
18/05/2008, 01h34
4R416N33

T'as raison, surtout pour moi les remerciements htr999 car je les ai bien mérité tout de même

Je veux et j'exige également des compliments concernant ma modestie et mon fair play.

(Attention : humour d'un éveillé à 1:30 du mat inside)