Buenas.
Alomejor esta pregunta es extremadamente sencilla pero no encuentro la solución en Google (alomejor porque es demasiado fácil).
Tengo una imagen, y quiero que cada vez que paso el ratón por esa imagen salga una dista. Las imágenes tienen las mismas dimensiones. Dicho de otro modo, una imagen que cada vez que hagas mouseover pase a la siguiente imagen (sin animación ni nada, de golpe) y así sucesivamente hasta volver a la primera imagen.
¿Cómo se haría? Saludos.
Yo no tengo ni idea sobre javascript. Pero se me ocurre que "si hay algo en js" que detecte un mouseover, o que el ratón está dentro de un area específica, un contador que se incremente cada vez que el ratón entre en ese área y que cambie las imagenes cada vez que se incrementa.
Ya te digo que yo de js no tengo ni idea.
Pues tan sencillo como bindear a la imagen un evento onMouseOver que ejecute un cambio en el src de la imagen.
#2 Yo tampoco. Está claro que un programador sabe hacerlo y le resulta una estupidez. Pero las personas que no sabemos de programación aunque puedas intuir que por ejemplo con Javascript se podría hacer, eres incapaz de hacerlo. Y además no encuentro las palabras clave para buscarlo en Google.
La mayoría de resultados que me aparecen hacen referencia a imagenes que rotan (de posición) o cosas mucho más complejas de lo que busco :/.
#3 No lo he pillado muy bien. ¿Eso me valdría para múltiples imágenes en un solo mouseover?
#4 Supongo que el mouseover podrás hacer que llame a una función y en esa función podrás incrementar el contador y cambiar la imagen en función del contador.
Again si alguien lo confirma mejor porque yo de JS NOCING
#1 Buenas, si pones en google "change img onmouseover" salen cosillas. Ahora no tengo tiempo pero si no lo sacas dilo y te hago la funcion que es un momento.
La teoria es que en el evento onmouseover de la imagen llamas a una funcion que es donde escojeras la imagen a mostrar y la cambiaras. Teniendo un contador o algo asi para sacar siempre la siguiente imagen. Tmb puedes hacer que coja una imagen aleatoria de un array por ejemplo y la meta (ahi ya depende de lo que quieras).
Yo lo hago solo con css. Creas un <a> con display block, le das el tamaño de la imagen. Y creas dos atributos en tu hoja de estilos. La imagen la pones como background. Y en tu a:hover que la imagen de background sea la del over.
objeto1{
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
background-image: url(fondo.jpg);
}
objeto1:hover{
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
background-image: url(fondo2.jpg);
}
De este modo con css3 creas una transición. Al pasar el ratón por encima del objeto se cambiará la imagen gradualmente , lo que le da un toque bonito.
Creo que no me he explicado bien. No quiero un simple mouseover. Es algo ligeramente más complicado. Va más por lo que ha dicho #6.
Pero claro, al no tener ni papa de programación yo lo único que hago es buscar scripts plugins ya hechos y modificarlos a mi gusto. Pero no encuentro ninguno que haga esta cosa tan sencilla.
Buenas, he encontrado este foro donde preguntan algo muy parecido a lo que yo quiero (si no igual):
http://www.codingforums.com/archive/index.php/t-38098.html
Ya lo he conseguido. Ese script funciona. Por si alguien quería hacer algo parecido ahí tiene el source.
Si tenéis alguna pregunta o problema con este script comentarlo porque a mi me ha funcionado.
