En este sencillo ejemplo mostraré como sustituir un archivo SWF de una página HTML por otro sin necesidad de refrescar la página. (ejemplo)
Para ello utilizaremos SwfObject y JQuery. En realidad JQuery no haria falta utilizarlo ya que quien sustituirá el SWF será SwfObject y podriamos hacer la llamada con una simple funcion Javascript. Pero nunca está de más ver un poco de Ajax
Para empezar nos descargaremos las librerias:
.
Lo primero será colocar nuestra pelicula SWF dentro de la página HTML con SwfObject de la forma típica. Creando una DIV y asignandole ahí la pelicula SWF. Lo haremos creando una función que reciba el parámetro de la URL del SWF para poder volver a llamar esa función más adelante:
<script src=
"swfobject.js" type=
"text/javascript"></script> <script
type=
"text/javascript">
// <![CDATA[
function putSWF
(swf
){
swfobject.
embedSWF(swf,
"flash",
"320",
"240",
"10.0.0",
"expressInstall.swf");
};
putSWF
("a.swf");
// ]]></script>
Ahora crearemos unos cuantos links con los que queremos cambiar de pelicula SWF pero sin cambiar de página HTML. Los colocaremos en otro DIV y asignaremos a cada enlace un ID diferente:
<div id=
"botonera">
<a id="a" href="#">a.swf</a>
- <a id="b" href="#">b.swf</a>
- <a id="c" href="#">c.swf</a></div>
Podríamos hacer que cada enlace volviera a ejecutar la función Javascript y listo, pero haremos el ejemplo más c00l utilizando JQuery.
Primero definiremos un objeto en el que guardaremos una relación entre los ID de los enlaces y la pelicula SWF que han de abrir.
var swfRef = {
a: "a.swf",
b: "b.swf",
c: "c.swf"
};
Y por último crearemos una función de JQuery que asignará a cada enlace la llamada a la función Javascript pasandole el parámetro que toca. Tambien sustituiremos la primera llamada.
$(function(){
$.each(swfRef, function(i, val){
$("#" + i).click(function(){
putSWF(val);
});
});
$("#a").click();
});
Y listo, ahora cada enlace sustituye el SWF por otro dentro de la misma página.
Aqui se puede ver el ejemplo: http://www.cristalab.com/zguillez/ajax/putswf/index.html
Y el código completo:
<html>
<head>
<script
type=
"text/javascript" src=
"swfobject.js"></script>
<script src=
"lib/jquery/jquery-1.3.2.js"></script>
<script>
function putSWF
(swf
){
swfobject.
embedSWF(swf,
"flash",
"320",
"240",
"10.0.0",
"expressInstall.swf");
};
var swfRef =
{
a:
"a.swf",
b:
"b.swf",
c:
"c.swf"
};
$
(function(){
$.
each(swfRef,
function(i, val
){
$
("#" + i
).
click(function(){
putSWF
(val
);
});
});
$
("#a").
click();
});
</script>
</head>
<body>
<div id=
"botonera">
<p>
<a id=
"a" href=
"#">a.
swf</a>
- <a id=
"b" href=
"#">b.
swf</a>
- <a id=
"c" href=
"#">c.
swf</a>
</p>
</div>
<div id=
"flash"></div>
</body>
</html>
Tags:
jquery,
swfobject 
