spoiler , você sabe o que é e como usar? - #edihitt agregador informativo

Pesquisar :

spoiler , você sabe o que é e como usar?

"Meu modelo de spoiler. "

Tutorial


Primeiro:

 Com "button"
código: 
HTML
 ▼
<div id="spoiler" style="display:none">TEXTO A SER OCULTADO</div> 
<button title="Clique para mostrar/ocultar" type="button"  
onclick="if(document.getElementById('spoiler') 
.style.display=='none') 
{document.getElementById('spoiler') 
.style.display=''}
else{document.getElementById('spoiler') 
.style.display='none'}">CLIQUE AQUI</button>







Segundo:

Querendo adicionar mais de um "spoiler'', em sua postagem, por exemplo.

Você deve acrescentar outro caractere às "tags":
"spoiler"   (04 (quatro) no total), que estão presentes no código:

HTML



<div id="spoiler 1" style="display:none">TEXTO A SER OCULTADO</div> 
<button title="Clique para mostrar/ocultar"  
type="button" onclick="if(document.getElementById('spoiler1'
.style.display=='none') {document.getElementById('spoiler1'
.style.display=''}else{document.getElementById('spoiler1'
.style.display='none'}"> <img src="URL DA IMAGEM" /></button>


Nota: Observe "spoiler 1" em negrito, no código acima
Como acréscimo do número "1" ao "spoiler", diferenciará um "spoiler" do outro!
Quando ocorrerem 02  (dois) "spoilers" .
Ocorrendo mais  de 01 (hum)  "spoiler ", em sua postagem;
você deverá, ir mudando em cada código, o número diferente de  número "1", nesse caso.


Caso você repetir a numeração, o código ficará idêntico, e o "spoiler" ,não funcionará.




Terceiro:
*
 Querendo customizar o "botão"
... "spoiler":

 Para mudar o botão "spoiler", por uma imagem,
basta, aonde estar escrito "CLIQUE AQUI" , no código citado  no primeiro código dedessa postagem, acima;
pelo seguinte código:

 <img src="URL DA IMAGEM" />

ficando assim:
o
HTML


<div id="spoiler" style="display:none">TEXTO A SER OCULTADO</div> 
<button title="Clique para mostrar/ocultar"  
type="button" onclick="if(document.getElementById('spoiler') 
.style.display=='none') {document.getElementById('spoiler') 
.style.display=''}else{document.getElementById('spoiler') 
.style.display='none'}"> <img src="URL DA IMAGEM" /></button>



Quarto:
Exemplo de "spoiler com imagem:"
o
HTML

o código:

<div id="spoiler" style="display:none">TEXTO A SER OCULTADO</div> 
<button title="Clique para mostrar/ocultar"  
type="button" onclick="if(document.getElementById('spoiler') 
.style.display=='none') {document.getElementById('spoiler') 
.style.display=''}else{document.getElementById('spoiler') 
.style.display='none'}"> <img src="URL DA IMAGEM" /></button>

seta vede=URL DA IMAGEM = http://1.bp.blogspot.com/-t9IhzNshbqM/U_QktqeKHBI/AAAAAAAAa-M/VEE31-wnUM4/s1600/seta%2Bverde.png








<div id="spoiler9" style="display:none">TEXTO A SER OCULTADO</div> 
<button title="Clique para mostrar/ocultar"  
type="button" onclick="if(document.getElementById('spoiler9') 
.style.display=='none') {document.getElementById('spoiler9') 
.style.display=''}else{document.getElementById('spoiler9') 
.style.display='none'}"> <img src="URL DA IMAGEM" /></button>


Veja o funcionamento, de "spoiler"com imagem:


Nenhum comentário:

Postar um comentário

Comenta vai:▼
👍🗨👍💬
Seja comentarista aqui em nosso espaço!
...
Os comentários são de responsabilidade exclusiva de seus autores e não representam a opinião deste site. Se achar algo que viole os termos de uso, denuncie.
✏✏✏✏✏✏✏✏✏✏✏✏✏✏
Postar um comentário ▼
✍✍✍✍✍✍✍✍✍✍
...

contato

Nome

E-mail *

Mensagem *

parceiros:





Marcadores

YouTube channel

YouTube channel

EdiArtes


...
...youtube...
...


"Aquele que trabalha com suas mãos é um trabalhador manual; ...
aquele que o faz com suas mãos e sua cabeça é um artesão, porém aquele que trabalha com mãos, cabeça e coração é um artista
" (fonte: desconhecida)

Postagem em destaque

Duquesa de Cambridge é coroada ícone número um da moda real - batendo Meghan Markle

... ► Duquesa de Cambridge é coroada ícone número um da moda real - batendo  Meghan Markle ◄ Duquesa de Cambridge é coroada í...

Popular

💯🆓🔽⬇⬇⬇⬇⬇venha fazer parte...seguidores daqui 🆗🟢🔝🔝🔝🟢💯🆓🔽⬇⬇⬇⬇⬇

CURTIR

Arquivados