Foros del Web » Programando para Internet » Javascript »

Añadir enlace JS en HTML

 Estas en el tema de Añadir enlace JS en HTML en el foro de Javascript en Foros del Web. Hola. Necesito saber como añadir un hipervínculo (enlace, link) de un código javascript y aplicarlo a un HTML. Es decir, yo tengo el siguiente código: ...
  #1 (permalink)  
Antiguo 03/09/2013, 18:37
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 4 meses
Puntos: 145
Exclamación Añadir enlace JS en HTML
Hola.

Necesito saber como añadir un hipervínculo (enlace, link) de un código javascript y aplicarlo a un HTML.
Es decir, yo tengo el siguiente código:

[Extracto del código completo]
Código: 
<head>
<script language="JavaScript">
var foto = new Array();
foto[0] = "Imagenes/Azul1.jpg";
foto[1] = "Imagenes/Blanco2.jpg";
</script>
</head>
[Extracto del código completo]
Código: 
<body>
<a href="http://www.google.es/"><img id="misfotos" src="Imagenes/Azul1.jpg" /></a>
</body>
El asunto es que, como podéis deducir, es una galería de imágenes.
Lo que yo necesito es que al hacer click en la foto 1 (Azul1.jpg) me abra, por ejemplo, Google. Y al hacer click en la segunda foto (Blanco2.jpg) me abra YouTube.

¿Cómo le asigno un enlace a cada foto?
Porque, si veis el segundo código, yo he asignado un HREF a la primera foto, pero si paso a la segunda, el enlace es el mismo, pues tiene aplicado el ID que contiene el código para pasar una imagen a otra.
Necesitaría saber el código que hay que agregar en JS y el valor en HTML.

Gracias de antebrazo.
  #2 (permalink)  
Antiguo 04/09/2013, 01:11
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 4 meses
Puntos: 29
Respuesta: Añadir enlace JS en HTML
Podría ser algo así:
Código Javascript: 
Ver original
  1. var fotos = [["ruta/foto1.jpg","ref1"],["ruta/foto2.jpg","ref2"]];
  2.  
  3. function fotos(string) {
  4.  
  5.    for (var i = 0; i < fotos.length; i++) {
  6.          document.write("<a href='" + fotos[i][1] + "'><img id='misfotos' src='" + fotos[i][0] + "' /></a>");
  7.          document.write('<br>');
  8.    };
  9. }

Esta línea:
<a href="http://www.google.es/"><img id="misfotos" src="Imagenes/Azul1.jpg" /></a>
Por:
<script language="JavaScript">fotos();</script>
Última edición por bathorz; 04/09/2013 a las 01:50 Razón: un error en el código
  #3 (permalink)  
Antiguo 04/09/2013, 08:28
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 4 meses
Puntos: 145
Respuesta: Añadir enlace JS en HTML
Lo he hecho de la siguiente manera:

Código: 
<script language="JavaScript">
var fotos = [["ruta/Imagenes/Azul1.jpg","http://www.google.es/"],["ruta/Imagenes/Blanco2.jpg","http://www.youtube.com/"]];
 
function fotos(string) {
 
   for (var i = 0; i < fotos.length; i++) {
         document.write("<a href='" + fotos[i][1] + "'><img id='misfotos' src='" + fotos[i][0] + "' /></a>");
         document.write('<br>');
   };
}

</script>
Código: 
<script language="JavaScript">fotos();</script>
Pero no me funciona. ¿Qué falla?
Y no entiendo porque en el body está ese script, ni porque llamar a las imágenes dos veces... Soy un novato bastante confuso.

p.d.: También he probado sin el ruta/, pero aún así no lo entiendo.
  #4 (permalink)  
Antiguo 04/09/2013, 14:38
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 4 meses
Puntos: 29
Respuesta: Añadir enlace JS en HTML
/ruta era una carpeta que estaba en lugar de /Imagenes.
No llama a las imágenes 2 veces. La función imprime tantas etiquetas <a> como registros haya en el array. Lee sobre funciones y bucles.
Código HTML: 
Ver original
  1. <html>
  2.    <head>
  3.       <script language="JavaScript">
  4.          var fotos = new Array();
  5.          fotos = [["Imagenes/Azul1.jpg", "http://www.google.es/"], ["Imagenes/Blanco2.jpg", "http://www.youtube.com/"]];
  6.  
  7.          function fotos(string) {
  8.             for (var i = 0; i < fotos.length; i++) {
  9.                document.write("<a href='" + fotos[i][1] + "'><img id='misfotos' src='" + fotos[i][0] + "' /></a>");
  10.                document.write("<br>");
  11.             };
  12.          }
  13.       </script>
  14.    </head>
  15.    <body>
  16.       <script language="JavaScript">
  17.          fotos();
  18.       </script>
  19.    </body>
  20. </html>
  #5 (permalink)  
Antiguo 05/09/2013, 07:14
 
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>
  #6 (permalink)  
