cambiar imagen onmouseover

manguiti · #1 (**permalink**) 16/09/2008, 13:18

Necesito cambiar una imagen al pasar sobre ella y devolverle la misma imagen al quitar el raton de dicha imagen, para ello, tengo que pasarle a una funcion javascript, el id del elemento de bloque que la contiene y la url de la imagen ha cambiar....es sencillo pero no me aclaro sobre como "localizar" los elementos para aplicarles los cambios...yo he hecho esto, a ver si podeis decirme en que fallo....

Código HTML:

<div class="BloqueTitulo" onMouseOver="cambia_logo(this, '../imagenes/logoUCAContraste.png')"> 
      <a href="http://www.uca.es/" target="_blank" class="logo_uca" name="enlace_uca"  >
              <img name="img_uca" src="../imagenes/logoUCA.png" alt="logo" ></a>
........

e intento cambiarlo con esta funcion....pero me da error al pasar por encima de la imagen....

Código PHP:

  function cambia_logo(objeto, url){ 
 
 
    imagen_nueva = url; 
     
     
     
    objeto.images['img_uca'].src = imagen_nueva; 
 
}

David · #2 (**permalink**) 16/09/2008, 13:23

Puedes:
1) Asignar un id único al tag img y cambiar su src a partir de ahí.
2) Con getElementsByTagName obtener el img que tienes dentro del div y a partir de ahí cambiar su src.

manguiti · #3 (**permalink**) 16/09/2008, 13:33

se puede acceder a traves del id "BloqueTitulo"??, que antes lo tenía puesto como class, pero realmente es id....

Es que es lo que me pide el ejercicio, necesito sacarlo a raiz de ahi...

Código PHP:

  <body> 
<div id="BloqueTitulo" onMouseOver="cambia_logo(this, '../imagenes/logoUCAContraste.png')"> 
    <a href="http://www.uca.es/" target="_blank" class="logo_uca" name="enlace_uca"  ><img name="img_uca" src="../imagenes/logoUCA.png" alt="logo" ></a> 
          <div id="ContenedorZonaTactil"> 
            <div id="Zonatactil" onMouseOver="muestra_acceso()" onMouseOut="desaparece_acceso()" ><p id="hint" onClick="acceso_login()">Entrar al sistema</p> 
            </div> 
        </div> 
</div> 
</body>

David · #4 (**permalink**) 16/09/2008, 13:38

Si te refieres a acceder a la imagen a partir de ahí, como te dije con getElementsByTagName (leer los elementos que tengan el tag especificado). Por ejemplo:

Código javascript:

Ver originaldivobj = document.getElementById("BloqueTitulo");
divobj.getElementsByTagName("img")[0].src = "nueva_imagen.jpg";

manguiti · #5 (**permalink**) 16/09/2008, 13:59

bufff...que va, lo he puesto tal y como dices y sigue dandome error...puede indicarse en el array de imagenes el nombre en vez del numero, ya que por css cargo diferentes imagenes en esa misma pagina y no se si sería la primera o no....

Código PHP:

  function cambia_logo(objeto, url){ 
 
 
    imagen_nueva = url; 
     
    div = getElementById('BloqueTitulo'); 
    div.getElementByTagName('img')[0].src = imagen_nueva; 
     
}

David · #6 (**permalink**) 16/09/2008, 14:06

Es que es getElementsByTagName, te faltó la "s" en el código, en el caso lo que toma en cuenta es el primer tag img que encuentra dentro del div.

Si quieres ir por el nombre, no necesitas hacer referencia al div, solo haz referencia al nombre y listo:

Código javascript:

Ver originalimg_uca.src = "nueva_imagen.jpg"

manguiti · #7 (**permalink**) 16/09/2008, 14:18

que fallos más estupidos...jajaja...de todas maneras, lo he cmabiado y sigue sin ir, el caso, es que debo cogerlo mediante el id, ya que me lo pide la practica...

Código PHP:

   
function cambia_logo(objeto, url){ 
 
 
    imagen_nueva = url; 
     
     
    div = getElementById('BloqueTitulo'); 
    div.getElementsByTagName('img')[0].src = imagen_nueva; 
     
}

puede estar el fallo en la url que le paso?quiero decir, en el formateo de la cadena...

David · #8 (**permalink**) 16/09/2008, 14:23

A mí me funciona perfectamente

.

¿Has mirado si no está dando error en el navegador?. Además, ¿has comprobado que la url es correcta?

manguiti · #9 (**permalink**) 16/09/2008, 14:29

joder...la url si es correcta, en el navegador....para muestra un boton...

David · #10 (**permalink**) 16/09/2008, 14:33

¿Podrías subir tu página y colocar un enlace?. O en su defecto colocar el código tal y como lo tienes ahora.

manguiti · #11 (**permalink**) 16/09/2008, 14:37

TITULO.HTML

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>titulo.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilos/titulo.css" type="text/css">
<script language="javascript" src="../scripts/hint.js"></script>
<script language="javascript" src="../scripts/imagenes.js"></script>

</head>
<body>
<div id="BloqueTitulo" onMouseOver="cambia_logo(this, '../imagenes/logoUCAContraste.png')" onMouseOut="cambia_logo(this, '..imagenes/logoUCA.png')">
	<a href="http://www.uca.es/" target="_blank" class="logo_uca" name="enlace_uca"  ><img name="img_uca" src="../imagenes/logoUCA.png" alt="logo" ></a>
  	<div id="ContenedorZonaTactil">
	<div id="Zonatactil" onMouseOver="muestra_acceso()" onMouseOut="desaparece_acceso()" ><p id="hint" onClick="acceso_login()">Entrar al sistema</p></div>
	</div>
</div>
</body>
</html>

manguiti · #12 (**permalink**) 16/09/2008, 14:39

IMAGENES.JS

Código PHP:

  function cambia_logo(objeto, url){ 
 
 
    imagen_nueva = url; 
     
     
    div = getElementById('BloqueTitulo'); 
    div.getElementsByTagName('img')[0].src = imagen_nueva; 
     
}

manguiti · #13 (**permalink**) 16/09/2008, 14:40

Si quieres te paso tambien la hoja de estilos...

David · #14 (**permalink**) 16/09/2008, 14:50

Esto:

Código javascript:

Ver originaldiv = getElementById('BloqueTitulo');

Debes cambiarlo por:

Código javascript:

Ver originaldiv = document.getElementById('BloqueTitulo');

manguiti · #15 (**permalink**) 16/09/2008, 15:03

Muchas gracias nuevamente, eso era...

sysmaya · #16 (**permalink**) 25/08/2010, 22:03

No es bueno revivir temas viejos pero vale la pena por dar una respuesta "un poco" mas sencilla.
No hay que recurrir a scripts y menos a llamar el DOM.

<img name="nav"
src="image1.jpg"
onMouseOver="nav.src='image2.jpg';"
onMouseOut="nav.src='image1.jpg';" />

eso es todo.
Claro que podemos rodear la imagen con un hipervinculo, en ese caso es necesario
colocar la propiedad border=0