[Résolu] Hover sur un flash ne marche pas sous firefox

Bonjour,
J'intègre un player flash et je souhaite qu'il ne s'affiche entièrement que lors du survol.
J'ai donc placé l'objet flash dans un DIV, et j'utilise une classe css et la pseudo classe hover pour modifier la hauteur du bloc DIV affiché.
Le problème: ça marche correctement sous IE mais pas sous firefox, probablement le hover est superbement ignoré par le div lorsqu'il contient un objet flash ...

Le CSS:

<style type="text/css">
    div.player, div.player object, div.player embed{
    width:180px;
    height:83px;
    overflow:hidden;
    margin:0 auto;
    display:block;
    background-color:#CC8866; /*couleur juste pour voir le bloc div*/
    }
    div.player:hover, div.player object:hover, div.player embed:hover{
    height:215px;
    }
    </style>

Le HTML:

<div class="player">Ici ça marche parfaitement sous ie ET firefox</div>

  <br>
 
<div class="player"><!--ici ça marche po-->
      <object>
      <param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=13649522&lang=FR&colorBack=0xB2C4D8&colorVolume=0x345F8A&colorScrollbar=0x345F8A&colorText=0x202020&autoplay=0&autoShuffle=0&id=4175198">
      <embed type="application/x-shockwave-flash" src="http://www.deezer.com/embedded/widget.swf?path=13649522&lang=FR&colorBack=0xB2C4D8&colorVolume=0x345F8A&colorScrollbar=0x345F8A&colorText=0x202020&autoplay=0&autoShuffle=0&id=4175198">
      </embed>
    </object>
    </div>

Est-ce que quelqu'un aurait une solution à ce problème ?
Un pis aller serait d'avoir le player affiché complètement sous firefox et répondant au mouse over sous IE, qui peu le plus ...

Merci d'avance

Merci au passage à tous les contributeurs du forum qui m'ont permis d'apprendre (et comprendre) pas mal de choses sur les css
Modifié par grandchouc (16 Mar 2009 - 12:30)

Bonjour,

Deux pistes:

- Le code HTML pour l'animation Flash n'est pas valide. Il utilise EMBED, et pas uniquement OBJECT comme il le faudrait pour respecter HTML 4.01 (ou XHTML 1.0). Il y a un article ici même sur comment insérer une animation Flash avec un code valide, je te laisse voir ça. Ceci dit, je doute que ça soit la source du problème.

- C'est peut-être dû à la manière dont les plugins de navigateur (dont Flash) sont intégrés dans Firefox. Je tenterais éventuellement, avec un code valide, d'utiliser wmode="transparent", mais il n'est pas dit que ça marche. Si le wmode n'y fait rien, j'ai bien peur que ça ne puisse être corrigé.

salut,

moi ça fonctionne sous firefox 3, les deux div prennent leurs dimensions finales au survol de la souris.

bizarre !

++

Merci Florent !
J'ai corrigé le code d'intégration du flash et j'ai ajouté le wmode="transparent", qui est necessaire pour que ça fonctionne sous firefox 2

Le nouveau html :

<div class="player">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="180" height="215">
    <param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=13649522&lang=FR&colorBack=0xB2C4D8&colorVolume=0x345F8A&colorScrollbar=0x345F8A&colorText=0x202020&autoplay=0&autoShuffle=0&id=4175198">
    <!--if !IE>-->
    <object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=13649522&lang=FR&colorBack=0xB2C4D8&colorVolume=0x345F8A&colorScrollbar=0x345F8A&colorText=0x202020&autoplay=0&autoShuffle=0&id=4175198" width="180" height="215">
    <param name="wmode" value="transparent">
      <!--<!endif-->
      <p>
        L'affichage de la musique a été bloqué.
      </p>
      <!--if !IE>-->
    </object>
    <!--<!endif-->
  </object>
</div> 

Maintenant ça marche !
Modifié par grandchouc (16 Mar 2009 - 12:21)