Ce sujet fait suite au post http://forum.alsacreations.com/topic-4-18694-1-Div-en-position-absolue-audessus-dun-flash-en-iframe.html
J'ai donc finalement poursuivis mes recherches, et apres avoir découvert que les navigateurs avaient un probleme lors de la superposition d'un element (div, table, frame ou autre) au dessus d'un element conteneur d'une page externe (frame ou iframe) contenant une animation flash, le défilement de la page s'en trouvait ralenti (mais pas le chargement ni l'animation).
J'ai un peu fouiné dans les différentes alternatives, et après avoir abandonné le pseudo-framing, j'ai trouvé la technique de l'encapsulation avec Object pour remplacer les frames. J'ai donc maintenant un document plus aux normes (et sans ces affreuses frames), mais d'autres problemes sont survenus:
Cas n°1: Superposition div sur object: sous Firefox ca rame toujours, mais sous IE plus aucun probleme ! Mais la div disparait...
Voici le code:
Note: J'ai enlevé tout ce qui n'etait pas necessaire au bon déroulement de l'application, comme le javascript.
Cas n°2: La meme page sauf qu'au lieu d'un div contenant mon flash j'ai mon flash tout seul superposé a l'object. Le probleme est que je n'arrive pas a permettre des actions sur le flash (j'aimerai pouvoir le déplacer dans la page par drag & drop mais ca ne detecte pas le mousedown ou mouseup...)
Cas n°3: Je superpose un object contenant mon jukebox sur un autre object contenant le forum. Mais la je ne comprend pas du tout, cas il n'y a qu'un seul object qui s'affiche, celui qui est le plus en haut dans le code...
Voici le script:
Note: Les codes ont étés modifiés de sorte que vous puissiez faire des tests en local.
Voila, si les guru du CSS pouvaient me mettre sur la voie je vous en serai infiniment gré
En tout cas merci aux courageux qui auront tout lu
Modifié par GBO (11 Oct 2006 - 19:28)
J'ai donc finalement poursuivis mes recherches, et apres avoir découvert que les navigateurs avaient un probleme lors de la superposition d'un element (div, table, frame ou autre) au dessus d'un element conteneur d'une page externe (frame ou iframe) contenant une animation flash, le défilement de la page s'en trouvait ralenti (mais pas le chargement ni l'animation).
J'ai un peu fouiné dans les différentes alternatives, et après avoir abandonné le pseudo-framing, j'ai trouvé la technique de l'encapsulation avec Object pour remplacer les frames. J'ai donc maintenant un document plus aux normes (et sans ces affreuses frames), mais d'autres problemes sont survenus:
Cas n°1: Superposition div sur object: sous Firefox ca rame toujours, mais sous IE plus aucun probleme ! Mais la div disparait...
Voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test de superposition Div/Object</title>
<style type="text/css">
<!--
html {
margin: 0;
padding: 0;
height:100%;
}
body {
margin: 0 auto;
padding: 0;
overflow: hidden;
color:#666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
a {
color: #0099FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-decoration:none;
position: relative;
z-index: 1;
}
a:hover,label:hover {
color:#0066FF;
background-color: #D5E6FF;
}
#divZSJukeBox {
position:absolute;
border:#000000 1px solid;
background:#FBFBFB;
width:235px;
height:120px;
overflow:hidden;
text-align:center;
display:block;
top : 1px;
right: 20px;
white-space:nowrap;
cursor:move;
background-color: transparent;
z-index: 2;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='jukebox/images/transp_bg.png');
background-image: url(jukebox/images/transp_bg.png);
}
#divZSJukeBoxContent {
background: url(jukebox/images/zsjukeboxheader.jpg) no-repeat scroll 0%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;
height: 30px;
cursor:move;
}
#realforum {
width:100%;
height:100%;
}
-->
</style>
</head>
<body>
<div id="divZSJukeBox" onmousedown="MouseButtonTest()" onmouseup="MouseButtonTest2()">
<div id="divZSJukeBoxContent"><span style="float: right; cursor: pointer;" onclick="hide();"><img src="jukebox/images/zsclose.jpg" height="30" width="30" alt="Fermer le jukebox (rafraichissez la page pour le faire reapparaitre)" title="Fermer le jukebox (rafraichissez la page pour le faire reapparaitre)"></span></div>
<br>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" class="ZoneSensibleJukebox" width="235" height="59"><param name="movie" value="jukebox/player/zsmusicplayer.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">
<param name="allowscriptaccess" value="never">
<!--[if !IE]> <-->
<object data="jukebox/player/zsmusicplayer.swf" class="ZoneSensibleJukebox" width="235" height="59" type="application/x-shockwave-flash"><param name="quality" value="high">
<param name="bgcolor" value="#000000">
<param name="allowscriptaccess" value="never">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
Cette fonction nécessite Flash pour pouvoir marcher correctement. Veuillez installer un navigateur à jour.</object>
<!--> <![endif]-->
</object>
</div>
<object id="realforum" data="http://www.energysolar.com/forumtest/index.php" type="text/html" />
</body>
</html>Note: J'ai enlevé tout ce qui n'etait pas necessaire au bon déroulement de l'application, comme le javascript.
Cas n°2: La meme page sauf qu'au lieu d'un div contenant mon flash j'ai mon flash tout seul superposé a l'object. Le probleme est que je n'arrive pas a permettre des actions sur le flash (j'aimerai pouvoir le déplacer dans la page par drag & drop mais ca ne detecte pas le mousedown ou mouseup...)
Cas n°3: Je superpose un object contenant mon jukebox sur un autre object contenant le forum. Mais la je ne comprend pas du tout, cas il n'y a qu'un seul object qui s'affiche, celui qui est le plus en haut dans le code...
Voici le script:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test de superposition de 2 Object</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html {
margin: 0;
padding: 0;
height:100%;
}
body {
margin: 0 auto;
padding: 0;
overflow: hidden;
color:#666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
a {
color: #0099FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-decoration:none;
position: relative;
z-index: 1;
}
a:hover,label:hover {
color:#0066FF;
background-color: #D5E6FF;
}
#divjuke {
position:absolute;
border:#000000 1px solid;
background:#FBFBFB;
width:235px;
height:120px;
overflow:hidden;
text-align:center;
display:block;
top : 1px;
left: 20px;
white-space:nowrap;
cursor:move;
z-index: 2;
clear:both;
}
#realforum {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
clear:both;
}
-->
</style>
</head>
<body>
<object id="divjuke" data="http://www.energysolar.com/forumtest/divjuke.html" type="text/html" />
<object id="realforum" data="http://www.energysolar.com/forumtest/index.php" type="text/html" />
</body>
</html>Note: Les codes ont étés modifiés de sorte que vous puissiez faire des tests en local.
Voila, si les guru du CSS pouvaient me mettre sur la voie je vous en serai infiniment gré
En tout cas merci aux courageux qui auront tout lu
Modifié par GBO (11 Oct 2006 - 19:28)