Se me ocurre hacerlo de otra manera.
Código HTML:
Ver original <img src = "imagen1.jpg" data-img = "imagen1-hover.jpg" /> <img src = "imagen2.jpg" data-img = "imagen2-hover.jpg" /> <img src = "imagen3.jpg" data-img = "imagen3-hover.jpg" />
Código Javascript
:
Ver originalvar aux1, aux2;
[].forEach.call(document.querySelectorAll("#menu img"), function(img){
img.addEventListener("mouseover", function(){
if (this.className != "estatico"){
aux1 = this.src;
this.src = this.dataset.img;
this.dataset.img = aux1;
}
}, false);
img.addEventListener("mouseout", function(){
if (this.className != "estatico"){
aux1 = this.src;
this.src = this.dataset.img;
this.dataset.img = aux1;
}
}, false);
img.addEventListener("click", function(){
aux1 = document.querySelector(".estatico");
if (aux1 && aux1 != this){
aux1.className = "";
aux2 = aux1.src;
aux1.src = aux1.dataset.img;
aux1.dataset.img = aux2;
}
if (aux1 == this){
this.className = "";
}
else{
this.className = "estatico";
}
}, false);
});
Lo que hago es simple. Cada imagen del menú posee una imagen inicial y una segunda imagen almacenada en el pseudo-atributo
data-img. Esta última es la que mostraremos cuando se pose el cursor del mouse sobre la imagen.
En el código JavaScript, declaro dos variable que usaré más adelante y tomo a todas las imágenes del menú y a cada una le aplico distintas funciones según sea el evento que se produzca en ellas.
En el primer evento (mouseover), verifico que la imagen
no posea la clase 'estatico'; de ser así, tomo la ruta de la imagen actual y la almaceno en una variable auxiliar, luego, tomo ruta de la imagen almacenada en el pseudo-atributo
data-img y la asigno como nueva imagen, mientras que a la ruta original, la asigno a dicho pseudo-atributo.
En el segundo evento (mouseout), el proceso es el mismo, pues, en el anterior evento, la ruta de la imagen original queda almacenada en el pseudo-atributo, por lo tanto, al hacer el cambio, nuevamente tomará dicha ruta. Puedes abstraer ese pequeño bloque de código y colocarlo en una función para que así no repitas las mismas líneas, solo lo dejé así para que sea lo más claro posible.
En el tercer evento (click), tomo al elemento que posea la clase 'estatico' y si se encuentra alguno y es distinto al elemento actual, le quito dicha clase, tomo la ruta de su imagen actual y la almaceno en una variable, le asigno la que tenía guardada en el pseudo-atributo y la original quedará guardada en el mismo. Exactamente lo mismo que hice en los dos anteriores eventos. Para que nuevamente las tres imágenes cambien al pasar y quitar el cursor del mouse sobre ellas, le quito la clase 'estatico' a la imagen si es que ya la posee y se la asigno si no es así, es decir, si es distinta al elemento almacenado en
aux1.
Como podrás ver, luego de dar un clic a cualquiera de las imágenes, no se produce el cambio de ruta en ella al retirar el cursor del mouse pues hay una condición que debe de cumplirse, la cual señala que la imagen
no debe de poseer la clase 'estatico', pero como al darle clic se la asignamos, no habrá cambio alguno hasta que se le dé un clic a otra imagen.
DEMO
No olvides colocar este código después del último elemento de tu documento HTML y justo antes de la etiqueta
</body> para que surta efecto.
Saludos
