Aller au contenu

[CSS] Bloc "spoiler"

FiP_

Par FiP_
dans Programmation et Lignes de code

Messages recommandés

FiP_ Passionné

FiP_

Posté(e)
Posté(e)

Bonjour!

sur mon site, je commence à écrire des trucs sur des films et/ou des livres qui m'ont plu, mais je ne voudrais pas gâcher l'histoire à ceux qui ne connaissent pas.

Ainsi, j'aimerai créer un bloc de texte "spoiler", qui ne montre son contenu que sur demande du lecteur.

J'avais tout d'abord pensé à mettre du texte de la même couleur que le fond, qui changerai au moment où l'on passe la souris dessus, mais

- les valideurs de css voient d'un tres mauvais oeil une couleur de texte identique à la couleur du fond

- c'est ennuyeux de devoir bouger la souris.. surtout pour des questions d'accessibilité.

Je pensais donc faire un bloc qui peut "s'ouvrir" ou se fermer, grâce à du javascript...

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
	// this is the way the standards work
	var style2 = document.getElementById(whichLayer).style;
	style2.display = style2.display? "":"block";
}

else if (document.all)
{
	// this is the way old msie versions work
	var style2 = document.all[whichLayer].style;
	style2.display = style2.display? "":"block";
}

else if (document.layers)
{
	// this is the way nn4 works
	var style2 = document.layers[whichLayer].style;
	style2.display = style2.display? "":"block";
}
}

Quelque chose qui ressemblerai à (fermé):

			+----------------------+
		|attention blabla..	|
		|cliquez ici pour voir |
		+----------------------+

puis à (ouvert):

			+----------------------+
		|attention blabla..	|
		+----------------------+
		|blabla blabla blabla  |
		| blabla blabla blabla |
		|blabla blabla ...	 |
		+----------------------+

Qu'en pensez vous? Que se passe t il si la personne ne supporte pas le CSS, ou a desactivé le javascript? (ou les deux en même temps :D)

Lien vers le commentaire
Partager sur d’autres sites
Quarky Grand Maître

Quarky

Posté(e)
Posté(e)

Moi a plusieurs reprises, j'avais utilisé une méthode en css produisant un effet assez similaire à ce que tu veux ! :D

Je fais une div avec un 

display : none;

et au survol d'un texte, je fais apparaître la div ci-dessus.

Donc dans ton cas, tu pourrais faire afficher "la suite" et au survol, tu fais apparaître en dessous le fameux texte ...

C'est beaucoup plus accessible que du javascript ! ;)

Mais le truc à préciser : pour les internautes naviguant avec des synthétiseurs vocaux, ils auront le texte puisqu'il n'y a pas de notion de css ... Un message d'avertissement serait donc INdispensable.

Lien vers le commentaire
Partager sur d’autres sites
FiP_ Passionné

FiP_

Posté(e)
  • Auteur
Posté(e)

No problemo, j'accepte le titre :fumer: D'autant que j'étais le seul ! :p

Et thks pour le lien ca va surement m'amuser ce truc.

Oui c'est amusant.. mais c'est une drogue! Je l'ai découvert quand pcInpact en a parlé, et depuis... j'arrive pas à décrocher! Je dois.. encore répondre... des points! il me faut des points!!!

Lien vers le commentaire
Partager sur d’autres sites
FiP_ Passionné

FiP_

Posté(e)
  • Auteur
Posté(e)

Le survol (":hover") ne fonctionne que sur les liens sous IE.

... ah ouais oops.

Mais en y repensant, je pense que je prefere que l'utilisateur clique, plutot qu'un simple survol... Une page où des parties entieres de contenu apparaissent et disparaissent au gré des passages de la souris... je pense que ca va etre légerement vomitif.

Lien vers le commentaire
Partager sur d’autres sites
Shinuza Contributeur

Shinuza

Posté(e)
Posté(e)

Le survol (":hover") ne fonctionne que sur les liens sous IE.

Et sous IE 7 toujours pas ? :zarb:

Si si ça marche :yes:

D'ou l'intérêt du javascript pour le moment, le mieux étant d'avoir un control du flux lorsque javascript est désactivé, de cette manière on garde l'accessibilité de la page.

Lien vers le commentaire
Partager sur d’autres sites
FiP_ Passionné

FiP_

Posté(e)
  • Auteur
Posté(e)

Pour le moment j'ai ça:

spoiler.htm:

<!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="en" >


<head>
<title>bloc spoiler</title>
<style type="text/css" title="leStyle" media="all">
	@import "spoiler.css";
</style>

<script type="text/javascript" src="toggleLayer.js"></script>
</head>


<body>
<br /><br /><br />
<div class="spoiler">
	<span class="avertissement">Attention : ce qui suit dévoile tout ou partie de l’œuvre !<br />Pour le lire cliquez <a href="java script:toggleLayer('contenu');" title="Afficher le paragraphe suivant">ici</a></span>
	<div id="contenu">A la fin on apprend que c'est son père.</div>
</div>
</body>
</html>

toggleLayer.js:

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
	// this is the way the standards work
	var style2 = document.getElementById(whichLayer).style;
	style2.display = style2.display? "":"block";
}

else if (document.all)
{
	// this is the way old msie versions work
	var style2 = document.all[whichLayer].style;
	style2.display = style2.display? "":"block";
}

else if (document.layers)
{
	// this is the way nn4 works
	var style2 = document.layers[whichLayer].style;
	style2.display = style2.display? "":"block";
}
}

spoiler.css:

html, body
{
	margin: 0;
	padding: 0;

	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;

	color: #000;
	background-color: #fff;
}

a
{
	/* liens bleus, non soulignés */

	text-decoration: none;
	color: #03f;
	background-color: #fff;
}

div.spoiler
{
	background-color: #ccc;
	color: #000;

	width: 400px;
	margin: 0em auto;
}

div.spoiler span.avertissement
{
	font-size: 0.9em;
}

div.spoiler span.avertissement a
{
	text-decoration: underline;
	font-weight: bold;

	padding: 3px;

	background-color: #ccc;
	color: #000;
}

div.spoiler div#contenu
{
	padding: 5px;
	margin: 0em auto;

	border: 1px dashed #000;

	/* affiché par une fonction javascript */
	display: none;
}

Problème: Le code javascript que j'ai n'accepte de montrer/cacher un div que s'il à un ID, et pas une CLASS.... ce qui veut dire que, dans une page donnée, je ne pourais avoir qu'un seul bloc spoiler... :(

Je pourrais faire des divs "spoiler001", "spoiler002" à la volée (générés par du php) mais il n'y aura pas le css correspondant... (oula.. a moins que le php genere aussi un petit peu de css, apres tout il n'a que display: none à mettre; mais ca nique un peu mon idée de séparer le code de la présentation :yes:)

Des suggestions?

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...