Afficher Cacher une Div (Java+css) petit probleme...

Bonjour,

Donc pour la deuxieme fois aujourd'hui je viens vous demandez votre aide, ca a l'air simple...
Je cherche juste a cacher une div, et a la fair ré-apparaitre lorsque l'on clique sur une image, voici la parti Javascript :

<script type="text/javascript">
function affCache(obj)
{
var el = document.getElementById(obj);
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
</script> 

Et enfin dans le body ca donne ca :

<div id="photo1" style="display:none"><a href="#" onclick="affCache('photo1');"><?php include('photo.php'); ?></a></div>

Je vous rassures tout marche bien, seulement petit probleme j'aimerais que la div soit par default à l'ouverture de la page) en display:none, et là ca ne fonctionne pas...
Pourriez-vous m'aider ?
Merci d'avance

Yo,

Il te suffit d'inverser la logique

<script type="text/javascript">
function affCache(obj)
{
var el = document.getElementById(obj);
if (el.style.display == "none") {
el.style.display = "";
} else {
el.style.display = "none";
}
}
</script> 

ou plus court

<script type="text/javascript">
	function affCache(obj)
	{
		var el = document.getElementById(obj);
		el.style.display = (el.style.display == "none") ? "" : "none";
	}
</script>

Peace
Modifié par Shinuza (03 Jul 2007 - 22:19)

Merci de m'avoir répondu

Mais j'ai essayé tes deux scripts et ca ne marche toujours pas, le probleme doit venir d'ailleurs =/

Euh, tu mets ton lien dans la div cachée, logiquement, tu ne dois pas pouvoir cliquer dessus

<div id="photo1" style="display:none">hgfygf</div>
<a href="#" onclick="affCache('photo1');">hggggg</a>

<script type="text/javascript">
	function affCache(obj)
	{
		var el = document.getElementById(obj);
		el.style.display = (el.style.display == "none") ? "block" : "";
	}
</script>

ou

<div id="photo1">hgfygf</div>
<a href="#" onclick="affCache('photo1');">hggggg</a>

<script type="text/javascript">
	function affCache(obj)
	{
		var el = document.getElementById(obj);
		el.style.display = (el.style.display == "") ? "none" : "";
	}
</script>

pour l'inverse, je n'avais pas vu que ton message était incomplet

Salut,

Le premier cas est à éviter à cause du display: none; placé sur la div. -> pas de Javascript = pas de div.
C'est à Javascript d'initialiser le style de la div, pas à CSS. Ici, le deuxième exemple laisse la div apparente au chargement de la page.

Il serait aussi préférable de passer par className en spécifiant bien le media auquel le CSS est destiné plutôt que de passer par l'objet style.
Ca permet d'éviter l'éparpillement des styles, donc de simplifier la maintenance tout en laissant la div apparente en cas d'impression, par exemple.

Le lien ne devrait pas être présent dans le xhtml car il ne sert qu'à Javascript. On évite ainsi d'avoir des liens inutiles en cas de désactivation du langage.

onclick devrait être dans le js et non dans le xhtml pour améliorer la maintenance.

Il manque le return false;

... et il serait judicieux de prendre l'objet plutôt que son id en tant qu'argument de la fonction afin de donner plus de souplesse à cette dernière.
Modifié par koala64 (03 Jul 2007 - 23:05)

Oki merci pour vos reponses, j'essai ca ce midi et je vous tiens au courant.