Cambio de Imagen

SileBird · #1 (**permalink**) 07/05/2009, 04:22

Sigo aprendiendo javaScript

Esta vez tengo que tener un Script para JSP para que, en una página que tengo 3 imagenes que son botones, según apriete un boton u otro aparecerá algo como esto que ya tengo preparado:

Código:

<iframe width="420" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps/ms?ie=UTF8&amp;t=h&amp;hl=es&amp;msa=0&amp;msid=102965834445233087216.0004694fd5b790ac48b34&amp;ll=43.290416,-5.63884&amp;spn=0.000976,0.002253&amp;z=18&amp;output=embed">
</iframe>
<br />
<small>Ver 
<a href="http://maps.google.es/maps/ms?ie=UTF8&amp;t=h&amp;hl=es&amp;msa=0&amp;msid=102965834445233087216.0004694fd5b790ac48b34&amp;ll=43.290416,-5.63884&amp;spn=0.000976,0.002253&amp;z=18&amp;source=embed" style="color:#0000FF;text-align:left">Sagrada Familia</a> en un mapa más grande
</small>

En fin, sigo complicandome la vida ya que sigo con mi pensamiento de ASP y ahoar tengo que hacerlo en Java

lobo_php · #2 (**permalink**) 07/05/2009, 06:34

Cita:

En fin, sigo complicandome la vida ya que sigo con mi pensamiento de ASP y ahoar tengo que hacerlo en Java

pues me parece bien compañero, que aprendas a desarrollar, no a manejar un programa que "desarrolla", si es que lo hace, ahora ves lo que es DESARROLLAR??! eso si es desarrollar...

SileBird · #3 (**permalink**) 07/05/2009, 06:49

Últimamente me están volviendo loco con todo el Java

Solo necesito una cosa, esto es un ejemplo que pillé por internet

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

	<SCRIPT>
	
	function articolo(str) {
	
	        searchWin = window.open(str,'articolo','scrollbars=no,resizable=yes,width=485,height=300,status=no,location=no,toolbar=no');
	
	//        searchWin.refer = self;
	
	}
	</SCRIPT>

	<SCRIPT language="JavaScript">
	var isJsOneOne = false;
	</SCRIPT>
	
	<SCRIPT language="JavaScript1.1">
	isJsOneOne = true;
	</SCRIPT>


</head>
<body>

<BR><BR>
<div align="center">
<FONT SIZE=4 FACE="Arial">

<A HREF="http://www.htmlpoint.com" onmouseover="if (isJsOneOne) cambio.src='01.jpg';"
onmouseout="if (isJsOneOne) cambio.src='bianco.gif';">Primer ejemplo</A>

<BR><BR>

<A HREF="http://www.htmlpoint.com" onmouseover="if (isJsOneOne) cambio.src='02.jpg';"
onmouseout="if (isJsOneOne) cambio.src='bianco.gif';">Segundo ejemplo</A>

<BR><BR><BR><BR>

<img src="bianco.gif" width=80 height=80 hspace=2 border=0 name="cambio">

<B></B></FONT>
</div>

</body>

Lo que necesito yo es que al apretar los links se queda la imagen quieta, no que al pasar el mouse por encima aparezca. Probé ahcer un "onclick" pero no me funcionó.

Cuál es lo que se usa?

lobo_php · #4 (**permalink**) 07/05/2009, 06:58

mira que te dice la consola de errores.

buzu · #5 (**permalink**) 07/05/2009, 07:29

puffff..... Amigo, primero que nada, esto no es JAva. Si necesitas ayuda con Java por que no te vas a un foro de JAva? Ya que estás aprendiendo, por que no aprendes esto: hay una gran diferencia entre Java y Javascript. No los confundas.

Pasando a tu problema, lo que necesitas es cambiar el valor del src de tu imagen. La idea es sencilla.

1) le das un id a tu imagen. Digamos que el id es "imagen". (si, ya se, mi imaginación es super jajaja).
2) Creas una función que cambie el src de esa imagen y la asignas a los onclick de cada boton. Por ejemplo:
<a href="noVa" onclick="cambiarImagen('url/de/la/imagen.jpg')">Boton</a>

Lo mismo haces con cada botón.

La función quedaría algo así:

Código javascript:

Ver originalfunction cambiaImagen(url){
     document.getElementById('imagen').src = url;
}

Y eso debe ser suficiente.

SileBird · #6 (**permalink**) 08/05/2009, 00:21

Cita:

Iniciado por buzu

Ya que estás aprendiendo, por que no aprendes esto: hay una gran diferencia entre Java y Javascript. No los confundas.

Lo se buzu, pero es que tengo que hacer las 2 cosas a la vez, como expliqué al empezar el tema, ahora en vez que cambien imagenes, tienen que cambiar cosas como esta:

Código:

<iframe width="420" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps/ms?ie=UTF8&amp;t=h&amp;hl=es&amp;msa=0&amp;msid=102965834445233087216.0004694fd5b790ac48b34&amp;ll=43.290416,-5.63884&amp;spn=0.000976,0.002253&amp;z=18&amp;output=embed">
</iframe>
<br />
<small>Ver 
<a href="http://maps.google.es/maps/ms?ie=UTF8&amp;t=h&amp;hl=es&amp;msa=0&amp;msid=102965834445233087216.0004694fd5b790ac48b34&amp;ll=43.290416,-5.63884&amp;spn=0.000976,0.002253&amp;z=18&amp;source=embed" style="color:#0000FF;text-align:left">Sagrada Familia</a> en un mapa más grande
</small>

Y los links tendrán que ser imagenes, eso es por lo que tengo que mezclar JSP y JavaScript.
__________________________________________________ ____________________________

Editado:

Bueno ya lo he solucionado y la cosa me ha quedado así:

Script (Igualito que al que me disteis)

Código:

	<script type="text/javascript">
	      function cambiaImagen(url){
	           document.getElementById('Llenar').src = url;
	      }
	</script>

Código (Resumido)

Código:

<td width="400px" colspan="2">
	<iframe id="Llenar" width="420" height="250" src="01.jpg"></iframe>
</td>

<td align="right" valign="middle">
	<img src="02.png" id="IMAGEN" onClick="cambiaImagen('url');" name = "IMAGEN">
</td>

Muchísimas gracias a todos por vuestra ayuda, al final me salió el "onClick", debía ser que estaba mal escrito seguramente y sobre todo gracias porque estoy aprendiendo poco a poco.