11550 sujets

JavaScript, DOM et API Web HTML5

Contenu dynamique qui n'apparaît pas.

Voilà j'ai lié le contenu de ma page. J'ai intégré une petite fonction javascript sur mes liens pour qu'un contenu apparaisse dynamiquement sous forme de calques superposé mais cela ne fonctionne pas et rien n'apparaît. Mais d'où vient le problème???
Merci d'avance pour votre aide. 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css" media="all">
*{
margin:0px;
padding:0px;
border:0px;
list-style-type:none;
}

h1{
margin:10px 0 0 10px;
}

div#wrap{
position:relative;
width:890px;
margin:0 auto;
}

ul#menu{
position:relative;
padding:10px;
}

ul#menu li{
height:135px;
width:135px;
background-color:green;
}

ul#menu li a{
display:block;
height:100%;
width:100%;
}

ul#menu li a:hover{
}

li#one{
margin-bottom:12px;
}

li#one a{
background:url(images/articles1.png) no-repeat 0 0;
}

li#one a:hover{
background:url(images/articles1.png) yellow no-repeat -135px 0;
}

li#two{
margin-bottom:12px;
}

li#two a{
background:url(images/articles2.png) no-repeat 0 0;
}

li#two a:hover{
background:url(images/articles2.png) yellow no-repeat -135px 0;
}

li#three{
margin-bottom:12px;
}

li#three a{
background:url(images/articles3.png) no-repeat 0 0;
}

li#three a:hover{
background:url(images/articles3.png) yellow no-repeat -135px 0;
}

li#four a{
background:url(images/articles4.png) no-repeat 0 0;
}

li#four a:hover{
background:url(images/articles4.png) yellow no-repeat -135px 0;
}

li#five{
position:absolute;
top:451px;
left:157px;
}

li#five a{
background:url(images/articles5.png) no-repeat 0 0;
}

li#five a:hover{
background:url(images/articles5.png) yellow no-repeat -135px 0;
}

li#six{
position:absolute;
top:451px;
left:304px;
}

li#six a{
background:url(images/articles6.png) no-repeat 0 0;
}

li#six a:hover{
background:url(images/articles6.png) yellow no-repeat -135px 0;
}

li#seven{
position:absolute;
top:451px;
left:451px;
}

li#seven a{
background:url(images/articles7.png) no-repeat 0 0;
}

li#seven a:hover{
background:url(images/articles7.png) yellow no-repeat -135px 0;
}

li#height{
position:absolute;
top:451px;
left:598px;
}

li#height a{
background:url(images/articles8.png) no-repeat 0 0;
}

li#height a:hover{
background:url(images/articles8.png) yellow no-repeat -135px 0;
}

li#nine{
position:absolute;
top:451px;
left:745px;
}

li#nine a{
background:url(images/articles9.png) no-repeat 0 0;
}

li#nine a:hover{
background:url(images/articles9.png) yellow no-repeat -135px 0;
}

li#ten{
position:absolute;
top:304px;
left:745px;
}

li#ten a{
background:url(images/articles10.png) no-repeat 0 0;
}

li#ten a:hover{
background:url(images/articles10.png) yellow no-repeat -135px 0;
}

li#eleven{
position:absolute;
top:157px;
left:745px;
}

li#eleven a{
background:url(images/articles11.png) no-repeat 0 0;
}

li#eleven a:hover{
background:url(images/articles11.png) yellow no-repeat -135px 0;
}

li#thwelve{
position:absolute;
top:10px;
left:745px;
}

li#thwelve a{
background:url(images/articles12.png) no-repeat 0 0;
}

li#thwelve a:hover{
background:url(images/articles12.png) yellow no-repeat -135px 0;
}

div#wrap div.cadre{
height:429px;
width:576px;
position:absolute;
top:106px;
left:156px;
}

body div#wrap div#id1 {
display:none;
} 

body div#wrap div#id2 {
 display:none;
} 

body div#wrap div#id3 {
 display:none;
} 

body div#wrap div#id4 {
 display:none;
} 

</style>

<script type="text/javascript">
<!--
function afficheTexte(cadre) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById("id4").style.display="none";
document.getElementById("idn").style.display="none";
document.getElementById(cadre).style.display="block";
}
//-->
</script>

</head>

<body>
	<div id="wrap">
    	<h1><img src="images/logo.gif"/></h1>
		<ul id="menu">
        	<li id="one" onClick="afficheTexte('id1')"><a href=""></a></li>
            <li id="two" onClick="afficheTexte('id2')"><a href=""></a></li>
            <li id="three" onClick="afficheTexte('id3')"><a href=""></a></li>
            <li id="four" onClick="afficheTexte('id4')"><a href=""></a></li>
            <li id="five"><a href=""></a></li>
            <li id="six"><a href=""></a></li>
            <li id="seven"><a href=""></a></li>
            <li id="height"><a href=""></a></li>
            <li id="nine"><a href=""></a></li>
            <li id="ten"><a href=""></a></li>
            <li id="eleven"><a href=""></a></li>
            <li id="thwelve"><a href=""></a></li>
        </ul>
        <div class="cadre" id="id1"><img src="images/main.png" alt=""/></div>
        <div class="cadre" id="id2"><img src="images/main2.png" alt=""/></div>
        <div class="cadre" id="id3"><img src="images/main.png" alt=""/></div>
        <div class="cadre" id="id4"><img src="images/main2.png" alt=""/></div>
	</div>
