vincular archivo javascript

aparicio007 · #1 (**permalink**) 22/01/2012, 15:37

Hola, he insertado una galería de imágenes en javascript en mi html, perome gustaría tener el código en un archivo externo y vincularlo. Tengo que añadir algo o cambiarlo pero no sé que es, se muy poco de javascript, Muchas gracias.

aquí el código html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>

<script type="text/javascript" src="1.js"></script>


<style type="text/css">

  div.demoSW {
	margin: 0 auto;
	position: relative;
	text-align: center;
	width: 326px;
	background-color: #333;
  }
  div.demoSW img {
    background-color: #FFF;
    border: 3px solid #BBB;
    height: 190px;
    outline: 1px solid #FFF;
    padding: 10px;
    width: 300px;
  }
  div.demoSW span {
    color: #EEE;
    display: block;
    font-family: Georgia;
    font-size: 20px;
    letter-spacing: -1px;
    outline: 1px solid #444;
    padding: 5px 0;
  }
  div.demoSW div a {
    color: #AAA;
    font-family: Georgia;
    text-decoration: none;
  }
  div.demoSW div {
    margin:5px 0 0 0;
  }
  div.demoSW div a:hover {
    color:#FFF;
    text-decoration: none;
  }




</style>
</head>

<body>

<div class="demoSW"><img id="misfotos" src="Galería prueba/Fotos_africa/01.jpg" />
  <span id="mistextos"> la primera de las imagenes </span>
  <div>

    <a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>
  </div>
</div>

</body>
</html>

Y aquí el código javascript que me tengo en otro archivo:

Código:

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

var foto = new Array();
foto[0] = "Galería prueba/Fotos_africa/01.jpg";
foto[1] = "Galería prueba/Fotos_africa/02.jpg";
foto[2] = "Galería prueba/Fotos_africa/03.jpg";
foto[3] = "Galería prueba/Fotos_africa/04.jpg";
foto[4] = "Galería prueba/Fotos_africa/05.jpg";

var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";

var cantidad = foto.length;

var cualvemos = 0;

function mover(direccion) {

  // accedemos al objeto que contiene la imagen
  var laimagen = document.getElementById("misfotos");

  // accedemos al objeto que contiene el texto
  var eltexto = document.getElementById("mistextos");

  // ¿cuál es el indice de la última imágenes en nuestra array?
  var ultima = foto.length - 1; // en el ejemplo, será el 4
  
  // antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
  var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
  // si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
  if(auxiliar < 0) { auxiliar = ultima; }
  // si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
  if(auxiliar > ultima) { auxiliar = 0; }
  
  // listo, ahora ya podemos cambiar el dato sin problemas
  cualvemos = auxiliar;
  
  // ponemos la dirección URL de la imagen en la etiqueta IMG
  laimagen.src = foto[cualvemos];

  // ponemos el texto en la etiqueta SPAN
  eltexto.innerHTML = texto[cualvemos];

}

</script>

zerokilled · #2 (**permalink**) 22/01/2012, 15:51

buenas,
cuando separas javascript del html, el documento js solo debe tener código javascript... no puede tener html. fíjate en el último código tienes declarado los elemento <script></script>.

aparicio007 · #3 (**permalink**) 23/01/2012, 01:01

Pues muchas gracias, la verdad es que es una tontería lo de las etiquetas, pero estoy aprendiendo.:)