JMiur [E]

El HTML dinámico, también conocido por las siglas DHTML (Dynamic HTML) está basado en una idea de lo más simple: convertir las etiquetas tradicionales del HTML en objetos programables, lo que nos permite poder luego manipularlas a nuestro gusto con JavaScript u otros lenguajes.

Si queremos colocar una imagen determinada en una página web, debemos escribir en el documento HTML la etiqueta <img src="" .="" /> que define cuál es el fichero de imagen y qué atributos va a tener (dimensiones, alineamiento, etc.). Una vez que la imagen esté visible en la pantalla, ya no habrá nada que la haga cambiar a menos que se utilice HTML dinámico.

Para cambiar las propiedades de un elemento, es esencial que entendamos que son los eventos.

Los eventos son código JavaScript que pueden incluirse dentro de los tags del HTML y que se ejecutan cuando "algo pasa". Se los denomina event handlers.

Son varios y cada uno "detecta" una acción, puede ser pulsar un botón del ratón, moverlo, enviar un formulario, tocar una tecla, etc.

Por ejemplo al hacer CLICK AQUÍ se abre una ventana de alerta:
<A href="javascript:void(0);"
      onclick="alert('¡HOLA!')">
CLICK
</A>
Los event handler pueden ejecutar varias acciones simultáneamente. Esto se consigue separando cada una con un punto y coma. Por ejemplo:
onClick="alert('Gracias'); window.location=URL_pagina'"
al hacer click se mostrará un mensaje y luego se saltará a otra página web.

Otros dos eventos muy utilizados son onmouseover y onmouseout. El primero se activa cuando se pasa el cursor del ratón sobre un objeto y el segundo cuando se lo quita.
Este es un ejemplo simple donde el botón de la izquierda es del tipo denominado hover. Si se pasa el ratón sobre él, la imagen cambia.
<a href="javascript:void(0);"
onmouseover="getElementById('NOMBRE').src='URL_imagen_OVER';"
onmouseout="getElementById('NOMBRE').src='URL_imagen_OUT';">
<img src="URL_imagen_OUT" id="NOMBRE" border=0 />
</a>
El atributo SRC del tag IMG hace referencia al fichero que contiene la imagen que se quiere mostrar en la pantalla. Para convertir esta etiqueta en un objeto al que se pueda hace referencia desde un lenguaje de programación, basta con añadirle el atributo ID.
<IMG ID="NOMBRE" SRC="URL_imagen">
Ahora la etiqueta ya es un objeto programable. Cuando se carga la página, la imagen que se ve en primer lugar es la señalada en la etiqueta. Al haber incluido unas rutinas para detecta los eventos onmouseover y onmouseout, podemos utilizar todos esto para modificar el archivo fuente utilizado. Por regla general:
NOMBRE.src='URL_imagen'
aunque en Blogger se debe utilizar una función extra:
getElementById('NOMBRE').src='URL_imagen'
De esta manera, cuando el cursor está sobre la imagen, se lanza el evento onmouseover y se establece el atributo SRC con la dirección de una imagen, de la misma forma, cuando el cursor sale de la imagen, se lanza el evento onmouseout y el atributo SRC vuelve a ser el original.

Aunque en el ejemplo, el tamaño de las imágenes es el mismo pero esto no es obligatorio.

Al tener identificados los objetos mediante un nombre, podemos manipularos desde cualquier lugar de la página. Por ejemplo:

En este caso, al poner el ratón sobre una imagen, cambiamos la otra y viceversa.

<a href="javascript:void(0);"
onmouseover="getElementById('imgRIGHT').src='URL_imagenLEFT';"
onmouseout="getElementById('imgRIGHT').src='URL_imagenRIGHT';">
<img src="URL_imagenLEFT" id="imgLEFT" >
</a>

