Pasar varias imagenes en una sola

[samuvk]

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]

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]

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]

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]

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