Enviar formulario desde Iframe a pagina padre

Saray13 · #1 (**permalink**) 05/03/2011, 18:45

Hola, estoy haciendo una página y quería cambiar la imagen de fondo al pulsar sobre varias opciones y a la vez redimensionar la imagen como hace actualmente google, eso lo conseguí sin problema con este codigo:

Código HTML:

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib.js" type="text/javascript" charset="utf-8"></script>





<!-- FONDOS -->

<div id="fondos">


<input name="bg" type="image" value='fondo.jpg' src="images/fondos/fondo.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo1.jpg' src="images/fondos/fondo1.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo2.jpg' src="images/fondos/fondo2.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo3.jpg' src="images/fondos/fondo3.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo4.jpg' src="images/fondos/fondo4.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo5.jpg' src="images/fondos/fondo5.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo6.jpg' src="images/fondos/fondo6.jpg" width="40px" height="40px"/>

</div>


<!-- SCRIPT QUE CAMBIA EL FONDO SEGÚN SE SELECCIONA EN EL MENÚ -->


<script>
imgFldr = 'images/fondos/';
$("input[type='image']").click(function() {
   $('#'+this.name).attr('src', imgFldr+this.value).attr('alt', 'newattribute');
});
</script>

<!-- FIN DIV CAMBIAR IMAGEN FONDO -->




<!-- DIV DONDE UBICAR IMAGEN FONDO QUE SE REDIMENSIONA -->

<div id="body-background"><img src="images/fondos/fondo.jpg" alt="Bg"img id="bg"></div>

<!-- FIN DIV DONDE UBICAR IMAGEN FONDO -->

Vale, esto me funciona, sin problemas, pero ahora lo que quiero es que ese menú de imágenes para cambiar el fondo de la pantalla padre colocarlo en un Iframe, hago el iframe y meto la función pero no se como enviar la función para que sea la pagina padre la que reciba la función de cambio de fondo ya que me lo realiza en el propio iframe, el código de la pagina padre es el mismo añadiendo el iframe y quitando el menú de los fondos:

Le añado el Iframe:

Código HTML:

<div id="abrirmenufondos">


<a href="menufondo.html?keepThis=true&TB_iframe=true&height=600&width=800" title="add a caption to title attribute / or leave blank" class="thickbox">Menu Fondos</a>  
</div>

Y luego el código del iframe llamada menufondos.html:

Código HTML:

<body>


<div id="fondos">


<input name="bg" type="image" value='fondo.jpg' src="images/fondos/fondo.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo1.jpg' src="images/fondos/fondo1.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo2.jpg' src="images/fondos/fondo2.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo3.jpg' src="images/fondos/fondo3.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo4.jpg' src="images/fondos/fondo4.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo5.jpg' src="images/fondos/fondo5.jpg" width="40px" height="40px"/>
<input name="bg" type="image" value='fondo6.jpg' src="images/fondos/fondo6.jpg" width="40px" height="40px"/>



</div>





<script>


imgFldr = 'images/fondos/';
$("input[type='image']").click(function() {
   $('#'+this.name).attr('src', imgFldr+this.value).attr('alt', 'newattribute');
});


</script>


</body>
</html>

Muchas gracias!!