[Résolu par Heyoan] Galerie photo et menu déroulant incompatibles ?

Question

AnneJ

4 Nov 2007 à 16:26

Bonjour,
Je suis en train de "réaliser" une page mêlant une galerie photo et un menu déroulant horizontal, très largement inspirée des deux tutoriaux d'Alsacréations. Le problème est que je ne parviens pas à faire fonctionner les deux en même temps.
- Si le menu déroulant fonctionne, alors la galerie ne fonctionne pas (les grandes photos apparaissent dans une autre page).
- Si l'affichage des photos fonctionne, alors c'est le menu qui ne se déroule plus.

J'ai mis en ligne cette page à l'adresse suivante :
http://clicclacclub.free.fr/Pascal
Dans cette version, c'est l'affichage du menu qui ne fonctionne pas.

Le problème se situe dans le HEAD de la page HTML, je crois :


<script language="JavaScript" src="script.js">

<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//
</script>

La première ligne du code ci-dessus me permet de faire fonctionner l'affichage des photo, mais il annule la suite, qui me permets de faire fonctionner le menu déroulant.
J'espère que je suis claire. Autant en CSS et XHTML ça va, autant en Java script je ne comprends rien du tout.
Comment pourrais-je combiner tout ça, à votre avis ?

Merci pour votre aide.
AnneJ

Je vous mets l'intégralité de la page HTML ci-dessous, mais je ne sais pas si c'est vraiment utile. Pour le fichier script.js, c'est exactement le même que celui d'Alsacréations : http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript


<!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>Le site de Pascal</title>
	<meta name="Description" content="Site photographique de Pascal">
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="Keywords" content="Pascal, photo">
	<meta name="Identifier-url" content="http://???">
	<meta name="robots" content="all" />
	<link rel="stylesheet" href="accueil.css" type="text/css">
	
<script language="JavaScript" src="script.js">

<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//
</script>

</head>

<body>

<div id="entete">
	<h1>Bla bla bla</h1>
</div>


<div id="menu">
<dl onmouseout="javascript:montre('');">
	<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
	
<dl onmouseout="javascript:montre('');">
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
</ul>
</dd>
</dl>

<dl onmouseout="javascript:montre('');">	
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
</dl>
	
<dl onmouseout="javascript:montre('');">	
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
	
<dl onmouseout="javascript:montre('');">	
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>



<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="images/photo1.jpg" title="Blabla 1"><img src="images/minis/m_photo1.jpg" alt="Le titre de la photo 1" /></a></li>
		<li><a href="images/photo2.jpg" title="Blabla 2"><img src="images/minis/m_photo2.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="images/photo3.jpg" title="Blabla 3"><img src="images/minis/m_photo3.jpg" alt="Le titre de la photo 3" /></a></li>
		<li><a href="images/photo4.jpg" title="Blabla 4"><img src="images/minis/m_photo4.jpg" alt="Le titre de la photo 4" /></a></li>
		<li><a href="images/photo1.jpg" title="Blabla 1"><img src="images/minis/m_photo1.jpg" alt="Le titre de la photo 1" /></a></li>
		<li><a href="images/photo2.jpg" title="Blabla 2"><img src="images/minis/m_photo2.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="images/photo3.jpg" title="Blabla 3"><img src="images/minis/m_photo3.jpg" alt="Le titre de la photo 3" /></a></li>
		<li><a href="images/photo4.jpg" title="Blabla 4"><img src="images/minis/m_photo4.jpg" alt="Le titre de la photo 4" /></a></li>
	</ul>

	
	<dl id="photo">
		<dd><img id="big_pict" src="images/photo1.jpg" alt="Photo 1 en taille normale" /></dd>
		<dt>Titre de la photo 1</dt>
		
	</dl>
</div>


</body>
</html>

Modifié par AnneJ (05 Nov 2007 - 14:33)

AnneJ

4 Nov 2007 à 16:32

Bon, je n'arrive pas à faire fonctionner mes liens, désolée.
En recopiant les liens, ça marche en tout cas.
AnneJ

Heyoan

4 Nov 2007 à 16:46

Salut AnneJ Smiley cligne

,

on ne peut pas avoir plusieurs window.onload sur la même page Smiley murf

!

Soit tu fais :

window.onload = function() {
displayPics;
montre;
}

Soit, mieux encore, tu utilises la technique de Simon Willison :

function addLoadEvent(func)
{
   var oldonload = window.onload;
   if(typeof window.onload != 'function')
   {
      window.onload = func;
   }
   else
   {
      window.onload = function()
      {
         oldonload();
         func();
      }
   }
}

addLoadEvent(montre);

A+

