Traer una foto en un div

[fedefrankk]

Buenas a todos tengo el siguiente codigo que me carga dentro de un div una pagina html... con un boton

Código HTML:

<script type="text/javascript">
    function ejec(pagina){
    
        
    var conexion; 
    if (window.XMLHttpRequest){
        conexion = new XMLHttpRequest();
    }else{
          conexion=new ActiveXObject("Microsoft.XMLHTTP")
    }
  conexion.onreadystatechange=function(){
      if(conexion.readyState==4 && conexion.status==200){
     document.getElementById("midiv").innerHTML=conexion.responseText;
  }
  }
    conexion.open("POST",pagina,true);
    conexion.send();
    }
</script>
 
<a href="#" onclick="ejec('01.html')">SOLO TEXTO</a>
 
 
 
<div class="texto_t1" id="midiv"></div>   --->> aca carga el archivo 01.html.. 
<div class="texto_2" id="midiv_1"></div>   --->> aca necesito una imagen
 

Si preciono el boton me trae al div "midiv" la pagina 01.html lo que no se como hacer ahora para que me traiga la pagina 01.html y una imagen que esta en una carpeta a otro div llamdo midiv_1 tocando el mismo boton..

Muchas gracias de antemano saludos a todos
fede

[emprear]

Hay que pensar un poco más !!!!
de la misma forma en que usauste "pagina" como variable, cambias de capa con una variable también

function ejec(pagina,capa){

y cuando hacés el innerHTML en lugar de poner el nombre de la capa pones la variable

luego en el evento onclick, llamás la función 2 veces,

Código Javascript:

onclik="ejec('nombre_archivo','nombre_capa'); ejec('nombre_archivo','nombre_capa');"
 

[fedefrankk]

Hola.!!! muchas gracias por contestar,
me sale mas o menos bien.. hice lo que dijiste.

Código Javascript:

function ejec(pagina,imgcapa){
.........
........    
     document.getElementById("midiv").innerHTML=conexion.responseText;
     document.getElementById("midiv_1").innerHTML=imgcapa;
 }
  }
    conexion.open("POST",pagina,imgcapa,true);
....
...
 

el boton:

Código HTML:

onclick="ejec('tratamientos/01.html','fede.jpg');ejec('tratamientos/alisado.html','fede.jpg')">boton1 </a></li>
 

los div

Código HTML:

<div class="centro_img" id="midiv_1"></div>
<div class="texto_t1" id="midiv"></div>
 

cuando preciono el boton, me trae al div "midiv", la pagina 01.html.. de 10. y en el segundo div "midiv_1", me trae la palabra fede.jpg...

hice lo siguiente:

Código HTML:

document.getElementById("midiv_1").innerHTML=<img src='/img/imgcapa'>;
 

pero no funciona..

gracias por tu tiempo,

saludos
fede

[emprear]

mi amigo, no te funciona porque estás haciendo cualquier cosa, si tus capas son
midiv y midiv_1, ¿se puede saber porque pasas como parámetro el nonbre de una imagen?

Yo te diría que antes de seguir te des una vuelta por
http://librosweb.es

[fedefrankk]

Hola, estoy leyendo los libros de ajax,

Mira al tocar el boton paso el nombre de la pagina que quiero que se cargue en el div "midiv", y en otro div quiero que se cargue una iamgen en el div "midiv_1", si yo le paso el nombre de la capa, como busco o encuentro la imagen para esa capa, por eso puse el nombre de la imagen..

en concreto al tocar el boton, traigo alisado.html, y quiero traer una imagen al segundo div..

espero que se entienda.. y enserio que estoy leyendo el libro, es puro javascript al principio, y queria hacer este codigo asi voy aprendiendo.

se agradece mucho la informacion que ustedes dan enserio que muy bueno,

aca esta mi primer proyecto, fijate en tratamientos y te daras cuenta lo que estoy buscando..

http://www.quodigital.com/carina/_WEB/index1.html

Se agradece mucho tu tiempo, siempre lo digo, gracias.
saludos
fede

[emprear]

A ver...
te lo explico pero a partir de ahora, los manuales por favor