<a href="javascript:void(0);"
onmouseover="getElementById('imgLEFT').src='URL_imagenRIGHT;"
onmouseout="getElementById('imgLEFT').src='URL_imagenLEFT;">
<img src="URL_imagenRIGHT" id="imgRIGHT" />
</a>
Lo mismo puede hacerse para cambiar el valor de una propiedad de cualquier elemento de la página:
NOMBREID.style.color = 'valor'
NOMBREID.style.fontSize = 'valor'
NOMBREID.style.fontFamily = 'valor'
Utilizando los eventos, es muy simple agregar un rutina JavaScript en el HEADER para mostrar u ocultar elementos de manera rápida:
<script type="text/javascript">
function verocultar(href) {
var c = href.nextSibling;
if(c.style.display == 'none'){
c.style.display = 'block';
}else{
c.style.display = 'none';
}
return false;
}
</script>
MAS COSAS QUE LEER Ver/Ocultar
[+]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div>
TEXTO Ver/Ocultar
<a onclick="return verocultar(this);" href="#">[+]</a><div>
<!-- este DIV debe ser la continuación del vínculo A -->
...............................
</div>
</div>
Esta es una lista de los eventos registrados por JavaScript y los tipos de uso generales:

onblur

a, area, button, input, label, select, textarea
el visitante abandona un elemento que previamente entró en foco (ver onfocus)

onchange

input, select, textarea
se modifica un valor o contenido

onfocus

a, area, button, input, label, select, textarea
se selecciona o hace click en un elemento

onkeydown

input (tipo name o password), textarea
cuando se ingresa algo mediante el teclado

onkeypress

input (tipo name o password), textarea
cuando se ingresa algo mediante el teclado

onkeyup

input (tipo name o password), textarea
cuando se ingresa algo mediante el teclado

onload

body, frameset
cuando la página es cargada en el navegador

onreset

form
cuando se hace click en un botón RESET

onselect

input (tipo name o password), textarea
cuando se seleccionan caracteres

onsubmit

form
cuando se hace click en un botón SUBMIT (enviar)

onunload

body, frameset
cuando el navegador carga otra página

27 comentarios:

Ary  

Ola, mira soy nuevo en esto de blogs y no entiendo mucho de lo que esplicas, no se donde poner los codigos ni como completarlos exactamente.
Agradecería tu ayuda, muchas graxias por adelantado

Responder
JMiur  

El script se coloca en el encabezado de la planilla, just antes de </head>:

<script type="text/javascript">
.................................
</script>

Lo otro, donde lo vayas a usar, en la sidebar, dentro de un elemento HTML o en un post.

Responder
Martín García Silvëro  

INFINITAS GRACIAS!!! HACE TIEMPO NO ESCRIBIA EN DHTML Y JAVA

Responder
Music  

El último script, de ocultar y ver a mí me sale al reves, osea lo tengo en mi post, pero sale ya abierto y cuando le doy clic se oculta, y creo que es al reves, a que se debe esto? :)

Responder
JMiur  

Colócoalo como oculto si es que así quieres que no se vea al principio:

<div style="display:none;"> .......... </div>

Responder
Music  

No, perdón, creo que no me entendió, sino que el texto que debe estar ocultado, y luego debe aparecer cuando doy clic en [+], ya aparece al principio, y no aparece oculto así como en su ejemplo.

Responder
JMiur  

Sí, a eso me refiero:

<div>Ver/Ocultar<a onclick="return verocultar(this);" href="#">[+]</a><div style="display:none;">
...............................
</div>
</div>

Responder
Music  

Perfecto,me salió muy bien, muchas gracias. :)

Responder
Music  

Ahora, tengo otra pregunta sobre ese mismo últim scri... lo intenté colocar, el scri.

Y cuando le doy en abrir se habren todos los que están adentros, eso siempre sucederá? o tiene arreglo? Gracias :)

Responder
JMiur  

No entiendo lo que quieres hacer. Lo que hace el script es mostar lo que está oculto, sea lo que sea eso que está oculto.

Responder
Music  

Lo siento, lo he copiado mal; lo que pasa es que he colocarlo el script dentro del mismo script, como una cadena, si se pued entende asi. La cosa es que cuando habro el scrip los demas scrip, que estan dentro del primero, tambien se abren a la vez; y no salen ocultos, y sí estan con esa condicion que me dio para ocultarlos. A qué se debe eso? Siempre saldrá asi?

Responder
JMiur  

No. No se entiende lo que estás haciendo. Si viera el código sería más fácil.

Responder
Music  

No puedo copiar el código pero haré una una representación:

1.Comienzo del scri. ver ocultar (numero uno)

