[SOLUCIONADO] Saber el indice de un enlace en un div

[pedromir]

Hola, tengo varios enlaces dentro de un div y necesito que al pinchar sobre cualquiera de estos me salga un mensaje indicándome la posición, o sea, el índice que ocupa dicho enlace dentro del div y no quiero utilizar un id para cada enlace, porque son bastante enlaces

Y con esta función me muestra la posición de cada uno de los enlaces, pero no del enlace sobre el que he pinchado sólo, que es lo que me interesa

Código Javascript:

function posicionEnlace() {
    var contenedor = document.getElementById("galeria");
    var lista = contenedor.getElementsByTagName("a");
for(var i=0; i<lista.length; i++) {
    alert(" Posicion: " + [i] + "" );
}  
}
 

Código HTML:

<div id="galeria">
<ul id="imgLista">
<li><a id="uno" onClick="posicionEnlace(this)" href="images\1_castillo.jpg" title="Esta es la primera imagen">1</a></li>
<li><a onClick="posicionEnlace(this)" href="images\2_castillo.JPG" title="Esta es la segunda imagen">2</a></li>
</ul>
</div>
 

[IsaBelM]

siguiendo con la lógica de código que muestras

function posicionEnlace(este) {
var contenedor = document.getElementById("galeria");
var lista = contenedor.getElementsByTagName("a");
for(var i=0; i<lista.length; i++) {
if (este === lista[i]) alert(" Posicion: " + [++i] + "" );
}
}

[pedromir]

Funciona perfectamente, pero ahora no se como utilizarlo para lo que yo quiero.
Tengo una galeria de imagenes, entonces cuando pincho en un enlace me selecciona la imagen correspondiente y con focus y css, me deja remarcado ese enlace, pero al pinchar en cualquier lugar de la pantalla, actúa el evento onblur y me elimina la selección, entonces lo que yo necesito es que al pinchar en cualquier sitio el evento onBlur me mantenga el foco sobre el enlace seleccionado, así que el código que te he pasado era para el evento onBlur y no para el onClick

[America|UNK]

En ese caso para lo que estás haciendo se adapte a tus necesidades debes usar otro método ya que esos eventos de control mayormente se usan para otro propósito, lo puedes hacer, pero te recomiendo que por cada enlace que se seleccione le agregues una clase que identifique que elemento es el actual.

[pedromir]

La forma más sencilla y quizás la más lógica, como tu comentas, es ponerle un id a cada enlace, pero como son bastantes y con el tiempo le voy a seguir añadiendo enlaces, o sea, fotos, he preferido intentarlo de esta otra manera, y ahorrarme todos los id, pero si no se puede tendré que recurrir a ellos

[America|UNK]

No es necesario editar tu HTML mi estimado, a lo que me refiero es que lo hagas en tu propio bucle, con el elemento padre "galeria" ya tienes el control de todos los elementos por debajo. Aquí te pongo un ejemplo: http://jsfiddle.net/wZVanG/j1b8htwy/. Como te mencioné, añades una clase llamada "active" al elemento, así identificas el foco del mismo.

[pedromir]

Ya funciona perfectamente, me has resuelto un problema que llevaba tiempo detrás de él y no conseguía que funcionara bien del todo, así que muchas gracias, pero como suele ocurrir al solucionar un problema surge otro y es que al pinchar en un enlace no ejecuta la función que muestra la foto correspondiente.
He hecho distintas pruebas pero no me funciona.
Este es el código de los enlaces con la llamada a la función.

Código HTML:

<div id="galeria">
<ul id="imgLista">
<li><a onClick="return showPic(this)" href="images\1_castillo.jpg" title="Esta es la primera imagen">1</a></li>
<li><a onClick="return showPic(this)" href="images\2_castillo.jpg" title="Esta es la segunda imagen">2</a></li>
<li><a onClick="return showPic(this)" href="images\3_castillo.jpg" title="Esta es la tercera imagen">3</a></li>
</ul>
<img id="imgContenedor" src="images\1_castillo.jpg" width="729" height="525" /></div>
 

[America|UNK]

El problema es que estás cambiando el código frecuentemente, y por eso resultan los conflictos, con el último código que pusiste ya no funcionaría lo que te pasé y se emplearía otra solución. Coloca el código final de tu HTML para que finalmente el link funcione bien y también verifique su posición actual.

EDIT:

Con el último ejemplo: http://jsfiddle.net/mvm92hzq/

[pedromir]

El código que te he pasado ahora es el original, lo que ocurre es que en mi primer correo como lo que estaba buscando era una solución para el problema del evento onBlur, y sólo buscaba lo del tema del índice no puse el código para el cambio de imagen, porque esto me funcionaba bien, pero como ahora la solución viene por otro lado y en este momento lo que no funciona es el cambio de foto, te he puesto el código que utilizo y por eso no te lo había puesto antes.

Código Javascript:

//Con esta línea tal como está, queda remarcada la opción, pero no hace nada
            showPic.call(this, event, i);
            //pero se cambio call por bind
             showPic.bind(this, event, i);
              //me abre la foto correspondiente, pero en otra página, así que No me hace el cambio de imagen
 

Te paso el código que utilizo para el cambio de imagen

Código Javascript:

function showPic(whichpic) {
    if (document.getElementById) {
        document.getElementById('imgContenedor').src = whichpic.href;
    if (whichpic.title) {
        document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.title;
    } else {
        document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;       
    }
    return false;
    } else {        
        return true;        
    }
}
 

[America|UNK]

call es muy diferente que bind, es recomendable leas su función de cada una de ellas, puedes ver este artículo sobre los diferentes métodos para invocar funciones.

Ahora,

Código Javascript:

showPic.call(this, event, i);
//this no cuenta como argumento
//Primer argumento de la función: event
 

La función call está haciendo referencia al mismo elemento, es decir, cuando estés en la función showPic(event, i){ alert(this.href) }, puedes acceder al elemento con this, en este caso lo usé para acceder al atributo href.

A la llamada de la función le paso el argumento event, que servirá para prevenir el evento por defecto del enlace. Con event.preventDefault(), el link ya no se abriría en otra ventana, como normalmente lo hace.

Update: http://jsfiddle.net/wZVanG/mvm92hzq/1/

[pedromir]

El código que muestra el texto con la descripción de la imagen "imgDescripcion" no es compatible con Firefox, que es el que utilizo yo normalmente, porque con este navegador no aparece texto ninguno, así que lo he probado con IE y con Chrome y con estos dos funciona perfectamente.

[IsaBelM]

usa :target de css3

[pedromir]

El problema viene porque Firefox no soporta la propiedad innerText, así que he cambiado esta propiedad por la propiedad textContent que si es soportada por Firefox y problema resuelto, además me he creado una función que comprueba si el navegador usado es compatible con esta última propiedad y si lo es pues la utiliza y si no lo es utiliza la otra, innerText, de esta manera me aseguro que funciona correctamente con todos los navegadores.
Así que esta consulta se puede dar por solucionada y cerrada, sólo me queda daros las gracias a tod@s por vuestra ayuda y muy, pero que muy especialmente a America|UNK por su interés, paciencia y por la clase magistral de programación que me ha dado.