Foros del Web - Ver Mensaje Individual - Consulta sobre activar y desactivar solapas

Dalvenjha · #54 (**permalink**) 06/02/2009, 09:17

Has cambiado las clases con javascript, convirtiendo en la clase dominante al que quieras marcar, pero eso es largo, te paso a explicar el código que escribí:

Código:

var imagen = 0;
var suma = 1;

<!-- aqui estamos estableciendo dos variables globales que usaremos-->

function backchange(){
this.style.backgroundPosition = "left bottom";
}

<!--Esta es la primera función, que cambiará el CSS de el elemento al que se aplique
cambiará la posición del background que por defecto es left top a left bottom-->

function backchanger(){
this.style.backgroundPosition = "left top";
}

<!--Esta es la segunda función que regresa las cosas a la normalidad-->

<!--aqui se viene a función importante-->
function sprites(){
var listaimas = document.getElementById('listaimagenes').getElementsByTagName('a');

<!--primero formo un array o listado con todos los links del div "listaimagenes"
¿Como hago esto?, simple, ya has usado el "getElementById" entonces, ahora usamos algo
distinto más, el "getElementsByTagName" lo que hace es buscaro todos los elementos que
sean del tag que tu elijas, dentro del lugar que le indiques, por lo tanto lo que he hecho es 
decir: coge todos los links ('a') que estén dentro del div "listaimagenes" esta lista se maneja
por números que van del 0 hasta el número de elementos que haya menos 1. Es decir, si
tienes 10 links, pues creará una lista que irá del 0 al 9 con cada uno de tus links. 
-->

imagen+=suma;

<!--aqui le digo que nuestra variable imagen, que vale 0, aumente en 1 cada vez que se
ejecute la función, como es una variable global, se mantendrá el valor aunque la función
haya termido-->


for(var i=0; i<listaimas.length; i++) {

<!--aqui aplicamos un for, que es un controlador, que hará cumplir la función mientras
se cumpla un requisito osea para recorrer nuestra lista le decimos, vaya desde 0 hasta el 
número final, como nosotros nos abemos cual es ese número final, usamos la expresión
"listaimas.length" recordemos que nuestro array se llama "listaimas" asi que lo que hace es
decir, dame el tamaño del array o lista, y el último parámetro, nos dice que i avanzarrá de
uno en uno.-->

  var listele = listaimas[i];

<!--aqui creamos una nueva variable, llamada "listele" esta variable contendrá el elemento
"i" de nuestro array o lista, es decir, si i = 0, como será en el primer renglón entonces
cogeremos el elemento "0" de nuestro array, y como sabemos, el elemento 0 de un array
es el primer elemento. Y asi irá avanzando, cada valor que tome "i" será el número en el
array de nuestto elemento-->

  listele.style.background = "url("+imagen+".jpg)";

<!-- Ahora le diremos que a nuestra variable "listele" le vamos a dar un background, aqui 
es donde interviene nuestra variable imagen, tu crearás las imágenes desde el 1 hasta el número de elementos que tengas, por ejemplo si tienes 10 elementos y le quieres dar 
background a cada uno, pues creas diez imágenes y les pones nombres del 1 al 10. Bueno
sigamos, como la variable imágen crece también, entonces lo que estamos diciendo es lo 
siguiente:  a nuestro elemento listaimas[i] dale de background, nuestra imagen. Si el caso
es el del primer elemento diremos algo asi tacitamente. al elemento "listaimas[0]" dale de
background la imagen "1.jpg", como sabemos "listaimas[0]" no es otra cosa que el primer
link. Y asi irá avanzando-->

  listele.onfocus = backchange;

<!--Aqui le damos evento a nuestro elemento, le decimos lo siguiente a nuestro elemento
"listaimas[0]" "onfocus" osea cuando esté enfocado, osea al darle click y hasta que le des
click a otra cosa, le aplicas la primera función, que cambia la posición del background.-->

  listele.onblur = backchanger;
<!--Aqui le aplicamos eventos, le decimos, cuando a nuestro elemento "listaimas[i]" 
"onblur" osea cuando lo desenfoques, le aplicamos la segunda función, que hace
regresar a la normalidad el background.-->

  


      }
}

<body onload="sprites();">

<!--aqui llamamos a nuestra función, para que todo esto se cumpla cuando la página 
cargue-->

Espero no habver sido engorroso, y haber sido explicito. No soy bueno explicando, por eso lo he puesto con cucharita creo...

Saludos!!