Imagenes Variables

Maxss · #1 (**permalink**) 19/04/2011, 15:09

Hola , soy algo nuevo en el diseño web. les comento aver si me pueden ayudar
quiero hacer una imagen en html que al presionarla cambie a otra imagen.
ejemplo :
IMAGEN1 AL HACER CLICK CAMBIE A IMAGEN 2 Y AL HACER CLICK OTRA VEZ CAMBIE A IMAGEN 1 .. ASI CONSTANTEMENTE.
espero su ayuda! Gracias!
Maxs

JMSystem · #2 (**permalink**) 19/04/2011, 16:34

lo puedes hacer con javascript. esto lo pones dentro del <head>

function cambiarImagen(){
if(document.getElementById('imagen').src=="http://localhost/imagen1.gif"){
document.getElementById('imagen').src="http://localhost/imagen2.gif";
}
else{
document.getElementById('imagen').src="http://localhost/imagen1.gif";
}
}

y el el body pones

Código HTML:

<img id="imagen" src="imagen1.gif" onclick="cambiarImagen()" style="cursor:pointer" />

cambia tu ruta y el nombre de tus imagenes y pruebalo

Maxss · #3 (**permalink**) 19/04/2011, 16:57

Cita:

Iniciado por JMSystem

lo puedes hacer con javascript. esto lo pones dentro del <head>

function cambiarImagen(){
if(document.getElementById('imagen').src=="http://localhost/imagen1.gif"){
document.getElementById('imagen').src="http://localhost/imagen2.gif";
}
else{
document.getElementById('imagen').src="http://localhost/imagen1.gif";
}
}

y el el body pones

Código HTML:

<img id="imagen" src="imagen1.gif" onclick="cambiarImagen()" style="cursor:pointer" />

cambia tu ruta y el nombre de tus imagenes y pruebalo

Gracias!

elmejorb · #4 (**permalink**) 19/04/2011, 17:08

con este metodo puedes cambiar la imagen no importando la url de forma mas facil:

Código Javascript:

Ver originalfunction cambiarImagen(control)
    {
        pat = /Over/
        nombre = control.getAttribute('src');
        if (pat.test(nombre) == false){
            partes = nombre.split('.');
            control.setAttribute('src', partes[0] + "Over." + partes[1]);
        }else{
            partes = nombre.replace('Over', '');
            control.setAttribute('src', partes);
        }
    }

para utilizarla en la etiqueta pones:

Código HTML:

<img id="imagen" src="imagen.jpg" onclick="cambiarImagen(this)"  />

La otra imagenen debe llamarse imagenOver.jpg

si tienes otras imagenes por cambiar solo debe seguir el mismo formato de ponerle _over al final y no tienes que cambiar el codigo para cada imagen que tengas q utilizar. otro ejemplo:

Código HTML:

<img id="imagen" src="bontonAceptar.jpg" onclick="cambiarImagen(this)"  />
<img id="imagen" src="bontonCancelar.jpg" onclick="cambiarImagen(this)"  />

la imagenes por las q se cambian deben llamarce bontonAceptarOver.jpg y bontonCancelarOver.jpg