archivo a.html contiene el texto "hola"
archivo b.html contiene el texto fede.jpg

tenés capa a y capa b y queres caragar a.html en capa a y b.html en capa b


onclick="ejec('a.html','a');ejec('b.html','b')">bo ton1 </a></li>


Es decir, nombre de archivo y nombre de capa, ambos encerrados entre comillas
Eso va a provocar en que tus divs a parezcan los textos
hola y fede.jpg respectivamente, por que? porque Ajax solo envía texto en su respuesta, si queres cargar una imagen, tu archivo b.html debería contener
<img src="fede.jpg" width="200" height="200"/>, el navegador procesará ese texto y ejecutará el html resultando la imagen visible
Se entiende.

Saludos

[fedefrankk]

Hola.. no hay caso, lo hice como me dijiste..

en la funcion ó en la conexion esta el error supongo..

aca dejo codigo alomejor es una tontera...

Código Javascript:

<script type="text/javascript">
    function ejec(pagina,capa){
    
 
    var capa;
    var conexion; 
    if (window.XMLHttpRequest){
        conexion = new XMLHttpRequest();
    }else{
          conexion=new ActiveXObject("Microsoft.XMLHTTP")
    }
  conexion.onreadystatechange=function(){
      if(conexion.readyState==4 && conexion.status==200){
     document.getElementById("a").innerHTML=conexion.responseText;
     document.getElementById("b").innerHTML=capa;
 
 }
  }
    conexion.open("POST",pagina,capa,true);
    conexion.send(); //
    }
</script>
</head>
 
<body>
 
<li><a href="#" onclick="ejec('tratamientos/alisado.html','a');ejec('tratamientos/01.html','b')">ALIZADO DEFINITIVO</a></li>
 
 
<div class="centro_img" id="b"></div>
<div class="texto_t1" id="a"></div>
 

y en mi archivo 01.html

Código HTML:

<img src="fede.jpg" width="181" height="448" />
 

Saludos y muchas gracias.!!!

Fede

[emprear]

Si eso está mal decididamente

uno pasa parámetros a la función para hacerlo más dinámico

todo esto está mal ya que desvirtuás el uso de un parámetro

document.getElementById("a").innerHTML=conexion.re sponseText; document.getElementById("b").innerHTML=capa;

, 'a' y 'b' ya no deben ser 'a' y 'b', ya que esos valores se pasan a la función, ahora serán la variable capa

después has puesto esto
var capa;
con lo que redefinís é indefinis la variable
fianlmente, para este tipo de carga usá GET y no POST

Código HTML:

<!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>
 
<script type="text/javascript">
//<![CDATA[
    function ejec(pagina,capa){
 
    var conexion; 
    if (window.XMLHttpRequest){
        conexion = new XMLHttpRequest();
    }else{
          conexion=new ActiveXObject("Microsoft.XMLHTTP")
    }
  conexion.onreadystatechange=function(){
      if(conexion.readyState==4 && conexion.status==200){
     document.getElementById(capa).innerHTML=conexion.responseText; 
 
 }
  }
    conexion.open("GET",pagina,capa,true);
    conexion.send(); //
    }
//]]>
</script>
<title></title>
</head>
<body>
<ul>
<li><a href="#" onclick="ejec('alisado.html','a');ejec('01.html','b')">ALIZADO DEFINITIVO</a></li>
</ul>
<div class="centro_img" id="b"></div>
<div class="texto_t1" id="a"></div>
</body>
</html>
 

la función se llama 2 veces, aunque esté en el mismo evento, pero de forma independiente, por lo que solo hace falta

document.getElementById(capa).innerHTML=conexion.r esponseText;

una sola vez y no dos.
De esta forma podés reusar la función en mucho links de la página, sin tocar la script y solo modificando los valores en el onclick

SAludos

[fedefrankk]

Hola.!!
Se agradece mucho la informacion,

http://www.quodigital.com/carina/_WEB/index1.html

me voy a poner a leer, es mas la anciedad que todo..

enserio se agradece mucho, no quiero molestrate mas.

muchos saludos
fede