Est-il possible de placer un bloc par dessus une bannière flash ?

Bonjour,

Est-il possible de placer un bloc par dessus une bannière flash ? Dans mon cas ce serait pour placer un menu horizontal transparent par dessus les images qui défilent dans le Dewslider.

Je ne réussit que sur mac avec Safari et Firefox, mais rien sur Windows !

Je vous remercie pour une réponse,

Serge

Hello,

Une petite recherche t'aurait donné en exemple ce sujet et notamment cette réponse.

++
Modifié par Nolem (06 Jul 2009 - 13:19)

Je te remercie pour ta réponse Nolem !

a écrit :
<param name="wmode" value="transparent" />

a résolu le problème pour IE 7 et Firefox sur Windows, mais rien pour IE 6 (le menu reste grisé et non transparent)

Une autre idée ? je n'ai pas encore trouvé dans la recherche ni sur le Web.
Merci !

Serge

À vue de nez, j'ai l'impression que tu utilises un *.png pour ton menu CSS, n'est ce pas ? De mémoire, IE6 ne gère pas l'opacité d'un *.png.

Sinon, peux tu mettre le code source (HTML/CSS) sur le forum, STP ? Je verrai un peu mieux de quoi il en retourne.

Également, je pense que tu peux proposer aux visiteurs de mettre à jour leur navigateur via une redirection ou un menu plus compatible avec un message invitant la mise à jour du « browser » ou .... Tu as deux solutions qui s'offrent à toi avec chacun ses qualités et ses défauts :

* langage serveur (PHP, ASP, Python, etc.)
* langage client (js/ecmascript)

Aussi, tu peux peut être intégrer ton menu dans l'animation flash. Plus simple, plus dynamique à mettre en place, mais accessibilité zéro !

++
Modifié par Nolem (06 Jul 2009 - 19:58)

Nolem a écrit :
Également, je pense que tu peux proposer aux visiteurs de mettre à jour leur navigateur via une redirection ou un menu plus compatible avec un message invitant la mise à jour du « browser »

Généralement inutile et contreproductif. Donc plutôt non.

Le HTML/CSS qui tourne dans le CMS Spip :
Je rencontre aussi un problème de survol du menu : pas d'activation du changement de background pour IE7.

a écrit :
[(#REM)Menu principal au dessus du bandeau,
il affiche les SITES utilisés sur la page d'accueil rubrique MENU_ACCUEIL]

<div id="menu_principal">
<ul class="kwicks">
<li id="kwick1"><a href="http://www.monsite.com./spip.php?rubrique1">...</a></li>
<li id="kwick2"><a href="http://www.monsite.com./spip.php?rubrique2">...</a></li>
<li id="kwick3"><a href="http://www.monsite.com./spip.php?rubrique3">...</a></li>
<li id="kwick4"><a href="http://www.monsite.com./spip.php?rubrique4">...</a></li>
<li id="kwick5"><a href="http://www.monsite.com./spip.php?rubrique5">...</a></li>
<li id="kwick6"><a href="http://www.monsite.com./spip.php?rubrique6">...</a></li>
</ul>
</div><!--fin menu_principal-->

<div class="nettoyage"></div><!--corrige bug firefox-->


[(#REM)Affichage du bandeau,
on utilise les images placées dans le dossier "dewslider"]

<div id="banniere">
<BOUCLE_dewslider(RUBRIQUES){id_rubrique}{titre_mot=dewslider}>
<object type="application/x-shockwave-flash"
data="./dewslider/dewslider.swf?img=./dewslider/[(#TITRE|minuscules|supprimer_numero|replace{" ",""})1.jpg],
./dewslider/[(#TITRE|minuscules|supprimer_numero|replace{" ",""})2.jpg],
./dewslider/[(#TITRE|minuscules|supprimer_numero|replace{" ",""})3.jpg]&transition=fade&speed=70&timer=11" width="960" height="180">
<param name="movie" value="./dewslider/dewslider.swf?img=./dewslider/[(#TITRE|minuscules|supprimer_numero|replace{" ",""})1.jpg],
./dewslider/[(#TITRE|minuscules| supprimer_numero|replace{" ",""})2.jpg],
./dewslider/[(#TITRE|minuscules|supprimer_numero|replace{" ",""})3.jpg]&transition=fade&speed=70&timer=11" />
<param name="wmode" value="transparent" /></object>

</BOUCLE_dewslider>
<!--ici le HTML pour afficher l'image part defaut-->
<//B_dewslider>
</div><!--fin banniere-->

/************ MENU PRINCIPAL ***************/

#menu_principal { position: absolute; top: -7px; z-index: 10; }

.kwicks { position: relative; margin: 0; padding:0; list-style-type: none; list-style-position: outside; }
.kwicks li { display: block; overflow: hidden; float: left; width: 160px; height: 40px; background-image: url(./images/kwicks_sprite.png); background-repeat: no-repeat; margin-right: 0; padding: 0; cursor: pointer; }
.kwicks a { display: block; height: 40px; text-indent: -9999px; outline: none; }

#kwick1 { background-position: 0px 0px; }
#kwick2 { background-position: -200px 0px; }
#kwick3 { background-position: -400px 0px; }
#kwick4 { background-position: -600px 0px; }
#kwick5 { background-position: -800px 0px; }
#kwick6 { background-position: -1000px 0px; }

#kwick1.active, #kwick1:hover { background-position: 0 bottom; }
#kwick2.active, #kwick2:hover { background-position: -200px bottom; }
#kwick3.active, #kwick3:hover { background-position: -400px bottom; }
#kwick4.active, #kwick4:hover { background-position: -600px bottom; }
#kwick5.active, #kwick5:hover { background-position: -800px bottom; }
#kwick6.active, #kwick6:hover { background-position: -1000px bottom; }


/********* BANNIERE **********/

#banniere { position: relative; z-index: 1; }
Modifié par Serge (07 Jul 2009 - 07:13)

Je n'ai toujours pas trouvé la solution...

IE6 n'implémente la pseudo-classe :hover que sur les liens (balises a).
Hors tu l'utilise sur la balise "li".