Antiguo 05/09/2013, 08:08
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 4 meses
Puntos: 145
Respuesta: Añadir enlace JS en HTML
Genial, funciona bien. Solo tengo una duda.
Si yo tengo varias galerías como esa, en las que hay diferentes fotos, ¿cómo puedo desvincular el botón anterior/siguiente de la Galería 1 con los botones de la Galería 2?
  #7 (permalink)  
Antiguo 05/09/2013, 09:45
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 4 meses
Puntos: 29
Respuesta: Añadir enlace JS en HTML
Código HTML: 
Ver original
  1. <html>
  2.    <head>
  3.       <script language="JavaScript">
  4.          var foto = new Array();
  5.          foto = [["Imagenes/1.jpg", "http://www.uno.es/"], ["Imagenes/2.jpg", "http://www.dos.com/"], ["Imagenes/3.jpg", "http://www.tres.com/"], ["Imagenes/4.jpg", "http://www.cuatro.com/"], ["Imagenes/5.jpg", "http://www.cinco.com/"], ["Imagenes/6.jpg", "http://www.seis.com/"]];
  6.          var texto = new Array();
  7.          texto[0] = "la primera de las imagenes";
  8.          texto[1] = "esta es la segunda";
  9.          texto[2] = "esta es al tercera";
  10.          texto[3] = "y casi vamos a terminar";
  11.          texto[4] = "una más";
  12.          texto[5] = "la ultima de las imagenes";
  13.          var cantidad = foto.length;
  14.          var cualvemos = 0;
  15.  
  16.          function mover(direccion, valor) {
  17.             switch (valor) {
  18.                /** Galería 1 **/
  19.                case 1:
  20.                   var enlace = document.getElementById("misHref");
  21.                   var laimagen = document.getElementById("misfotos");
  22.                   var eltexto = document.getElementById("mistextos");
  23.                   var ultima = foto.length - 1;
  24.                   var auxiliar = cualvemos + (direccion);
  25.                   if (auxiliar < 0) {
  26.                      auxiliar = ultima;
  27.                   }
  28.                   if (auxiliar > ultima) {
  29.                      auxiliar = 0;
  30.                   }
  31.                   cualvemos = auxiliar;
  32.                   laimagen.src = foto[cualvemos][0];
  33.                   eltexto.innerHTML = texto[cualvemos];
  34.                   enlace.href = foto[cualvemos][1];
  35.                   break;
  36.                /** Galería 1 **/
  37.                case 2:
  38.                   var enlace = document.getElementById("misHref2");
  39.                   var laimagen = document.getElementById("misfotos2");
  40.                   var eltexto = document.getElementById("mistextos2");
  41.                   var ultima = foto.length - 1;
  42.                   var auxiliar = cualvemos + (direccion);
  43.                   if (auxiliar < 0) {
  44.                      auxiliar = ultima;
  45.                   }
  46.                   if (auxiliar > ultima) {
  47.                      auxiliar = 0;
  48.                   }
  49.                   cualvemos = auxiliar;
  50.                   laimagen.src = foto[cualvemos][0];
  51.                   eltexto.innerHTML = texto[cualvemos];
  52.                   enlace.href = foto[cualvemos][1];
  53.                   break;
  54.             }
  55.          }
  56.       </script>
  57.       <meta charset="UTF-8">
  58.       <title>Destacados</title>
  59.    </head>
  60.  
  61.    <body onLoad="mover;">
  62.       <table width="100%">
  63.          <tr>
  64.             <td height="279" align="center" valign="middle">
  65.             <table width="100%" align="center">
  66.                <tr>
  67.                   <!-- Galería 1 -->
  68.                   <td width="50%" height="256" align="center" valign="middle">
  69.                   <p>
  70.                      <a id="misHref" href="http://www.uno.com/"><img id="misfotos" src="Imagenes/1.jpg" /></a>
  71.                   </p>
  72.                   <p>
  73.                      <span id="mistextos"><a href="http://www.google.es/">¡Uno</a></span>
  74.                   </p>
  75.                   <p>
  76.                      <a href="javascript:mover(-1,1);"><img src="Imagenes/anterior.png"></img></a>
  77.                      <a href="javascript:mover(1,1);"><img src="Imagenes/siguiente.png"</img></a>
  78.                   </p></td>
  79.                   <!-- Galería 2-->
  80.                   <td width="50%" height="256" align="center" valign="middle">
  81.                   <p>
  82.                      <a id="misHref2" href="http://www.uno.com/"><img id="misfotos2" src="Imagenes/1.jpg" /></a>
  83.                   </p>
  84.                   <p>
  85.                      <span id="mistextos2"><a href="http://www.google.es/">¡Dos</a></span>
  86.                   </p>
  87.                   <p>
  88.                      <a href="javascript:mover(-1,2);"><img src="Imagenes/anterior.png"></img></a>
  89.                      <a href="javascript:mover(1,2);"><img src="Imagenes/siguiente.png"</img></a>
  90.                   </p></td>
  91.                </tr>
  92.             </table></td>
  93.          </tr>
  94.       </table>
  95.    </body>
  96. </html>

Etiquetas: enlace, html, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:46.