Autor Tema: necesito el script para que imagen cambie a otra cunado el puntero este sobre  (Leído 1911 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado froilan

  • Sv Member
  • ***
  • Mensajes: 333
nesecito saber el script de java para que una imagen cambie a otra cuando el puntero este sobre y al quitarlo buelva a la imagen anterior
lo he hecho como me lo piden pero no se por que no funciona de antemano gracias
pd:el nombre de las dos imagenes es logo1 y logo23
Citar
<script>
imagen1 = new Image;
imagen1.src == "logo1.jpg";
imagen2 = new Image;
imagen2.src="logo23.jpg";
funcion cambioimagen(tipo){
if(tipo=="sobre"){
document.getElementById("imagensuperior").src= imagen2.src;
} else {
document.getelementById("imagensuperior").src= imagen1.src;
}
}
</script>

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="835" height="132" border="1">
  <tr>
    <td width="327" rowspan="3">&nbsp;</td>
    <td width="232" rowspan="3">&nbsp; </td>
    <td width="254"><img src="logo1.jpg" name="imagensuperior"  width="107" height="107" id= "imagensuperior" onMouseOver="cambioimagen('sobre');"
   onMouseOut="cambioimagen('fuera')"></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
   </td>
  </tr>
</table>
</body>
</html>

Desconectado mxgxw

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 5665
  • Starlet - 999cc
    • mxgxw
Sip, mira el codigo para cambiar la imagen esta bien. Lo que sucede es que las imágenes no aceptan el atributo "onmouseover" tenes que meter la imagen dentro de un link.

Aquí te va otra forma de hacerlo:

Código: [Seleccionar]
....header...
<script type="text/javascript">
<!--

function changeImages(container,source) {
document.getElementById(container).setAttribute("src",source);
}
//-->
</script>

.... body....

<a onmouseover="changeImages('logo1','logo23.jpg');return true"
    onclick="return false;"
    onmouseout="changeImages('logo1','logo1.jpg');return true" href="">
<img id="logo1" src="logo1.jpg" alt="" name="llogo1" height="85" width="20" border="0">
</a>


Con onmouseover llamas a la funcion changeImages(<nombreimagen>,<rutadelaimagen>) y cuando encuentra onmouseout llama de nuevo a la funcion con la imagen original.
Fijate el detalle que la imagen no va sola sino que adentro de una etiqueta <a> ya que esta es la que recibe los eventos de onmouseover y onmouseout... el onclick="return false;" es para evitar que se te recargue la ventana al hacer click.
« Última Modificación: marzo 17, 2007, 07:14:11 pm por mxgxw »


Desconectado fermarroquin

  • -^- Elite Silver -^-
  • The Communiter-
  • *
  • Mensajes: 3503
    • Fernando Marroquín
Con dreamweaver lo podés hacer man.

Insertas la imagen que aparecerá, después seleccionas esa imagen y vas a:

Insertar > Objetos de Imagen > Imágen de Sustitución.
Salvadoreño. Arquitecto. Nocturno. Apasionado. Geek. Hago política. Oveja negra. Dejando la Coca-Cola. Tomo fotos. Astronauta y saxofonista frustrado. En Twitter soy @FerMarroquin.

Desconectado mxgxw

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 5665
  • Starlet - 999cc
    • mxgxw
Ya corregí el código, no lo habia modificado bien jejeje pero ahora si te debería funcionar.

El Dreamweaver no me gusta que te agrega mucho codigo basura.. bueno cualquier editor... a veces es mejor hacerlo a mano para que quede bien optimizadito.


Desconectado froilan

  • Sv Member
  • ***
  • Mensajes: 333
hey gracias a los 2 man me han sacado de aguas ahora a matarme haciendo un reloj pero me funciono el de los dos muchas gracias