Foros del Web » Creando para Internet » HTML »

Imagenes Variables

Estas en el tema de Imagenes Variables en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/04/2011, 16:09
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Imagenes Variables

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
  #2 (permalink)  
Antiguo 19/04/2011, 17:34
 
Fecha de Ingreso: abril-2011
Ubicación: Iquitos, Peru
Mensajes: 113
Antigüedad: 6 años, 8 meses
Puntos: 31
Respuesta: Imagenes Variables

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
  #3 (permalink)  
Antiguo 19/04/2011, 17:57
 
Fecha de Ingreso: abril-2011
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Imagenes Variables

Cita:
Iniciado por JMSystem Ver Mensaje
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!
  #4 (permalink)  
Antiguo 19/04/2011, 18:08
Avatar de elmejorb  
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 6 años, 7 meses
Puntos: 2
Respuesta: Imagenes Variables

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

Código Javascript:
Ver original
  1. function cambiarImagen(control)
  2.     {
  3.         pat = /Over/
  4.         nombre = control.getAttribute('src');
  5.         if (pat.test(nombre) == false){
  6.             partes = nombre.split('.');
  7.             control.setAttribute('src', partes[0] + "Over." + partes[1]);
  8.         }else{
  9.             partes = nombre.replace('Over', '');
  10.             control.setAttribute('src', partes);
  11.         }
  12.     }

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

Etiquetas: imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:56.