28173 sujets

CSS et mise en forme, CSS3

Div en position absolue au-dessus d'un flash en iframe

Bonjour.
Je suis tombé sur votre excellent site a plusieurs reprises lors de mes nombreuses recherches concernant le webdesigning et il m'apparait que c'est le lieu le plus approprié pour ma requete.

Description de mon probleme: Je suis en charge de la creation d'un forum basé sur une technologie libre (j'ai biensur choisi phpBB) pour un groupe de musique. J'ai donc créé une bannière Flash animé puisque c'est à la mode...
J'ai aussi pris des mesures (et compte en mettre d'autres) pour ceux n'ayant biensur pas le plugin.

Maintenant je souhaite ajouter un jukebox s'affichant au-dessus du forum, mais pas dans une popup, et qui ne se recharge pas à chaque fois que l'on clique sur un lien.
J'ai tenté ma chance en mettant le forum dans une iframe, et le jukebox dans un div en position absolute (je vais une nouvelle fois prendre des mesures pour ceux ne supportant pas les frames).

Tout se passe bien, les animations se chargent bien et le jukebox fonctionne nickel, mais le défilement est incroyablement lent, que ce soit sur Firefox 1.5 ou IE 6. Apparement le probleme vient du fait que les navigateurs supportent mal les objets superposés sur du Flash (lorsque le div est a l'extérieur ca marche, et si je remplace le div par une autre iframe ca fait le meme probleme, sauf si elle est n'est pas superposée; et si je ne met pas d'animation flash cela fonctionne également).

J'ai jeté un coup d'oeil au tutoriel sur les pseudo-frame (magnifique soit-dit en passant) mais déjà je ne suis pas du tout sur que cela résolve mon problème, et de plus je ne pense pas que cette technologie soit possible dans mon cas car il faudrait refondre tout le système de liens de phpBB...

Voila donc avez-vous déjà eu ouïe d'une solution pour ce genre de problème ?
Si vous voulez voir le code directement: http://www.energysolar.com/forumtest/

Merci beaucoup si vous avez eu le courange de tout lire, toute aide serait vraiment la bienvenue, je suis désespéré de ne trouver aucune solution Smiley decu

/EDIT: Voici le code pour que vous ayez un apercu direct:

<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 1 June 2005), see  www.w3.org">
 
<title>Page de test du Jukebox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="[#blue][b]EDIT par Felipe:[/b] non[/#]">
<meta name="revisit-after" content="7 Days">
<meta name="robots" content="INDEX,FOLLOW">
<link rel="icon" href="templates/ZoneSensible/images/favicon.png">
<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:#BEDEF1 1px dotted; 
        background:#FBFBFB;
        width:280px;
        height:150px;
        overflow:hidden;
        text-align:center;
        display:block;
        top : 1px;
        right: 20px;
        white-space:nowrap;
        background-color: transparent;
        z-index: 2;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.energysolar.com/forumtest/jukebox/images/transp_bg.png');
  background-image: url(http://www.energysolar.com/forumtest/jukebox/images/transp_bg.png);
        }
#divZSJukeBoxContent {
background: #4786c2 url(http://www.energysolar.com/forumtest/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: default;
}
-->
</style>

<script type="text/javascript">
<!--
function hide() {
        var jukebox = document.getElementById?document.getElementById('divZSJukeBox'):document.all['divZSJukeBox'];
        jukebox.style.display = 'none';
}
//-->
</script>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://www.energysolar.com/forumtest/templates/ZoneSensible/pngfix_map_with_background_fix.js"></script>
<![endif]-->
</head>
<body>
<iframe src="http://www.energysolar.com/forumtest/index.php" id="realforum" name="realforum" marginwidth="0" marginheight="0" frameborder="0" height="100%" width="100%"><a>Cliquez ici pour accéder au forum de ZoneSensible</a></iframe>
<div id="divZSJukeBox">
<div id="divZSJukeBoxContent"><span style="float: right; cursor: pointer;" onclick="hide();"><img src="http://www.energysolar.com/forumtest/jukebox/images/zsclose.gif" height="30" width="30"></span></div>
<br><br>
      <object
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
        id="ZoneSensibleJukebox"
        width="280" height="73"
      >
        <param name="movie" value="http://www.energysolar.com/forumtest/jukebox/player/zsmusicplayer.swf">
        <param name="bgcolor" value="#000000">
        <param name="quality" value="high">
        <param name="loop" value="false">
        <embed
          type="application/x-shockwave-flash"
          pluginspage="http://www.macromedia.com/go/getflashplayer"
          name="ZoneSensibleJukebox"
          width="280" height="73"
          src="http://www.energysolar.com/forumtest/jukebox/player/zsmusicplayer.swf"
          bgcolor="#000000"
          quality="high"
          loop="false"
        >
          <noembed>
            Cette fonction nécessite Flash pour pouvoir marcher correctement. Veuillez installer un navigateur à jour.
          </noembed>
        </embed>
      </object>
</div>
</body>
</html>


J'ai modifié le code, normalement vous devriez pouvoir l'enregistrer dans une page et tout devrait fonctionner (sauf le musique) si vous souhaitez faire des tests.

Merci d'avance pour toute réponse Smiley biggrin

/EDIT2: Merci Felipe pour l'edit, j'etais un peu fatigué après mes longues recherches aussi j'ai oublié d'enlever le superflus...
Modifié par GBO (09 Oct 2006 - 19:40)
Personne n'a de solution ou d'alternative a proposer ? Smiley decu

Bon j'ai continué mes investigations, et apparement le probleme vient de la superposition d'un div sur une iframe contenant un flash. Il faut donc que je trouve une alternative aux iframes, mais je ne vois pas comment faire autrement pour que mon jukebox continue de jouer pendant que les internautes visitent le site...

Je continue de chercher...
Bon j'ai testé la technique du pseudo-framing, et finalement ce n'est vraiment que du pseudo-frame puisque ca ne fait que simuler un état fixe, or j'ai vraiment besoin de cet état...

Je pense que je vais pour l'instant rester avec ma solution, meme si sur certains ordinateurs le défilement est un peu ralenti.

Si vous avez des alternatives a proposer je suis toujours preneur.

/EDIT: Voir la suite du sujet sur http://forum.alsacreations.com/topic-4-18785-1-Problemes-de-superposition.html
Modifié par GBO (11 Oct 2006 - 19:21)
Sujet clos
Aller à