Insertar imagenes en html, con java y xml

udok · #1 (**permalink**) 26/12/2013, 12:09

Tengo un xml sobre pokemons (tonterias del profe), para leerlo desde html le he puesto un script de java que encontre por internet (porque de xsl no entendi nada):

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css" >
<div align="center"><img src="pokemons.jpg" width="650px";heigth="100px";></div>
</head>
    <body align="center";>
    
            <script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","pokemons.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
 
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("pokemon");
for (i=0;i<x.length;i++)
  { 
 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("NOM")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("CLASSE")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("PUNTS_VIDA")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("ETAPA")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("ATACS")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("FEBLESA")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("FORTALESA")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("COST_RETIRADA")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("FOTO")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("nom")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("classe")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("punts_vida")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("etapa")[0].childNodes[0].nodeValue);
  document.write("</td><td>");  
  document.write(x[i].getElementsByTagName("atacs")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("feblesa")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("fortalesa")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("cost_retirada")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("foto")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");  
  }
document.write("</table>");
</script>
    </body>
 
</html>

He modificado lo que esta dentro del "for", las palabras en mayuscula son el titulo de la celda del dato, las palabras en minuscula son el dato.Todo esta en la misma carpeta.
1. Necesito saber como hacer que se vean las imagenes, pensaba que con escribir "nombre.extensión" en su correspondiente lugar del xml, el html las leeria atraves de java pero no funcionó. Entonces vi en algunas paginas que tiene que ver con xsl pero no lo entendi.
2. Quisiera hacer que se vea un pokemon(foto e info) a la ves y que al clicar un boton pase al siguiente o hacia atras, ya que el script me lo muestra todo en una tabla i sin fotos.

caricatos · #2 (**permalink**) 26/12/2013, 17:10

Hola:

Un xsl es un archivo asociado a los ficheros xml para poder mostrar su contenido en un navegador...

Sobre tu código, debes estudiar algo más de javascript y de html, porque para mostrar imágenes, simplemente debes tener una etiqueta img, y a simple vista solo muestras una tabla con sus celdas... si conoces la url de la imagen, basta con crear un tag img y poner esa url en su atributo src...

Saludos