11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] - Afficher - cacher images

Bonsoir,

Je suis débutant en JavaScript et je ne vois pas pourquoi le script ne fonctionne pas correctement.
L'idée est d'afficher dans un même emplacement 3 photos visibles tour à tour lorsque l'on clique sur le numéro correspondant.

Le HTML :

<div class="photog">
		<div id="ph_pav1" style="display:yes"><p><img src="./photos/salleamanger.jpg" name="salleamanger" border=0 /></p></div>
		<div id="ph_pav2" style="display:none"><p><img src="./photos/salon.jpg" name="salon" border=0 /></p></div>
		<div id="ph_pav3" style="display:none"><p><img src="./photos/pieceavivre2.jpg" name="salleamanger - salon" border=0 /></p></div>
		<div class="Numphoto"><a href="javascript:visibilite(ph_pav1);
		cache(ph_pav2);
		cache(ph_pav3);">1</a> - <a href="javascript:visibilite(ph_pav2);
		cache(ph_pav1);
		cache(ph_pav3);">2</a> - <a href="javascript:visibilite(ph_pav3);
		cache(ph_pav1);
		cache(ph_pav2);">3</a></div>
	</div>

Le script (repris sur le net)


function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}

function cache(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == ("yes" || "inline")
{
targetElement.style.display = "none" ;
} else {
targetElement.style.display = "yes" ;
}
}


D'avance merci à ceux qui peuvent m'aider.
Modifié par m@st€or@ (31 Aug 2010 - 23:06)
Modérateur
Salut,

C'est quoi ce code html et css ? certaines valeurs des attributs sont exotiques n'est ce pas ? Avant de vouloir passer à la vitesse supérieur, je te recommande de bien connaître les bases Smiley cligne

Pour te mettre sur la voie, regarde ceci (je ne suis pas fortiche en js-> Si un membre voit une grossière erreur, je le remercie par avance de me l'indiquer) :

<!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" lang="fr" xml:lang="fr">

	<head>

		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

		<title>titre page</title>

                <script type="text/javascript">

			function galerieDynamique(quelLien,quelleImage,quelTexteDescriptif){

				var image_dynamique = document.getElementById("image_dynamique");

				var lien = document.getElementById(quelLien);

				if(lien){

					lien.onclick = function(){

						image_dynamique.src = quelleImage;

						image_dynamique.alt = quelTexteDescriptif;

						self.location.hash =  "#image_dynamique";

						return false;

					}

				}else{

					alert("erreur : Pas d'élément trouvé");

				}

			}

			

			window.onload = function(){

			    galerieDynamique("un","un.jpg","un texte descriptif explicite");

			    galerieDynamique("deux","deux.jpg","un autre texte descriptif explicite");

			}

                </script>

	</head>



	<body>

		<div id="galerie">

			<h1>ma galerie</h1>

			<p><img src="un.jpg" alt="texte alternatif explicite" id="image_dynamique" /></p>

			<ul>

				<li><a href="un.jpg" id="un">image 1</a></li>

				<li><a href="deux.jpg" id="deux">image 2</a></li>

			</ul>

		</div>

	</body>

</html>


Bonne soirée
Modifié par niuxe (31 Aug 2010 - 02:45)
Merci Niuxe !

Tu m'as été d'une aide très précieuse !!
Tout fonctionne exactement comme je le souhaite grâce à toi.

Mille Merci
Sujet clos
Aller à