-
Spoiler JS-html
On peut cacher une partie d'article et le dévoiler sur demande,
en cliquant sur ce bouton (ci-dessous).
Un 1er clic on affiche la partie cachée de l'article.
puis un second clic, pour le cacher ....
Ou en passant le curseur sur le lien ' Survolez-moi! ' ...----- Les codes -----:
<!---------------Spoiler-code-html------------------------------------------->
<div class="spoiler"><br />
<input onclick="showSpoiler(this);" type="button" value="Voir-Cacher" />
<div class="inner" style="display: none; margin: 5px 20px;
border: 2px solid yellow; background-color: rgba(0, 0, 0, 0.4);
padding: 10px; border-radius: 10px;"><br /><a>Voici un spoiler !</a>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean ultricies mi vitae
est. Mauris placerat eleifend leo.</p>
</div>
</div>
<!-----------------Script js------------------------------------------------->
<script type="text/javascript">// <![CDATA[
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
// ]]></script><!------------------Code CSS------------------------------------------------>
/*-----spoiler en CSS-----*/
#layer1 {
visibility : visible;
position : relative;
}
#layer1 a:active {
color:red;
}
#layer2 {
width:300px;
border:1px solid yellowgreen;
border-radius:10px;
box-shadow:6px 6px 10px black;
padding:20px;
visibility : hidden;
position : absolute;
}
#layer2:hover {
background-color:red;
color:yellow;
}
-
Commentaires
Ah...avec le code on voit mieux la chose !!!!
Bon, pour mettre un code non exécutable, il faut modifier les débuts(<) et fins (>) des balises par " <" et ">"
Regarde ci-dessous la balise "object", c'est devenu <object ........;</object>Voici le code pour ta création flash:
<div class="spoiler"><br /> <input onclick="showSpoiler(this);" type="button" value="Code flash" />
<div id="inner" style="display: none; color: white; margin: 5px 20px; border: 2px solid yellow; background-color: rgba(0, 0, 0, 0.4); padding: 10px; border-radius: 10px;"><br /> <object width="700" height="700" data="http://ekladata.com/vboE9WJF5v5smMgxSJTM3XLQzS8/horloge-abygaelle.swf" type="application/x-shockwave-flash" wmode="transparent"><param name="allowScriptAccess" value="never" /><param name="allowScriptAccess" value="never" /></object></div>
</div>
<!-----------------Script js------------------------------------------------->
<script type="text/javascript">// <![CDATA[
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
// ]]></script>
Bonsoir Mike,
Merci de votre réponse, j'ai réessayé le code en suivant vos conseils, j'ai donc changé la <div class=" en <div id="
mais c'est toujours la création qui apparaît au lieu du code, tant pis. les codes ne sont vraiment pas mon point fort !
c 'est vraiment dommage car vous proposez des trucs plutôt géniaux ! je vous souhaite une bonne soirée.
et heu... ne vous cassez pas la tête pour moi, ce n'est pas grave, je finirai par comprendre un jour, j'espère ! ;)
voici le code que j'ai utilisé :
<div class="spoiler"><br /> <input onclick="showSpoiler(this);" type="button" value="Code flash" />
<div id="inner" style="display: none; margin: 5px 20px; border: 2px solid yellow; background-color: rgba(0, 0, 0, 0.4); padding: 10px; border-radius: 10px;"><br /><a>Voici un spoiler !</a>
<p><object width="700" height="700" data="http://ekladata.com/vboE9WJF5v5smMgxSJTM3XLQzS8/horloge-abygaelle.swf" type="application/x-shockwave-flash" wmode="transparent"><param name="allowScriptAccess" value="never" /><param name="allowScriptAccess" value="never" /></object></p>
</div>
</div>
<!-----------------Script js------------------------------------------------->
<script type="text/javascript">// <![CDATA[
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
// ]]></script>
Sur quel blog, un exemple ?
Il faut mettre la partie à cacher (ci-dessous en vert) entre les balises <div id="inner"> ..........</div>:
<!---------------Spoiler-code-html------------------------------------------->
<div class="spoiler"><br />
<input onclick="showSpoiler(this);" type="button" value="Voir-Cacher" />
<div class="inner" style="display: none; margin: 5px 20px;
border: 2px solid yellow; background-color: rgba(0, 0, 0, 0.4);
padding: 10px; border-radius: 10px;"><br /><a>Voici un spoiler !</a>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean ultricies mi vitae
est. Mauris placerat eleifend leo.</p>
</div>
</div>
Bonjour,
Merci pour ce code qui fonctionne très bien pour du texte, l'ennui est que je voudrais mettre mes codes flash html pour mes créations, le souci quand je mets le code,
c'est que le code n 'apparaît pas, mais que ma création apparaît, et je souhaiterais juste que le code apparaisse, est ce possible s'il vous plaît ? j'ai essayé plusieurs solutions
sans succès hélas, voilà pourquoi je pose ma question, pardon pour le dérangement. Excellente journée !
@Julie
Les articles ne sont pas classés par langage (html, javascript, etc), mais quand j'utilse du JS, je le signale.
...!
bonjour
Je voudrai savoir si ce code peut fonctionner sur mon wordpress ?
je n'ai que la possibilités en ce moment de mettre que du HTML,
avez vous une rubrique de HTML ? car je ne vois pas sur votre blog, je sais que EKLA donne beaucoup plus de possibilités,
actuellement je me suis mise en pause de mon blog blabla de l'espace pour raison de travaux a la maison, mais je tiens un blog justement d'avancement de travaux pour me donner la peche et m'aider dans mon organisation, mais je le voudrai aussi joli, afin que lorsque je le mettrai en ligne il puisse etre agreable aux gens, alors j'aimerai l'agrementer de petites choses ludiques et agreable, et faire aussi des tuto bricolage enfin bref, pfff je suis bien limité voici donc la raison de ma venue juste pour voir si vous auriez des codes sympatoches en HTLM, bonne année a vous avec du retard, et bravo pour votre blog
Ajouter un commentaire
Test et mise au point
-
Visiteurs :
Connectés 1 Record 519 Aujourd'hui 17 Total 101123 
Radionomy
My Player
Grooveshark
Constance Vidéo
-
Créer mon blog
Excellente soirée, et merci pour tout.
et pardon pour le dérangement.