No se como se llaman pero quiero hacer en el Dreamweaver 8 lo mismo que se puede hacer aquí en el foro con los spoiler
por ejemplo:
De que color es el caballo blanco de santiago?
Me estoy volviendo loco y no se si tengo que programar html o hay una opción ya para eso en el Dreamweaver.
graciaaas¡¡
Si, busca bien la opcion "Spoiler" en el menu "Insertar", que seguro que esta por algun lado...
:palm:
Esto lo tienes que hacer con JavaScript.
1.- Creas una capa oculta
<div id="capaOculta" class="spoiler">
¡Esto es un spoiler!
</div>2.- Mediante CSS ocultas todas las capas del tipo spoiler
<style>
.spoiler {
visibility: hidden;
}
</style>3.- Y ahora le añades el JavaScript a la capa que creaste antes
<div id="capaOculta" class="spoiler" onclick="this.style.visibility = 'visible';">En resumen es eso... pero lo puedes complicar todo lo que quieras, por ejemplo que cuando vuelvas a pinchar se cierre, que a parte de ocultar el texto, deje de ocupar espacio (CSS: width: 0px; height: 0px), ...
Hay otra forma sin usar Javascript (aunque personalmente prefiero la que te ha puesto PiradoIV) que es meter el texto del spoiler en una capa con el color de fondo igual al del texto de tal forma que para ver el spoiler haya que seleccionar el texto de dentro con el ratón.
Salu2 
Bueno te he lo he hecho con jquery, con prácticamente el mismo sistema calcado que usa media vida:
<html>
<head>
<style type="text/css">
/*
Spoiler básico por Ricardo Marmolejo García
http://blogricardo.wordpress.com/
Creative Commons con reconocimiento
http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode
*/
/* Estilo del texto boton spoiler */
.clickeable
{
cursor:pointer;
font-weight:bold;
color:#FF0007;
margin-right:5px;
}
/* Estilo para el texto oculto */
.mensaje
{
font-style:italic;
}
/* Estilo para ocultar */
.ocultado
{
display:none;
}
/* Estilo para mostrar
si nos interesa más que el bloque haga un salto de línea
es preferible usar display:block */
.mostrado
{
display:inline;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// toggle oculta/muestra
$('.spoiler').toggle(
function()
{
mensaje = $(this).children().next().html();
$(this).html("<span class='clickeable'>+ Spoiler</span><span class='mensaje ocultado'>"+mensaje+"</span>");
}
,
function()
{
mensaje = $(this).children().next().html();
$(this).html("<span class='clickeable'>- Spoiler</span><span class='mensaje mostrado'>"+mensaje+"</span>");
}
);
// inicialmente todos los spoilers estan abiertos
// Si el cliente no tiene javascript podrá ver el spoiler
// Es necesario ocultar todos los spoilers
$(".spoiler").click();
});
</script>
</head>
<body>
Spoiler en la misma frase:
<span class="spoiler">
<span class='clickeable'>- Spoiler</span>
<span class='mensaje mostrado'>MENSAJE SECRETO 1</span>
</span>
. Texto despues del spoiler
<br />
Spoiler en la misma frase:
<span class="spoiler">
<span class='clickeable'>- Spoiler</span>
<span class='mensaje mostrado'>MENSAJE SECRETO 2</span>
</span>
. Texto despues del spoiler
<br />
Spoiler en la misma frase:
<span class="spoiler">
<span class='clickeable'>- Spoiler</span>
<span class='mensaje mostrado'>MENSAJE SECRETO 3</span>
</span>
. Texto despues del spoiler
<br />
</body>
</html>
#5 tiene un pequeño fallo. Cuando despliegas un spoiler y pinchas en el texto oculto, vuelve al estado original, se oculta todo.
