Todos los elementos HTML tiene atributos predefinidos que modifican el comportamiento del elementro dentro de la página, así por ejemplo en un elemento
tiene el atributo scr para indicar la ruta de la imagen que representa. Esto es conocido por todos, lógicamente, pero tampoco está mal recordarlo por si alguna persona que lo lee es algo inexperta. Ahora bien, que un elemento tenga determinados atributos, no quiere decir que solo puedan existir estos y que nosotros no podamos incluir otros nuevos. Crear nuevos atributos puede ser de utilidad para acciones nuevas que nosotros diseñemos.
<< Ocultar resto
A no ser que sean los atributos prefefinidos, yo recomiendo usar las funciones
setAttribute y
getAttribute para tratar con los atributos. La función setAttribute añade un nuevo atributo al elemento si no existía con anterioridad, en caso contrario modifica el valor y la función getAttribute recupera el valor del atributo del elemento.
obj.setAttribute("p1", "v1");
obj.getAttribute("p1");
Cuando queramos que el elemento HTML tenga incluido el nuevo atributo desde el principio, solo tendremos que escribirlo como si fuera cualquiera de los predefinidos.
<IMG src="imagen.png" nuevoAtr="valor">
Todo esto es muy bonito, pero... ¿qué se puede hacer con ello?. Un ejemplo cualquiera de su utilización sería el siguiente: imaginemos que tenemos una lista de imágenes que queremos seleccionar y tener las que seleccionemos en una lista para luego hacer con ellas algo y no deseamos que se incluya dos veces la misma imagen. Necesitaremos esa lista de imágenes y que cada elemento IMG tenga dos atributos: una descripción y un indicativo de si ha sido seleccionado antes o no.
<HTML>
...
<BODY>
...
<IMG src="img1.png" descripcion="Esta es la primera imagen" onclick="selecciona(this)">
<IMG src="img2.png" descripcion="Esta es la segunda imagen" onclick="selecciona(this)">
<IMG src="img3.png" descripcion="Esta es la tercera imagen" onclick="selecciona(this)">
<IMG src="img4.png" descripcion="Esta es la cuarta imagen" onclick="selecciona(this)">
...
</BODY>
</HTML>
He añadido a las imágenes el evento
onclick para que cuando se pulse en ellas se seleccione. No voy a entrar en detalles como que aparezca el cursor con la forma de la mano, ni que si se pulsa de nuevo se deseleccione.
También necesitaremos un objeto
SELECT para ir incluyendo las imagenes que seleccionemos.
<SELECT id="lista" size="4">
</SELECT>
Solo nos falta que cuando pulsemos en la imagen, se añada la descripción de la imagen en la lista y se ponga el atributo "incluida" a true para que así sepamos que ya se ha añadido la imagen a la lista.
<SCRIPT>
function selecciona(obj) {
var incluida = obj.getAttribute("incluida");
if (incluida != "si") {
var lista = document.getElementById("lista");
lista.options[lista.options.length] = new Option(obj.getAttribute("descripcion", obj.src);
obj.setAttribute("incluida", "si");
}
}
</SCRIPT>
El resultado sería el siguiente:
ARCHIVO
ATOM
3 Comentarios:
¡Muchas Felicidades por este nuevo blog!
Está muy clarito y para los que como yo no andamos muy sueltos se agradece mucho.
Prometo ser una visitante fiel
Por
Belcha, a las 1/31/2006 11:05:00 a. m.
Lo siento, pero esto sólo funciona en Internet Explorer
Por
Anónimo, a las 4/11/2006 09:17:00 a. m.
Acabo de probarlo en Firefox y en Opera para Windows y funciona, ¿en qué te ha fallado a tí?
Saludos
Por
Anónimo, a las 4/11/2006 09:27:00 a. m.
Publicar un comentario
<< Inicio