Tema: Añadir enlace JS en HTML
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 05/09/2013, 07:14
bathorz
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 4 meses
Puntos: 29
Respuesta: Añadir enlace JS en HTML
Funcionamiento
Código txt: 
Ver original
  1. a) De arranque

  2. ------------

  3.  [ foto 1 ]  <-- enlace www.dos.es

  4.   [ ¡Uno ]   <-- enlace www.google.es

  5. [<<]    [>>]

  6. ------------

  7.  
  8. b) Al primer cambio

  9. ------------

  10.  [ foto 2 ]  <-- enlace www.dos.es

  11.  [ texto2 ]  <-- sin enlace

  12. [<<]    [>>]

  13. ------------

Código HTML: 
Ver original
  1. <html>
  2.    <head>
  3.       <script language="JavaScript">
  4.       
  5.          var foto = new Array();
  6.          /** 1. modificado: array bidimencional **/
  7.          foto = [
  8.             ["Imagenes/Azul1.jpg", "http://www.uno.es/"],
  9.             ["Imagenes/Blanco2.jpg", "http://www.dos.com/"],
  10.             ["Imagenes/Deg3.jpg", "http://www.tres.com/"],
  11.             ["Imagenes/Negro4.jpg", "http://www.cuatro.com/"],
  12.             ["Imagenes/Rojo5.jpg", "http://www.cinco.com/"],
  13.             ["Imagenes/Verde6.jpg", "http://www.seis.com/"]];
  14.           
  15.          var texto = new Array();
  16.          texto[0] = "la primera de las imagenes";
  17.          texto[1] = "esta es la segunda";
  18.          texto[2] = "esta es al tercera";
  19.          texto[3] = "y casi vamos a terminar";
  20.          texto[4] = "una más";
  21.          texto[5] = "la ultima de las imagenes";
  22.  
  23.          var cantidad = foto.length;
  24.          var cualvemos = 0;
  25.  
  26.          function mover(direccion) {
  27.          
  28.             /** 2. enlace **/
  29.             var enlace = document.getElementById("misHref");
  30.  
  31.             var laimagen = document.getElementById("misfotos");
  32.             var eltexto = document.getElementById("mistextos");
  33.             var ultima = foto.length - 1;
  34.             var auxiliar = cualvemos + (direccion);
  35.             if (auxiliar < 0) {
  36.                auxiliar = ultima;
  37.             }
  38.             if (auxiliar > ultima) {
  39.                auxiliar = 0;
  40.             }
  41.             cualvemos = auxiliar;
  42.  
  43.             /** 3. cambio por array bidimencional **/
  44.             laimagen.src = foto[cualvemos][0];
  45.  
  46.             eltexto.innerHTML = texto[cualvemos];
  47.             
  48.             /** 4. enlace foto **/
  49.             enlace.href = foto[cualvemos][1];
  50.          }
  51.  
  52.       </script>
  53.       <meta charset="UTF-8">
  54.       <title>Destacados</title>
  55.    </head>
  56.  
  57.    <body onLoad="mover;">
  58.       <table width="100%">
  59.          <tr>
  60.             <td height="279" align="center" valign="middle">
  61.                <table width="100%" align="center">
  62.                   <tr>
  63.                      <td width="17%" height="256" align="center" valign="middle">
  64.                         <p>
  65.                            <a id="misHref" href="http://www.uno.com/"><img id="misfotos" src="Imagenes/1.jpg" /></a>
  66.                         </p>
  67.                         <p>
  68.                            <span id="mistextos"><a href="http://www.google.es/">¡Uno</a></span>
  69.                         </p>
  70.                         <p>
  71.                            <a href="javascript:mover(-1);"><img src="Imagenes/anterior.png"></img></a>
  72.                            <a href="javascript:mover(1);"><img src="Imagenes/siguiente.png"</img></a>
  73.                         </p></td>
  74.                     <!-- 
  75.                     <td width="83%" align="center" valign="middle"></td>
  76.                     -->
  77.                   </tr>
  78.                </table></td>
  79.          </tr>
  80.       </table>
  81.    </body>
  82. </html>