Afficher/masquer 1 div à "distance"

**ChristiandeGranville** · 18/03/2011, 12h42

Bonjour à tous et pardon pour le titre (difficile pour moi de le formuler avec les termes exacts)

Voici le schéma des div :

--div1------------div2--
--div3------------------
--div4----div5----div6--
--div7------------------

La div7 n'étant pas visible à l'état naturel (avec display:;none),
je fais appel à vos compétences en javascript pour savoir s'il est possible de rendre visible ou invisible cette div7 en utilisant une fonction onmouseover et onmouseout sur la div2 ?

A moins qu'il soit préférable d'utiliser d'autres éléments que les div ?

Merci d'avance

**SpaceFrog** · 18/03/2011, 12h55

qu'est ce qui t'empêcherait de faire sur le onmouseover du div 2:

Code :

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

document.getElementById('iddiv7').style.display='block';

**ChristiandeGranville** · 18/03/2011, 13h11

J'ai essayé votre solution, mais sans succès.

Je précise que toutes ces div se trouvent dans un script php dans lequel chaque div récupère les variables d'une table sql.

**SpaceFrog** · 18/03/2011, 13h24

php et sql n'ont rien à voir là dedans

montre nous plutot le html généré

**ChristiandeGranville** · 18/03/2011, 14h08

Comme demandé, voici le code de ma page :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Publications</title>
<!-- http://localhost/php5/Genese/Ressources/Publications.php -->
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)">
<link rel="stylesheet" type="text/css" href="StylesFrames.css">
<script src="scd.js"></script>
</head>
<body bgcolor="white" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div style="padding-top:10px;" align="center"><font size="5">PUBLICATIONS</font></div>
<hr width="96%">
<?php
$host = "pf7-mysql.online.net";
$user = "bdgenesesql";
$pass = "--sql--";
$link = mysql_connect($host,$user,$pass);
mysql_select_db("bdgenesesql", $link);
$sql = "SELECT * FROM publications ORDER BY id DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_assoc($result)) {
 
        echo '<div id="PubliA">';
                echo '<div id="PubliA1">A12';
                echo '</div>';
                echo '<div id="PubliA2" onmouseover="document.getElementById("PubliD").style.display="block";">';
                        echo 'A3';
                echo '</div>';
        echo '</div>';
 
        echo '<div id="PubliB">B123';
        echo '</div>';
 
        echo '<div id="PubliC">';
                echo '<div id="PubliC1">C1';
                echo '</div>';
                echo '<div id="PubliC2">C2';
                echo '</div>';
                echo '<div id="PubliC3">C3';
                echo '</div>';
        echo '</div>';
 
        echo '<div id="PubliD">DD123';
        echo '</div>';
}
mysql_close($link);
?>
</body></html>

Est-ce suffisant ?

**javatwister** · 18/03/2011, 14h11

j'adore le html généré

**SpaceFrog** · 18/03/2011, 14h14

Si je ne m'abuse ...
tu rediges une serie de divs dans une boucle ...

tu te retrouveras donc avec des divs ayant le même id ....
or un id doit etre unique sur la page

**tayoze** · 18/03/2011, 14h33

Bonjour,

je pense que tu devrais commencer à modifier ton fichier généré :

http://www.w3.org/QA/2002/04/valid-dtd-list.html

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
 
<!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">
 
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
</head>
 
<body>
 
     <p>… Your HTML content here …</p>
 
</body>
</html>

**ChristiandeGranville** · 18/03/2011, 14h36

Code html généré ? Qu'est-ce donc ?

**vermine** · 18/03/2011, 14h40

Le code PhP que vous nous avez donné est le code source. Le code HTML généré est le résultat, celui qui est affiché sur la page. Clic-droit -> Afficher la source/Code source de la page. Je sais que les termes choisis par les navigateurs portent à confusion mais le HTML est bel et bien le code source de la page mais c'est aussi le code généré depuis le code PhP.

**ChristiandeGranville** · 18/03/2011, 15h16

Voici ce que vous m'avez demandé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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">
<head><title>Publications</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)">
<link rel="stylesheet" type="text/css" href="StylesFrames.css">
<script src="scd.js"></script>
</head>
<body bgcolor="white" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div style="padding-top:10px;" align="center"><font size="5">PUBLICATIONS</font></div>
<hr width="96%">
<table align="center" width="96%" border="0"><colgroup><col width="32%"><col width="32%"><col width="32%"></colgroup><tr><td align="" colspan="2"><u><font color="#000066">L'unit&eacute; dans la diversit&eacute;</font></u></td><td align="right"><div onmouseover="document.getElementById("div7").style.display="block";"><font color="#87591A">☼</font>&nbsp;&nbsp;</div></td></tr><tr><td colspan="3"><div align="left"/><div style="text-align:center;"><img src="ImagesPublications/LuniteDansLaDiversite.jpg" height="300" width="350"><div style="text-align:center;" ></div></div/></td></tr><tr><td><font size="2" color="#87591A">01 Mars 2011</font></td><td>&nbsp</td><td align="right"><font size="2" color="#87591A">15 : 03</font></td></tr><tr><td colspan="3"><div id="div7">Ou le rayonnement de l'Etre</div></td></tr><tr><td colspan="3"><hr width="100%"></td></tr></table></body></html>