PS: pour l'url, soit tu ne mets pas du tout de balises [ url=] et [ /url] (si le lien n'est pas trop long),
soit tu mets [ url=http://clicclacclub.free.fr/Pascal]mon site à moi que j'ai[ /url] (sans espaces)
Modifié par Heyoan (04 Nov 2007 - 16:47)

AnneJ

4 Nov 2007 à 18:07

Ah, je suis donc trop gourmande ! Smiley biggrin

Dommage en tout cas !
J'essaye vos techniques tout de suite Heyoan et je reviens vers vous vous dire ce qu'il en est. Merci.
AnneJ

AnneJ

4 Nov 2007 à 21:05

Eh bien je n'arrive à rien.
Pourriez-vous me dire où vous placeriez les deux textes que vous me poposez et à la place de quoi ? Je ne dois pas en faire ce qu'il faut.
Merci. Et bonne nuit...
AnneJ

Heyoan

4 Nov 2007 à 21:37

Pour la première solution, il faut supprimer la ligne window.onload = displayPics; du script script.js et remplacer window.onload=montre; par window.onload = function() ...

Pour la seconde il faut remplacer window.onload=montre; par tout le bloc function addLoadEvent(func) ... addLoadEvent(montre); Smiley smile

Et sinon c'est un peu tôt pour aller se coucher Smiley ravi

!

AnneJ

4 Nov 2007 à 22:44

Merci pour votre aide Heyoan. Je n'aurais jamais trouvé toute seule ! Smiley confused

Et, c'est vrai finalement qu'il était un peu tôt pour songer à aller se coucher... Mais ça se rapproche quand même.

J'ai essayé vos deux méthodes mais ça ne fonctionne pas plus.
Mais ai-je bien fait ce qu'il fallait ?
1. j'ai retiré window.onload = displayPics; de mon .js
2. j'ai remplacé dans le HEAD de mon HTML window.onload=montre;, par :
- window.onload = function() ... , une 1ère fois Smiley decu

- function addLoadEvent(func) ... addLoadEvent(montre); , une 2ème fois Smiley decu

Quand je fais ça (dans les deux cas, c'est la même chose), le menu ne marche pas plus qu'avant et le système d'affichage des photos ne marche plus non plus (enfin, elles s'affichent dans une nouvelle page vierge).

J'espère que vous y comprendrez quelque chose. Moi, je suis perdue, là.
AnneJ
Modifié par AnneJ (04 Nov 2007 - 22:45)

Heyoan

4 Nov 2007 à 23:01

Ma réponse n'était pas très claire Smiley murf

!

Voilà qui devrait être mieux :

<head>
	<title>Le site de Pascal</title>
	<meta name="Description" content="Site photographique de Pascal">
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="Keywords" content="Pascal, photo">
	<meta name="Identifier-url" content="http://???">
	<meta name="robots" content="all" />
	<link rel="stylesheet" href="accueil.css" type="text/css">
<script type="text/javascript">

function addLoadEvent(func)
{
   var oldonload = window.onload;
   if(typeof window.onload != 'function')
   {
      window.onload = func;
   }
   else
   {
      window.onload = function()
      {
         oldonload();
         func();
      }
   }
}

function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	// Et enfin le titre de la photo de taille normale

	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var j = 0 ; j < liens.length ; ++j) {
		// Au clique sur ces liens 
		liens[j].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}

addLoadEvent(montre);
addLoadEvent(displayPics);

</script>
</head>

Modifié par Heyoan (04 Nov 2007 - 23:08)

AnneJ

5 Nov 2007 à 13:08

Ca marche super ! Smiley ravi

Merci beaucoup beaucoup !
Le résultat ici : http://clicclacclub.free.fr/Pascal

J'ai un peu de mal parfois (c'est pas systématique) à "attraper" le sous-menu qui s'éfface avant que je n'ai eu le temps de l'atteindre. Il y aurait une formule magique aussi pour ça ?

AnneJ

Heyoan

5 Nov 2007 à 13:29

Hello,

AnneJ a écrit :
J'ai un peu de mal parfois (c'est pas systématique) à "attraper" le sous-menu qui s'éfface avant que je n'ai eu le temps de l'atteindre. Il y aurait une formule magique aussi pour ça ?

cela vient peut-être du margin-bottom de 1px sur le dt qui crée un petit espace au-dessus duquel le onmouseover est inactif Smiley rolleyes

...

Tu pourrais essayer de remplacer :

#menu dt {
	...
	margin:1px;
}

par

#menu dt {
	...
	margin:1px 1px 0;
}

A+

AnneJ

5 Nov 2007 à 14:32

Re-bonjour,
Le 1px du margin-bottom ne suffisait pas, mais ta suggestion m'a donnée quelques idées de tripatouillages. En supprimant aussi le border-top du dd (sous-menu), ça marche !
Encore merci !
AnneJ

Sujet clos

Questions générales et questions de débutants

[Résolu par Heyoan] Galerie photo et menu déroulant incompatibles ?