Buenas, tu quieres que con 2 funciones solamente, te permita cambiar una imagen por otra aunque hayan 10 imágenes, no? te puedo dar una pista porque ahora mismo no caigo bien en como hacerlo, pero aqui te dejo algo que seguro te sirva si lo planteas bien.
Código Javascript
:
Ver original<script>
/* Con esto posicionamos las imagenes en esos valores
aproximadamente el centro de la página y en grande.
*/
function subir(x)
{
var imagenes='imagen'+ x
document.getElementById(imagenes).style.top='20%';
}
function vuelve(x)
{
var imagenes='imagen'+ x
document.getElementById(imagenes).style.top='85%';
}
</script>
Código HTML:
Ver original <h3 align="center">Posicionate sobre la imagen
</h3> <!--Imagenes que suben-->
<img id="imagen1" src="barca.jpg" onmouseOver="subir(1)" onmouseOut="vuelve(1)"/> <img id="imagen2" src="real.png" onmouseOver="subir(2)" /> <img id="imagen3" src="nal.jpg" onmouseOver="subir(3)" /> <img id="imagen4" src="amadrid.png" onmouseOver="subir(4)" /> <img id="imagen5" src="chelsea.jpg" onmouseOver="subir(5)" />
Esto es un ejemplo pero no hace lo de cambiar el background como lo veras, pero es una idea de como hacer una función para cuando estes encima (onMouseOver) y otra para cuando salgas (onmouseOut).
Aquí lo importante es
function subir(x)
{
var imagenes='imagen'+ x
.......
........
}
Como ves a la funcion le doy como parametro una variable ( llamada x )
Luego abajo digo que. Var imagenes = 'imagen' + x
Con lo que imagen es el Id de cada una + la x que es un número asignado a cada imagen.
el 1 para la 1 imagen, el 2 la segunda etc...
Abajo en el BODY ves :
Código HTML:
Ver originalonmouseOver="subir(1)" onmouseOut="vuelve(1)"
Aqui le paso a la function subir entre parentesis la imagen 1.
Y luego a la funcion vuelve el 1, y asi con el resto.. espero te ayude esto.
-------------------------------------
Te dejo un ejemplo aparte, aunque no es lo que quieres de como cambiar imagenes.
Código Javascript
:
Ver original<HTML>
<HEAD>
<TITLE>Cambia imagen cuando pasa el ratón</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function activar(Img) {
document.getElementsByName("messi2")[0].setAttribute("src", "messi.jpeg");
}
function desactivar() {
document.getElementsByName("messi2")[0].setAttribute("src", "messi2.jpeg");
}
</SCRIPT>
<style>
#titulo {
position: relative;
text-align: center;
}
</style>
</HEAD>
<BODY>
<h1 id="titulo"> En la imagen para que cambie</h1>
<A HREF="cambia.html" onMouseOver="activar();" onMouseOut="desactivar();">
<IMG NAME="messi2" SRC="messi2.jpeg" BORDER=0>
</A>
</BODY>
</HTML>