cambio de imagenes con javascript

andersson1 · #1 (**permalink**) 23/06/2009, 08:19

necesito que alguien me ayude! necesito saber como hago para cambiar las imagenes de una pagina web dandole un click a la imagen!

yo tengo un codigo pero solo me funciona para dos imagenes. si alguien me puede ayudar se lo agradezco, o puede hacerlo con otros metodo pero que me funcione para varias imagenes..

el codigo que yo tengo es este:

<HTML>
<HEAD><TITLE>ejemplo de imagenes</TITLE>
<script language="javascript" type="text/javascript">

imagen1=new Image
imagen1.src="fotos/ina/uno.jpg"
imagen2=new Image
imagen2.src="fotos/ina/dos.jpg"

var i=1;

function cambiar() {
if (i == 1)
{
document.images['ejemplo'].src=imagen2.src
i=2;
}
else
{
document.images['ejemplo'].src=imagen1.src;
i=1;
}
}

</script>
</HEAD>
<body >

<div id="inauguracion" align="center">
<img width="300" height="300" src="fotos/ina/uno.jpg" name="ejemplo" onMousedown="cambiar()">
</div>

</body>
</HTML>

flpms · #2 (**permalink**) 23/06/2009, 08:56

Usted puede criar uno Array con nombre de las imagens. E quando llamar la funcion envie esta valor q llamara a imagen

andersson1 · #3 (**permalink**) 23/06/2009, 09:11

Cita:

Iniciado por flpms

Usted puede criar uno Array con nombre de las imagens. E quando llamar la funcion envie esta valor q llamara a imagen

si pero quien me dice como hacerlo!!! ya que no se mucho de programacion!!!

ka13 · #4 (**permalink**) 23/09/2009, 03:17

Yo lo que uso es esta función, que tienes que meterla en el HEAD de la página:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Y dentro del BODY, cuando quieras cambiar una imagen usas esto:

<IMG SRC="imagen1"
onmouseover='CambiarImages(0, "imagen2")'
onmouseout='CambiarImages(0, "imagen1")'
height="20" width="30"
/>

El primer parametro que le pasas a la función es el numero de la imagen de esa página que vas a sustituir: Por ejemplo si quieres sustitur la primera imagen que aparece en la pagina, pones CambiarImages(0, "imagen2") , si quieres la segunda, CambiarImages(1, "imagen2")... es importante que el número coincida.

En el ejemplo que te he puesto, la imagen se cambia al pasar el raton por encima, y vuelve a la inicial al quitarlo de encima. Si quieres que la imagen se cambie al hacer clic, en vez de

onmouseover='CambiarImages(0, "imagen2")'

tienes que usar

onclick='CambiarImages(0, "imagen2")'

Espero que te haya servido.