Ampliar foto simplemente pasando el ratón

rimobio · #1 (**permalink**) 19/11/2008, 12:57

Código HTML:

<body>
<table width="565" height="349" border="0">
  <tr>
    <th height="242" scope="row">FOTO AMPLIADA </th>
  </tr>
  <tr>
    <th scope="row"><table width="584" height="92" border="0">
      <tr>
        <th width="143" scope="row">Foto1</th>
        <th width="137" scope="row">Foto2</th>
        <th width="104" scope="row">Foto3</th>
      </tr>
    </table></th>
  </tr>
</table>
</body>
</html>

Bueno yo quiero que cuando el ratón pase por la foto1 esta foto se muestra tambien en la parte superior pero ampliada ?
asi con todas las fotos

¿es posible?

David · #2 (**permalink**) 19/11/2008, 13:04

Solo tienes que cambiar el src del otro tag img donde quieras mostrar y cambiar su width y height en el evento onmouseover, revisa esto para darte una idea: http://www.forosdelweb.com/f13/galer...e-over-613207/

rimobio · #3 (**permalink**) 19/11/2008, 13:07

el problema esta en que mis conocimientos de javascript son minimos....

David · #4 (**permalink**) 19/11/2008, 13:12

Entonces te animo a que puedas revisar los manuales de Javascript que están en las FAQ's para darte una idea.

Porque aquí lo que podemos hacer para ayudarte es dar algunas ideas, pero el resto del trabajo eres tú quien tendrás que hacer. Por ejemplo, en ese enlace había un ejemplo de JavierB, ¿has intentado implementarlo?.

En fin, si tienes alguna duda específica, con gusto te ayudamos

.

rimobio · #5 (**permalink**) 19/11/2008, 13:16

lo estoy intentado implementar .... pero las variables mmm nosee.. voy a ver okisss
se perfectamente que no me podeis hacer el trabajo.. esta claro voy a intentar y os pregunto

rimobio · #6 (**permalink**) 19/11/2008, 13:26

Código HTML:

</head>

<body>
<table width="565" height="349" border="0">
  <tr>
    <th height="242" scope="row"><img  name="a" src="h.bmp" /></th>
  </tr>
  <tr>
    <th scope="row"><table width="584" height="92" border="0">
      <tr>
        <th width="143" scope="row"><img src="p.bmp" onmouseover = "a.src=g.bmp" /></th>
        <th width="137" scope="row"><img src="t.bmp" onmouseover = "a.src=g.bmp" /></th>
        <th width="104" scope="row"><img src="g.bmp" onmouseover = "a.src=g.bmp" /></th>
      </tr>
    </table></th>
  </tr>
</table>
</body>
</html>

tengo esto supongo que name="a" a sera la varible por eso he puesto despues que se cambien la src de a .. por tal imagen... bueno eso no me funciona ??

David · #7 (**permalink**) 19/11/2008, 13:35

Cuidado, esto está mal:

Código javascript:

Ver original"a.src=g.bmp"

Ya que g.bmp no es una variable, sino texto, por lo que debe ir entre comillas (simples en este caso porque ya está entre comillas dobles):

Código javascript:

Ver original"a.src='g.bmp'"

rimobio · #8 (**permalink**) 19/11/2008, 13:48

jeje xdd te iva ha decir yo ahora que lo avia solucionado porque ya me funciona correctamente
... pense en poner las '' como en los codes de php y a funcionar

gracias muchas gracias