Afficher/masquer 1 div à "distance"

Version imprimable

18/03/2011, 12h42
ChristiandeGranville

Afficher/masquer 1 div à "distance"

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
18/03/2011, 12h55
SpaceFrog

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

Code:

document.getElementById('iddiv7').style.display='block';
18/03/2011, 13h11
ChristiandeGranville

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.
18/03/2011, 13h24
SpaceFrog

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

montre nous plutot le html généré

Comme demandé, voici le code de ma page :

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
<!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 ?

18/03/2011, 14h11
javatwister

j'adore le html généré :mouarf:
18/03/2011, 14h14
SpaceFrog

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

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:

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>

18/03/2011, 14h36
ChristiandeGranville

Code html généré ? Qu'est-ce donc ?
18/03/2011, 14h40
vermine

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

Voici ce que vous m'avez demandé :

Code:

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

Bonjour,

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

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
 
<!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:

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

donc :

Code:

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 ?

18/03/2011, 17h44
ChristiandeGranville

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:

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\xampp\htdocs\php5\Genese\Ressources\Publications.php on line 30
18/03/2011, 17h56
nadox
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:

1 2 echo '<div onmouseover="document.getElementById(\'div7\').style.display=\'block\';">';
dans le PHP...
18/03/2011, 18h09
ChristiandeGranville

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
18/03/2011, 18h12
nadox

Pas de soucis,
euh... un petit tag résolu ?:ccool:
18/03/2011, 18h14
ChristiandeGranville

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 ?
18/03/2011, 18h21
SpaceFrog

suffit de mettre dans le css

Code:

.lamain {cursor:pointer;}

Code:

<div class=lamain" ...
18/03/2011, 18h29
ChristiandeGranville

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.
18/03/2011, 18h40
SpaceFrog

en js:

Code:

obj.style.cursor='pointer'