Anónimo
Cambiar imágenes al pasar el mouse
Tengo este código
<script language="javascript">
var i=0;
var est=".jpg";
function cambiar(){
while( i<200)
{
i++;
imagen1=new Image
imagen1.src="directorio/" + i + est;
document.images['imagen'].src=imagen1.src;
return;
}
}
function salir()
{
i=0;
imagen1=new Image
imagen1.src="directorio/1.jpg";
document.images['imagen'].src=imagen1.src;
}
</script>
lo utilizo asi
<a href="imagenes progresivas/codigo para sacar fotos.txt"><img src="cinergia/1.jpg" name="imagen" onmousemove="cambiar()" onmouseout="salir()">
Pero lo que necesito que haga el escript es que cuando pases el mouse por encima
de otra imagen la cambie sin refrescar la página
<script language="javascript">
var i=0;
var est=".jpg";
function cambiar(){
while( i<200)
{
i++;
imagen1=new Image
imagen1.src="directorio/" + i + est;
document.images['imagen'].src=imagen1.src;
return;
}
}
function salir()
{
i=0;
imagen1=new Image
imagen1.src="directorio/1.jpg";
document.images['imagen'].src=imagen1.src;
}
</script>
lo utilizo asi
<a href="imagenes progresivas/codigo para sacar fotos.txt"><img src="cinergia/1.jpg" name="imagen" onmousemove="cambiar()" onmouseout="salir()">
Pero lo que necesito que haga el escript es que cuando pases el mouse por encima
de otra imagen la cambie sin refrescar la página
1 Respuesta
Respuesta de jeybi
1
Explicate mejor, "cuando pases el mouse por encima de otra imagen la cambie", ¿Qué otra imagen?, por lo que entiendo quieres hacer un slideshow de imágenes.
En tu código, no es necesario hacer "new Image", eso solo se usa para precargar una imagen, lo que haces en la función "cambiar" es simplemente cargar 200 imágenes y añadir la ultima de ellas.
Si el caso es hacer un slideshow: Google, en caso contrario especifica más que es lo que quieres, pasar el puntero por encima de una imagen y hacerla cambiar en secuencia sin ningún control del usuario es algo poco usable.
En tu código, no es necesario hacer "new Image", eso solo se usa para precargar una imagen, lo que haces en la función "cambiar" es simplemente cargar 200 imágenes y añadir la ultima de ellas.
Si el caso es hacer un slideshow: Google, en caso contrario especifica más que es lo que quieres, pasar el puntero por encima de una imagen y hacerla cambiar en secuencia sin ningún control del usuario es algo poco usable.
http://estabasaqui.x10hosting.com/
Si puedes entrar allí, el código nada más funciona para una imagen pero quisiera poder hacerlo con varias imágenes y un mismo código...
No se si me explique bien...
Si puedes entrar allí, el código nada más funciona para una imagen pero quisiera poder hacerlo con varias imágenes y un mismo código...
No se si me explique bien...
Ok, quieres crear un modulo reusable, en este caso un objeto. Hay muchas opciones, te mostrate una.
1. Creamos el constructor:
function imagenMovil(o){
}
2. Nuestra función aceptara varios parámetros, para poder hacerla más flexible usaremos un objeto de configuración, en dicho objeto colocamos las opciones para crear nuestra tira de imágenes. Un ejemplo de como podría quedar:
new imagenMovil({
el : document.getElementById('imgen'), // El elemento IMG a usar
ext: 'jpg', // Extension a usar
totalImages : 200, // Total de imagenes
directory : 'imagenes/', // Directorio
imageName : 'imagenA' // Nombre base, a este nombre se le concatenera el numero actual (imagenA1, imagenA2, etc)
});
3. Ahora solo hay que adaptar la funcion:
function imagenMovil(){
// o = objeto de configuracion
this.img = o.el;
this.img.total = o.totalImages;
this.img.ext = o.ext;
this.img.dir = o.directory;
this.img.imgName = o.imageName;
this.img.curr = 0; // Imagen actual
// Añadimos escuchas
this.img.onmousemove = this.mousemove;
this.img.onmouseout = this.mouseout;
}
// Los metodos en el prototypo ayudan al rendimiento
imagenMovil.prototype = {
mousemove : function(){
// this == image;
if( this.curr < this.total){
this.curr++;
this.src = this.dir+this.imgName+this.curr+this.ext;
}
} ,
mouseout : function(){
this.curr = 0;
this.src = this.dir+this.imgName+'1'+this.ext;
}
}
Y básicamente eso es todo, puedes añadir alguna precarga de imágenes si gustas, esa se añadiría en forma de bucle en el constructor (function imagenMovil)
PD: El código no esta probado, no tengo un editor a la mano, cualquier problema me avisas.
1. Creamos el constructor:
function imagenMovil(o){
}
2. Nuestra función aceptara varios parámetros, para poder hacerla más flexible usaremos un objeto de configuración, en dicho objeto colocamos las opciones para crear nuestra tira de imágenes. Un ejemplo de como podría quedar:
new imagenMovil({
el : document.getElementById('imgen'), // El elemento IMG a usar
ext: 'jpg', // Extension a usar
totalImages : 200, // Total de imagenes
directory : 'imagenes/', // Directorio
imageName : 'imagenA' // Nombre base, a este nombre se le concatenera el numero actual (imagenA1, imagenA2, etc)
});
3. Ahora solo hay que adaptar la funcion:
function imagenMovil(){
// o = objeto de configuracion
this.img = o.el;
this.img.total = o.totalImages;
this.img.ext = o.ext;
this.img.dir = o.directory;
this.img.imgName = o.imageName;
this.img.curr = 0; // Imagen actual
// Añadimos escuchas
this.img.onmousemove = this.mousemove;
this.img.onmouseout = this.mouseout;
}
// Los metodos en el prototypo ayudan al rendimiento
imagenMovil.prototype = {
mousemove : function(){
// this == image;
if( this.curr < this.total){
this.curr++;
this.src = this.dir+this.imgName+this.curr+this.ext;
}
} ,
mouseout : function(){
this.curr = 0;
this.src = this.dir+this.imgName+'1'+this.ext;
}
}
Y básicamente eso es todo, puedes añadir alguna precarga de imágenes si gustas, esa se añadiría en forma de bucle en el constructor (function imagenMovil)
PD: El código no esta probado, no tengo un editor a la mano, cualquier problema me avisas.