Afficher/masquer 1 div à "distance" [Résolu]

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">&#9788;</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">&#9788;</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'

18/03/2011, 12h42	#1
ChristiandeGranville Invité régulier Inscription : mars 2011 Messages : 35 Détails du profil Informations personnelles : Sexe : Localisation : France, Gers (Midi Pyrénées) Informations forums : Inscription : mars 2011 Messages : 35 Points : 7 Points : 7	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
	00

18/03/2011, 12h55	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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'; __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

18/03/2011, 13h24	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	php et sql n'ont rien à voir là dedans montre nous plutot le html généré __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

18/03/2011, 14h14	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

18/03/2011, 14h40	#10
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 761 Points : 5 761	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. __________________ Elen Poukram - Isegoria - Sandawe
	00

18/03/2011, 13h11	#3
ChristiandeGranville Invité régulier Inscription : mars 2011 Messages : 35 Détails du profil Informations personnelles : Sexe : Localisation : France, Gers (Midi Pyrénées) Informations forums : Inscription : mars 2011 Messages : 35 Points : 7 Points : 7	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.
	00

18/03/2011, 14h11	#6
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	j'adore le html généré
	00

18/03/2011, 14h36	#9
ChristiandeGranville Invité régulier Inscription : mars 2011 Messages : 35 Détails du profil Informations personnelles : Sexe : Localisation : France, Gers (Midi Pyrénées) Informations forums : Inscription : mars 2011 Messages : 35 Points : 7 Points : 7	Code html généré ? Qu'est-ce donc ?
	00

18/03/2011, 17h44	#13
ChristiandeGranville Invité régulier Inscription : mars 2011 Messages : 35 Détails du profil Informations personnelles : Sexe : Localisation : France, Gers (Midi Pyrénées) Informations forums : Inscription : mars 2011 Messages : 35 Points : 7 Points : 7	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
	00

18/03/2011, 18h09	#15
ChristiandeGranville Invité régulier Inscription : mars 2011 Messages : 35 Détails du profil Informations personnelles : Sexe : Localisation : France, Gers (Midi Pyrénées) Informations forums : Inscription : mars 2011 Messages : 35 Points : 7 Points : 7	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
	00

18/03/2011, 18h12	#16
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Développeur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 360 Points : 545 Points : 545	Pas de soucis, euh... un petit tag résolu ?
	00

18/03/2011, 18h14	#17
ChristiandeGranville Invité régulier Inscription : mars 2011 Messages : 35 Détails du profil Informations personnelles : Sexe : Localisation : France, Gers (Midi Pyrénées) Informations forums : Inscription : mars 2011 Messages : 35 Points : 7 Points : 7	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 ?
	00

18/03/2011, 18h21	#18
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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" ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

18/03/2011, 18h29	#19
ChristiandeGranville Invité régulier Inscription : mars 2011 Messages : 35 Détails du profil Informations personnelles : Sexe : Localisation : France, Gers (Midi Pyrénées) Informations forums : Inscription : mars 2011 Messages : 35 Points : 7 Points : 7	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.
	00

18/03/2011, 18h40	#20
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	en js: Code : Sélectionner tout - Visualiser dans une fenêtre à part obj.style.cursor='pointer' __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email