Pasar varias imagenes en una sola

samuvk · #1 (**permalink**) 16/02/2010, 15:15

Me gustaria poder tener una imagen, que fuera rotando y cada cierto tiempo (pongamos dos segundos) cambiara la imagen a una imagen nueva y dependiendo de la imagen que pinches se abriera una web relacionada con el tema.

Alguna ayudita de como hacerlo en HTML o JavaScript

Muchas Gracias

hector2c · #2 (**permalink**) 16/02/2010, 15:27

aqui va un ejemplillo, suerte !!!

Código PHP:

  <script language="javascript" type="text/javascript">

    var imagenes = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];

    var enlaces = ['www.google.com', 'www.upt.edu.pe', 'www.forosdelweb.com', 'www.youtube.com'];

    var cantidad = imagenes.length;

    var actual = 0;

    function fn_empezar(){

        alert(actual);

        if (actual==cantidad)

            actual = 0;

        var imagen = document.getElementById('imagen');

        var enlace = document.getElementById('enlace');

        imagen.src = imagenes[actual];

        enlace.href = enlaces[actual];

        actual = actual + 1;

        setTimeout('fn_empezar();', 2000);

    }

</script>

Código HTML:

<a id="enlace" href=""><img src="" id="imagen"></a>
<script language="javascript" type="text/javascript">
	fn_empezar();
</script>

samuvk · #3 (**permalink**) 16/02/2010, 15:59

Muchas Gracias, va genial.

Solo una cosa mas, como podria en este mismo codigo indicarla el

height="" y el width="" de la imagen que quiero mostrar.

Muchas Gracias de nuevo

hector2c · #4 (**permalink**) 16/02/2010, 16:03

mmmmm, imaginando que al suibr una imagen, la guardas en tu bd con altura y anchura en distintos campos, pues, podrias usar la misma lógica:

Código PHP:

  <script language="javascript" type="text/javascript">
    var imagenes = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
    var enlaces = ['www.google.com', 'www.upt.edu.pe', 'www.forosdelweb.com', 'www.youtube.com'];
    var ancho = [100, 200, 50, 300];
    var alto = [300, 400, 200, 150];
    var cantidad = imagenes.length;
    var actual = 0;
    function fn_empezar(){
        if (actual==cantidad)
            actual = 0;
        var imagen = document.getElementById('imagen');
        var enlace = document.getElementById('enlace');
        imagen.src = imagenes[actual];
        imagen.width = ancho[actual];
        imagen.height = alto[actual];
        enlace.href = enlaces[actual];
        actual = actual + 1;
        setTimeout('fn_empezar();', 2000);
    }
</script>

Código HTML:

<a id="enlace" href=""><img id="imagen"></a>
<script language="javascript" type="text/javascript">
	fn_empezar();
</script>

nus vemos n.n !!!

eapalacio · #5 (**permalink**) 12/12/2010, 10:34

Cita:

Iniciado por hector2c

mmmmm, imaginando que al suibr una imagen, la guardas en tu bd con altura y anchura en distintos campos, pues, podrias usar la misma lógica:

Código PHP:

  <script language="javascript" type="text/javascript">

    var imagenes = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];

    var enlaces = ['www.google.com', 'www.upt.edu.pe', 'www.forosdelweb.com', 'www.youtube.com'];

    var ancho = [100, 200, 50, 300];

    var alto = [300, 400, 200, 150];

    var cantidad = imagenes.length;

    var actual = 0;

    function fn_empezar(){

        if (actual==cantidad)

            actual = 0;

        var imagen = document.getelementbyid('imagen');

        var enlace = document.getelementbyid('enlace');

        imagen.src = imagenes[actual];

        imagen.width = ancho[actual];

        imagen.height = alto[actual];

        enlace.href = enlaces[actual];

        actual = actual + 1;

        settimeout('fn_empezar();', 2000);

    }

</script>

Código HTML:

<a id="enlace" href=""><img id="imagen"></a>
<script language="javascript" type="text/javascript">
	fn_empezar();
</script>

nus vemos n.n !!!

muchas gracias funciona muy bien... Pero soy principiante...
No entiendo muy bien como funciona lo del tamaño de la imagen... A que se refiere cada uno de los numerillos...

Ayuda por favor