Utilizaremos un cierto código javascript dentro del fichero externo popupWindow.js para cargar la imágen en una capa manejando su visibilidad. De por si esto no tiene nada que ver con la transición, sino sólo con el lanzamiento del popup que contendrá la imágen:
var popUp = document.getElementById("popupWindow");
var baseText = null;
function showPopup(w,h)
{
var popUp = document.getElementById("popupWindow");
popUp.style.top = "0px";
popUp.style.left = "40px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Cerrar ventana</button></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) + "px";
popUp.style.display = "block";
}
function hidePopup()
{
var popUp = document.getElementById("popupWindow");
popUp.style.display = "none";
}
La imágen que sufrirá la transformación estará en un contenedor al que se aplica la regla de estilo que producirá la transición a la imágen final::
<div id="popupWindow">
<img id="ImageGradientwipe" src="images/vela.gif" style="filter:progid:DXImageTransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward,WipeStyle=1)" />
</div>
Y en la hoja de estilo asociada se le asigna una regla al contenedor de la imágen en la que display: none:
#popupWindow
{
position: relative;display: none;overflow: hidden;border:1px solid #CCC;background-color:#F9F9F9;border:1px solid #333; padding:6px;
}
El código javascript (área head de la página)que manejará la transición será el siguiente:
<script language="Javascript">
function startTransition()
{
ImageGradientwipe.filters.item(0).Apply();
ImageGradientwipe.src="images/chaplin.gif";
ImageGradientwipe.filters.item(0).Play();
}
Dónde ImageGradientwipe es el id de lá imágen a la que se aplicará la transición.
Finalmente, el código Html / Javascript para abrir el popup con la transición y cerrarlo es el siguiente:
<a href="javascript:void(null)" onClick="showPopup(78,205);startTransition()"> Abrir popup</a>
| <a href="javascript:void(null)" onClick="hidePopup('popupWindow');" > Cerrar popup</a>
Dónde utilizaremos la sencilla función Javascript hidePopup para cerrar el layer cuando lo deseemos:
function hidePopup()
{
var popUp = document.getElementById("popupWindow");
popUp.style.display = "none";
}
|