1.1 Comienzo de otro scri. ver ocultar (numero dos)
1.2 Termino del scrip. (numero dos)

2. TErmino del scrip (numero uno)

Como le dije, el mismo scri. esta dentro de uno mismo, para hacer tipo cadena, el problema está en cuando habro el primero, todo los scrip. desntro de ellas tambine salen abiertos, y deberian salir cerrados. =/

Responder
JMiur  

Tendrías que poner un ejemplo, sno, es imposible.

Responder
Adrian Reyes  

yo quisiera ocultar contenidos y que al hacer click en "ver" se muestren y se empiecen a cargar en vez de que ser carguen cuando están ocultos no se si me dio a entender

Responder
JMiur  

En términos generalesm en Blogger eso no puede hacerse ya que requiere el uso de Ajax; depende de qué contenido sea ese que quieres cargar y desde donde lo quieres cargar.

Responder
Adrian Reyes  

El contenido seria imágenes y no entiendo eso de "desde donde lo quieres cargar" pienso que pregunta en que parte del blog asi que seria desde un post. Le agradecería mucho si consigue una solución a mi problema, llevo siguiendo su blog desde hace casi 3 años no comento mucho porque en general nunca he tenido dudas.

Responder
JMiur  

No. Digo desde donde se quiere cargar porque todo lo que se carga es un archivo alojado en alguna parte; puede ser un script, un texto, una imagen o una serie de datos.

Si de lo que se trata es de imágenes, lo más simple es recurrir a alguna clase de script que permita abrir contenido en ventanas modales como lytebox o ibox que son de las menos pesadas.

Otra forma más simple aún es una función:

<script>
function cargarimg(href,url) {
var c = href.nextSibling;
if(c.style.display == 'none') {
c.src = url;
c.style.display = 'block';
} else {
c.style.display = 'none';
c.src = '';
}
return false;
}
</script>

que se ejecuta así:

<a onclick="cargarimg(this,'URL_IMAGEN')" href="javascript:void(0);t"<click</a><img style="display:none" src=""/>

todo eso, escrito en una sola línea hará que la imagen se cargue y se muestre al hacer click y se descargue y oculte al volver a hacer click.

Responder
Adrian Reyes  

Muchas gracias!, ese script corto es el ideal y funciona perfecto pero como hago para colocar mas de una imagen ? Ejemplo 20 (no uso ventanas modales porque mi blog es muy pesado ya que uso otros scripts como el Instant, etc)

Gracias por responder mis preguntas.

Responder
JMiur  

Esa función debería poder abrir cualquier cantidad de enlaces sin inconveniente; bastaría que cambiaras la URL de la imagen a mostrar; las escribo otra vez proque en el comentario salió mal el HTML:

<a onclick="cargarimg(this,'URL_imagen1')" href="javascript:void(0);">click</a><img style="display:none" src=""/>
<a onclick="cargarimg(this,'URL_imagen2')" href="javascript:void(0);">click</a><img style="display:none" src=""/>

Puedes poner un enlace debajo de otro o uno al lado del otro, como quieras.

Responder
Adrian Reyes  

ok gracias por su ayuda

Responder
Indeziisoow  

Tengo una duda. ¿Con este script se puede cambiar el texto del enlace? Es decir que si tengo "Más" al hacer clic cambie a "Menos". No sé si se entiende lo que quiero explicar. Ojalá pueda ayudarme.

Responder
JMiur  

Así como está, no; hacen falta más códigos. Por ejemplo, algo así:

function verocultar(href) {
var texto = href.innerHTML;
var c = href.nextSibling;
if(c.style.display == 'none') {
c.style.display = 'block';
texto..innerHTML = '[-]';
} else {
c.style.display = 'none';
texto..innerHTML = '[+]';
}
return false;
}

Responder
Indeziisoow  

Exacto. Justo lo que quería. Muchas gracias. (No me supe explicar bien).

Responder
JMiur  

Se entendió perfectamente :-)

Responder
MartínJug  

Hola maestro estoy probando el ejemplo pero en la funcion de java script me pincha aqui:
dentro del if

c.style is undefined
if(c.style.display == 'none'){

eso me sale con el firebug a que se debe?
Saludos gracias

Responder
JMiur  

Agrégale style="display:none" al DIV oculto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR