11550 sujets

JavaScript, DOM et API Web HTML5

Diaporama aléatoire et survol d'image...

Bonsoir, je pense être prêt de la solution mais je suis bloqué depuis un moment.

J'ai fait un diaporama aléatoire avec 5 div différentes contenant chacune une div avec photo et une div avec texte.

Au dessus de ce diaporama il y'a des photos miniatures. J'aimerais que lorsqu'on passe la souris sur une miniature la div correspondante à la miniature s'affiche...

La page en question pour plus de clarté : http://www.thibaudchesne.com/trucidiot/index.html

	// FONCTION POUR LE DIAPORAMA AUTOMATIQUE ALEATOIRE
	
	var descripEnCours=-1; // 
	
	function remplacer()
	{
	if (descripEnCours!=-1) //signifie qu'il y'a une description affichée
		{
		document.getElementById("description"+descripEnCours).style.display="none"; //cache la description affichée
		}
		
		
		var descripSuiv=null; //Création de la variable null (inexistante)
		while(descripSuiv==null) //Tant que la variable est null (inexistante), une recherche de variable existante est lancée.
		{
		descripEnCours=Math.round(Math.random()*10); //Recherche de chiffre qui correspond à un chiffre présent dans un nom de div description.
		descripSuiv=document.getElementById("description"+descripEnCours); //Récupère dans le HTML un élément dont le nom serait description et un numéro.
		}
	
	
	var descripSuiv=document.getElementById("description"+descripEnCours);
	
	descripSuiv.style.display="block";
	setTimeout("remplacer()", 3000);
	}
Bonjour,

Le code que tu donnes ici n'est pas suffisant! Mais, en regardant le code source de la page dont tu donnes le lien, on peut constater plusieurs erreurs:
1- Dans " function afficheDescription(afficher) ", il manque le "r" à "afficherDescription(afficher)" --> la fonction n'est donc pas appelée,

2- Dans " 
<a href="#" onmouseover="afficherDescription(description1)" title="Hôtel Delacôte"><img src="images/tof1.jpg" alt=""/></a>
", il faut placer description1, description2 etc entre apostrophes !

3- La fonction afficheDescription(afficher) est à revoir.

4- Il faut un espace avant le chevron de fermeture ( /> ) des images.

Il y a peut-être encore d'autres erreurs, mais commence toujours par corriger ça Smiley cligne

Cordialement
Modifié par lddsoft (20 Mar 2011 - 09:00)
Voici le code que je te propose (et qui fonctionne):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hôtel Delacôte</title>
<link href="css/hoteldelacote.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	// FONCTION POUR LE DIAPORAMA AUTOMATIQUE ALEATOIRE
	var descripEnCours=-1; //
	var tm; // timer
	
	function remplacer()
	{
			var descripSuiv=null; //Création de la variable null (inexistante)
			while(descripSuiv==null) //Tant que la variable est null (inexistante), une recherche de variable existante est lancée.
			{
				descripEnCours=Math.floor((5)*Math.random()+1); //Recherche d'un nombre aléatoire entre 1 et 5  ( 5 représentant le nombre de photos )
				descripSuiv=document.getElementById("description"+descripEnCours); //Récupère dans le HTML un élément dont le nom serait description et un numéro.
			}
		
		var descripSuiv = document.getElementById("description"+descripEnCours);
		document.getElementById("descrip").innerHTML = descripSuiv.innerHTML;
		tm=setTimeout("remplacer()", 3000);
	}
	
	// FONCTION POUR AFFICHER LES INFOS QUAND ON PASSE LA SOURIS SUR UNE PHOTO MINIATURE
		function afficherDescription(afficher)
		{
			clearTimeout(tm); // arrêter le timer
			document.getElementById("descrip").innerHTML = document.getElementById(afficher).innerHTML;
		}
</script>
</head>
<body onload="remplacer()">
<div id="header"></div> <!--fin header-->
<div id="bandeau1"></div> <!--fin bandeau1-->
<div id="miniatures">
    <div id="tof1"><a href="#" onmouseover="afficherDescription('description1');return false;" title="Hôtel Delacôte"><img src="images/tof1.jpg" alt="" /></a></div> <!--fin tof1-->
    <div id="tof2"><a href="#" onmouseover="afficherDescription('description2');return false;" title="Restaurant"><img src="images/tof2.jpg" alt="" /></a></div> <!--fin tof2-->
    <div id="tof3"><a href="#" onmouseover="afficherDescription('description3');return false;" title="Piscine"><img src="images/tof3.jpg" alt="" /></a></div> <!--fin tof3-->
    <div id="tof4"><a href="#" onmouseover="afficherDescription('description4');return false;" title="Paysages"><img src="images/tof4.jpg" alt="" /></a></div> <!--fin tof4-->
    <div id="tof5"><a href="#" onmouseover="afficherDescription('description5');return false;" title="Réservez"><img src="images/tof5.jpg" alt="" /></a></div> <!--fin tof5-->
</div> <!--fin miniatures-->
<div id="bandeau2"></div> <!--fin bandeau2-->
<div id="descrip"></div>

<div class="description" id="description1">
	<div class="grandetof"><img src="images/grandetof1.jpg" alt="" onclick="remplacer();" /></div> <!--fin grandetof-->
	<div class="texte" id="texte1">
	<h1>Luxe, calme et volupté</h1>
	<p>
	Phasellus iaculis porttitor interdum. Curabitur vel ante quam, sed imperdiet augue. Mauris tellus leo, pharetra eget interdum eget, convallis volutpat nisi. Donec nisl eros, lobortis quis sodales at, molestie ac turpis.
	<br/><br/>
	In semper fringilla leo, nec accumsan est aliquet eget. Ut ac laoreet lacus. Curabitur ullamcorper metus tincidunt dolor tristique pharetra. Vivamus fermentum pellentesque euismod. Morbi sodales convallis nulla, eu dignissim tellus ornare vitae. Integer in nibh leo. Aenean molestie adipiscing est ac suscipit. Nullam eu tortor mauris, vel interdum dui. Sed vel lectus nisi, rutrum viverra sapien.
	<br/><br/>
	Donec a est ut lorem scelerisque interdum. Aliquam in massa nisl. Maecenas tortor tellus, egestas quis mollis non, lacinia in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tristique suscipit leo non gravida. Vivamus ultrices suscipit risus in lacinia. 
	</p>
	<p><a href="#" class="ensavoirplus">en savoir plus...</a></p>
	</div> <!--fin texte-->
</div> <!--fin description1-->

			
<div class="description" id="description2">
	<div class="grandetof"><img src="images/grandetof2.jpg" alt="" onclick="remplacer();" /></div> <!--fin grandetof-->
	<div class="texte" id="texte2">
	<h1>Nos tables</h1>
	<p>
	Phasellus iaculis porttitor interdum. Curabitur vel ante quam, sed imperdiet augue. Mauris tellus leo, pharetra eget interdum eget, convallis volutpat nisi. Donec nisl eros, lobortis quis sodales at, molestie ac turpis.
	<br/><br/>
	In semper fringilla leo, nec accumsan est aliquet eget. Ut ac laoreet lacus. Curabitur ullamcorper metus tincidunt dolor tristique pharetra. Vivamus fermentum pellentesque euismod. Morbi sodales convallis nulla, eu dignissim tellus ornare vitae. Integer in nibh leo. Aenean molestie adipiscing est ac suscipit. Nullam eu tortor mauris, vel interdum dui. Sed vel lectus nisi, rutrum viverra sapien.
	<br/><br/>
	Donec a est ut lorem scelerisque interdum. Aliquam in massa nisl. Maecenas tortor tellus, egestas quis mollis non, lacinia in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tristique suscipit leo non gravida. Vivamus ultrices suscipit risus in lacinia. 
	</p>
	<p><a href="#" class="ensavoirplus">en savoir plus...</a></p>
	</div> <!--fin texte-->
</div> <!--fin description2-->

<div class="description" id="description3">
	<div class="grandetof"><img src="images/grandetof3.jpg" alt="" onclick="remplacer();" /></div> <!--fin grandetof-->
	<div class="texte" id="texte3">
	<h1>La piscine</h1>
	<p>
	Phasellus iaculis porttitor interdum. Curabitur vel ante quam, sed imperdiet augue. Mauris tellus leo, pharetra eget interdum eget, convallis volutpat nisi. Donec nisl eros, lobortis quis sodales at, molestie ac turpis.
	<br/><br/>
	In semper fringilla leo, nec accumsan est aliquet eget. Ut ac laoreet lacus. Curabitur ullamcorper metus tincidunt dolor tristique pharetra. Vivamus fermentum pellentesque euismod. Morbi sodales convallis nulla, eu dignissim tellus ornare vitae. Integer in nibh leo. Aenean molestie adipiscing est ac suscipit. Nullam eu tortor mauris, vel interdum dui. Sed vel lectus nisi, rutrum viverra sapien.
	<br/><br/>
	Donec a est ut lorem scelerisque interdum. Aliquam in massa nisl. Maecenas tortor tellus, egestas quis mollis non, lacinia in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tristique suscipit leo non gravida. Vivamus ultrices suscipit risus in lacinia. 
	</p>
	<p><a href="#" class="ensavoirplus">en savoir plus...</a></p>
	</div> <!--fin texte-->
</div> <!--fin description3-->
			
<div class="description" id="description4">
	<div class="grandetof"><img src="images/grandetof4.jpg" alt="" onclick="remplacer();" /></div> <!--fin grandetof-->
	<div class="texte" id="texte4">
	<h1>Paysages</h1>
	<p>
	Phasellus iaculis porttitor interdum. Curabitur vel ante quam, sed imperdiet augue. Mauris tellus leo, pharetra eget interdum eget, convallis volutpat nisi. Donec nisl eros, lobortis quis sodales at, molestie ac turpis.
	<br/><br/>
	In semper fringilla leo, nec accumsan est aliquet eget. Ut ac laoreet lacus. Curabitur ullamcorper metus tincidunt dolor tristique pharetra. Vivamus fermentum pellentesque euismod. Morbi sodales convallis nulla, eu dignissim tellus ornare vitae. Integer in nibh leo. Aenean molestie adipiscing est ac suscipit. Nullam eu tortor mauris, vel interdum dui. Sed vel lectus nisi, rutrum viverra sapien.
	<br/><br/>
	Donec a est ut lorem scelerisque interdum. Aliquam in massa nisl. Maecenas tortor tellus, egestas quis mollis non, lacinia in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tristique suscipit leo non gravida. Vivamus ultrices suscipit risus in lacinia. 
	</p>
	<p><a href="#" class="ensavoirplus">en savoir plus...</a></p>
	</div> <!--fin texte-->
</div> <!--fin description4-->
			
			
<div class="description" id="description5">
	<div class="grandetof"><img src="images/grandetof5.jpg" alt="" onclick="remplacer();" /></div> <!--fin grandetof-->
	<div class="texte" id="texte5">
	<h1>Réservez</h1>
	<p>
	Phasellus iaculis porttitor interdum. Curabitur vel ante quam, sed imperdiet augue. Mauris tellus leo, pharetra eget interdum eget, convallis volutpat nisi. Donec nisl eros, lobortis quis sodales at, molestie ac turpis.
	<br/><br/>
	In semper fringilla leo, nec accumsan est aliquet eget. Ut ac laoreet lacus. Curabitur ullamcorper metus tincidunt dolor tristique pharetra. Vivamus fermentum pellentesque euismod. Morbi sodales convallis nulla, eu dignissim tellus ornare vitae. Integer in nibh leo. Aenean molestie adipiscing est ac suscipit. Nullam eu tortor mauris, vel interdum dui. Sed vel lectus nisi, rutrum viverra sapien.
	<br/><br/>
	Donec a est ut lorem scelerisque interdum. Aliquam in massa nisl. Maecenas tortor tellus, egestas quis mollis non, lacinia in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tristique suscipit leo non gravida. Vivamus ultrices suscipit risus in lacinia. 
	</p>
	<p><a href="#" class="ensavoirplus">en savoir plus...</a></p>
	</div> <!--fin texte-->
</div> <!--fin description5-->
			
<div id="footer"></div> <!--fin footer-->
</body>
</html>

Dans la feuille CSS, il faudra ajouter ou remplacer :

.description{
	background-image:url(../images/baqueugraunde.gif);
	width:960px;
	height:530px;
	margin-left:auto;
	margin-right:auto;
	display:none;
}

#descrip{
	background-image:url(../images/baqueugraunde.gif);
	width:960px;
	height:530px;
	margin-left:auto;
	margin-right:auto;
}

#descrip img {cursor:pointer}

Modifié par lddsoft (20 Mar 2011 - 15:55)
J'ai essayé ce matin, ça ne marchait pas... Je viens de me re-pencher dessus, et je me suis rendu compte que je n'avais pas rempli correctement le CSS. Enfin, bref. Tout ça pour dire que OUI, ça marche !

Merci beaucoup d'avoir passé du temps pour m'aider, c'est plus que cool !
Sujet clos
Aller à