Tema: Cambiar texto alternativamente de un <span>
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 08/06/2012, 14:31
gmonterog
 
Fecha de Ingreso: mayo-2012
Ubicación: Palma de Mallorca
Mensajes: 71
Antigüedad: 12 años, 8 meses
Puntos: 1
Respuesta: Cambiar texto alternativamente de un <span>
Hola emprear:

Tiene buena pinta, pero me costará un poco más analizarlo. El tema de los arrays no lo domino mucho. Haré un esfuerzo por entenderlo y seguro que me ayudará a aprender algo más.

Gracias otra vez.

GMG.


Cita:
Iniciado por emprear Ver Mensaje
@gmonterog

Viendo en conjunto tu idea, tal vez te interese esto
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Mostrar ocultar capas cambiando valor del texto</title>
  6. <meta name="description" content="Mostrar ocultar capas cambiando valor del texto" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. #oculta1,#oculta2 {
  10. display: none;
  11. width: 180px;
  12. font-family: arial, serif;
  13. padding: 15px 5px;
  14. border: dotted 1px #554F9D;
  15. background-color:#A3AD76;
  16. font-size: 10pt;
  17. margin-top: 3px;
  18. margin-bottom:20px;
  19. }
  20. p{
  21. font-weight: bold;
  22. font-size: 11pt;
  23. width: 180px;
  24. cursor: pointer;
  25. font-family: arial, serif;
  26. padding: 5px;
  27. border: dotted 1px #554F9D;
  28. margin-bottom: 2px;
  29. margin-top: 3px;
  30. }
  31. .oculta1, .oculta2{
  32. display: inline-block;
  33. width: 100%;
  34. height: 100%;
  35. }
  36. /*]]>*/
  37. </style>
  38. <script type="text/javascript">
  39. //<![CDATA[
  40. /* Configurar */
  41. var tn = "Ocultar"; // Texto para cuando la capa esté visible
  42. var tb = "Mostrar"; // Texto para cuando la capa esté oculta
  43. /* No Editar */
  44. var tags_span = new Array();
  45. function cTxt(laclase,eltexto,propiedad) {
  46. var tags_span=document.getElementsByTagName('span');
  47. for (i=0; i<tags_span.length; i++) {
  48. if (tags_span[i].className==laclase) {
  49. var texto = eltexto;
  50. tags_span[i].innerHTML= texto;
  51. }
  52. }
  53. document.getElementById(laclase).style.display = propiedad;
  54. }
  55.  
  56. function m_o(cdv) {
  57. var e = document.getElementById(cdv);
  58. e.style.display =(e.style.display=="block")?cTxt(cdv,tb,'none'):cTxt(cdv,tn,'block');
  59. }
  60. //]]>
  61. </script>
  62. </head>
  63. <body>
  64. <p><span class="oculta1" onclick="m_o('oculta1');">Mostrar</span></p>
  65. <div id="oculta1">
  66. Christus eum filiam sum cum suam non coepit, mytilenam cuius ampullam ungues dotis quare quae vero non coepit
  67. </div>
  68. <p><span class="oculta2" onclick="m_o('oculta2');">Mostrar</span></p>
  69. <div id="oculta2">
  70. Lorem ipsum dolor sit amet, jesu Dionysiadem tuos ratio indue villicus potest in fuerat
  71. </div>
  72. </body>
  73. </html>

Si lo analizás no es dificil de ver su funcionamiento

Saludos