J'y ai déjà introduit les recommandations que vous m'avez faites

**nadox** · 18/03/2011, 17h25

Bonjour,

Le code généré n'est pas très lisible sous cette forme...
Je le préfère ainsi :

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
 
<!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">
<head>
<title>Publications</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)">
<link rel="stylesheet" type="text/css" href="StylesFrames.css">
<script src="scd.js"></script>
</head>
<body bgcolor="white" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div style="padding-top:10px;" align="center">
	<font size="5">PUBLICATIONS</font>
</div>
<hr width="96%">
<table align="center" width="96%" border="0">
<colgroup><col width="32%"><col width="32%"><col width="32%"></colgroup>
<tr>
	<td align="" colspan="2">
		<u><font color="#000066">L'unit&eacute; dans la diversit&eacute;</font></u>
	</td>
	<td align="right">
		<div onmouseover="document.getElementById("div7").style.display="block";">
			<font color="#87591A">☼</font>&nbsp;&nbsp;
		</div>
	</td>
</tr>
<tr>
	<td colspan="3">
		<div align="left"/>
			<div style="text-align:center;">
				<img src="ImagesPublications/LuniteDansLaDiversite.jpg" height="300" width="350">
				<div style="text-align:center;">
				</div>
				</div/>
			</td>
		</tr>
		<tr>
			<td>
				<font size="2" color="#87591A">01 Mars 2011</font>
			</td>
			<td>
				&nbsp
			</td>
			<td align="right">
				<font size="2" color="#87591A">15 : 03</font>
			</td>
		</tr>
		<tr>
			<td colspan="3">
				<div id="div7">
					Ou le rayonnement de l'Etre
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="3">
				<hr width="100%">
			</td>
		</tr>
		</table>
		</body>
	</html>

Il y a plusieurs soucis avec ce code, dont la non-validité(toute balise doit être correctement fermée) ce que mon indenteur n'as pas très bien compris...
Le code javascript ne fonctionne pas à cause des doubles quotes de document.getElementById("") dans un attribut onmouseover qui est lui même définit entre double-quotes... le onmouseover est donc défini comme

Code :

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

1
2
 
<div onmouseover="document.getElementById(">

donc :

Code :

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

1
2
 
<div onmouseover="document.getElementById('div7').style.display='block';">

aura plus de chances de fonctionner...
Ceci dit, en PHP il faudra surement échapper les simples quotes ?

**ChristiandeGranville** · 18/03/2011, 17h44

Je suis d'accord sur votre raisonnement, mais comme ce code se trouve dans un script php, les doubles guillemets ne sont pas admis :

Code :

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

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\xampp\htdocs\php5\Genese\Ressources\Publications.php on line 30

**nadox** · 18/03/2011, 17h56

c'est ce que je voulais dire par "échapper les simples quotes en PHP"...

arghh je ne voulais pas écrire de PHP mais je pense qu'on pourrais faire quelque chose comme :

Code :

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

1
2
 
echo '<div onmouseover="document.getElementById(\'div7\').style.display=\'block\';">';

dans le PHP...

**ChristiandeGranville** · 18/03/2011, 18h09

Désolé de vous avoir obligé ...

Merci pour la syntaxe php car elle permet que le code javascript fonctionne.
Je connaissais les / en php, mais n'avais jamais été dans la nécessité de les utiliser.

Merci encore à vous ... et je n'oublie pas les interventions des autres membres

**nadox** · 18/03/2011, 18h12

Pas de soucis,
euh... un petit tag résolu ?

**ChristiandeGranville** · 18/03/2011, 18h14

Dernière petite question avant de classer cette discussion comme "Résolue" :

Peut-on changer la forme du pointeur quand je passe la souris sur la div où se trouve le onmouseover ?

**SpaceFrog** · 18/03/2011, 18h21

suffit de mettre dans le css

Code :

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

.lamain {cursor:pointer;}

Code :

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

<div class=lamain" ...

**ChristiandeGranville** · 18/03/2011, 18h29

Ma question concernait le javascript ... en css, je connaissais.
Je suis amateur en prommation mais en voie de progrès (grâce notamment à vous tous)

Bonne continuation.

**SpaceFrog** · 18/03/2011, 18h40

en js:

Code :

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

obj.style.cursor='pointer'

Afficher/masquer 1 div à "distance"

JavaScript

Discussions similaires

Partager

Partager