</body>
</html>
a écrit :
document.getElementById("idn").style.display="none";


l'élément dont l'id est "idn" n'existe pas, la fonction va donc se terminer à cet endroit et n'executera pas 
document.getElementById(cadre).style.display="block";


Ce type d'erreur est facilement repérable avec la console d'erreurs de firefox ("Outils > Console d'erreurs" sur FF windows.


Smiley smile
Modifié par skywalk3r (06 May 2008 - 16:49)
Voilà j'ai mis cela à jour et cela fonctionne mieux, c'est-à-dire que l'ont aperçoit le contenu mais qu'il disparait presque directement. Il n'y a qu'un effet de clignotement, comment cela ce fait-il?
En fait ca n'est pas le cadre qui apparait et disparait aussitot, c'est la page toute entière qui se recharge (mais j'ai bien cru moi aussi avoir la berlue devant ton script Smiley lol ).
href=""

a remplacer par
href="#"

sinon le click declanche le lien et recharge la page (en fait comme c'est une URL relative le navigateur concatene l'url courante avec l'url du lien, donc ici il recharge la page.

Cela dit si c'est juste pour avoir un curseur en forme de main, tu peux utiliser la propriété CSS "cursor:pointer" sur tes éléments qui ont besoin d'avoirune main au survol.

Smiley cligne

edit : Cela dit c'est vilain comme façon de faire (voir le post de yodaswii ci-dessous)
Modifié par skywalk3r (06 May 2008 - 18:05)
Et le return false; (pour mettre fin à l'action par défaut) ? Il pue des pieds ... Smiley decu

Une autre remarque ne pas mettre ces "onclick" sur les items de liste mais sur les liens. (et les mettre en place depuis des gestionnaires d'événements ne serait pas un luxe).

Enfin l'histoire du "#" à la place du "" ... je dirais non du tout. Smiley ravi
Plutôt prévoir une alternative pour ça. Smiley cligne

<edit>Et pas besoin de cette propriété CSS cursor pour simuler une chose qui n'en est pas une ! Smiley fache </edit>
<edit>En plus des liens vides c'est pas bien ...</edit>
<edit>Au lieu du return false; voir plutôt stopPropagation et preventDefault.</edit>
Modifié par yodaswii (06 May 2008 - 17:45)
yodaswii a écrit :
Et le return false; (pour mettre fin à l'action par défaut) ? Il pue des pieds ... Smiley decu

Une autre remarque ne pas mettre ces "onclick" sur les items de liste mais sur les liens. (et les mettre en place depuis des gestionnaires d'événements ne serait pas un luxe).

Enfin l'histoire du "#" à la place du "" ... je dirais non du tout. Smiley ravi
Plutôt prévoir une alternative pour ça. Smiley cligne

<edit>Et pas besoin de cette propriété CSS cursor pour simuler une chose qui n'en est pas une ! Smiley fache </edit>
<edit>En plus des liens vides c'est pas bien ...</edit>
<edit>Au lieu du return false; voir plutôt stopPropagation et preventDefault.</edit>
Héhé c'est pas faux tout ça et ça coute rien de le rappeler... mais il faut savoir y aller en douceur Smiley hippy sinon ce très cher doncho va vomir du javascript ce soir... Smiley cligne

edit : cela dit, entièrement d'accord...
Modifié par skywalk3r (06 May 2008 - 18:03)
Lol merci pour vos réponses, enfin vous l'avez compris je ne suis pas très perfectionné en Javascript. Smiley lol
yodaswii a écrit :


1-(et les mettre en place depuis des gestionnaires d'événements ne serait pas un luxe).

2-Enfin l'histoire du "#" à la place du "" ... je dirais non du tout. Smiley ravi
Plutôt prévoir une alternative pour ça. Smiley cligne

3-<edit>Au lieu du return false; voir plutôt stopPropagation et preventDefault.</edit>


1-EUh qu'es ce donc ce gestionnaire d'evenement dont tu parles?
2-Quels sont les alternatives possibles?
3-Euhh Smiley biggol C'est quoi???
Modifié par doncho (07 May 2008 - 00:20)
Bon je pense que le plus important est de résoudre le problème d'accessibilité sachant que c'est la seul chose dans l'immédiat que je saurais faire avec un peu d'explication alors que les ajouts en javascript proposé je ne les comprends pas.

Car c'est vrai que quand je désactive la CSS et bien ma page ne tiens plus du tout et est surtout totalement inaccessible au niveaux sémantique.
C'est bien simple il ne reste plus rien du pseudo menu, donc je me demande quels seraient les alternatives possibles et surtout les plus appropriées.

Smiley confus .
En tout cas merci déjà pour l'aide fourni.
Sujet clos
Aller à