Remplacer une image par une animation Flash

04 oct. 2010, 09:49

Bonjour,
Je suis débutant de chez débutant et sur la page d'accueil http://www.photodeal.tm.fr, je souhaite remplacer l'image centrale "hello.jpg" Par l'animation Flash "virvis.swf" qui tourne déjà sur une autre page du site :
http://photodeal.tm.fr/?bien_pilote=app ... cueil.html
Je veux conserver le lien en dessus à droite de l'image qui ouvre une fenêtre d'aide à la naviguation et il semble y avoir un conflit...
J'ai essayé de remplacer <img src="images/hello.jpg" /> par :

Code : Tout sélectionner

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="420" height="315" title="virvis">
  <param name="movie" value="virvis.swf" />
  <param name="quality" value="high" />
  <param name="allowFullScreen" value="true"
  <embed src="virvis.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="315" ></embed>
</object>

j'obtiens un espace blanc à l'emplacement de l'anime et mon lien vers la fenêtre d'aide disparait en dessous.
merci pour votre précieuse aide, Fabien.

04 oct. 2010, 10:12

J'ai oublié de préciser que le développeur (disparu dans la nature) a créé le site en php...

04 oct. 2010, 11:08

essaye ceci

Code : Tout sélectionner

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="420" height="315" title="virvis">
  <param name="movie" value="pages/swf_visites/virvis.swf" />
  <param name="quality" value="high" />
  <param name="allowFullScreen" value="true"
  <embed src="pages/swf_visites/virvis.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="315" ></embed>
</object>

Ton fichier flash n'est pas au même endroit que ta page index, il faut donc spécifier le chemin vers le fichier flash

Pour ton bouton qui disparait, il faut voir dès que ton code est en place, mais le flash a la facheuse tendance à se mettre au dessus de tout. Essaye de jouer avec les attributs z-index de ton flash et de tes div d'explication

04 oct. 2010, 11:12

Merci Spols pour ta réponse, je vais tester ça...!

04 oct. 2010, 11:24

L'anime a effectivement remplacée le jpg, merci, c'est super...
Le lien apparait bien au-dessus à droite de l'anime et quand on le survol, la fenêtre d'aide s'ouvre mais en dessous le Flash comme tu le disais...
Je vais essayer de capter où se trouve la mise en place de cette fenêtre dans le code php et essayer de capter la position avec z-index
Merci encore pour ce coup de main !

04 oct. 2010, 11:27

Je constate aussi que les 2 popup du bas de page (avantages...par rapport...) s'ouvre aussi SOUS le Flash...
Vais essayer de comprendre comment ça tourne...

04 oct. 2010, 11:44

Tout est OK sur la version en ligne maintenant !
http://www.photodeal.tm.fr
Il manquait un paramètre à mon anime Flash:
<param name="WMODE" value="Transparent" />

Merci mille fois pour ton aide...

04 oct. 2010, 11:48

Sur Firefox, je vois toujours tes div sous ton flash

04 oct. 2010, 11:50

J'ai crié victoire un peu trop rapidement...
ça se corse si ça fonctionne sur ie et pas sur Firefox !

04 oct. 2010, 11:57

Je vois pas de paramètre z-index pour cette fenêtre d'aide :

Code : Tout sélectionner

<center>
<div style="width:594px; height:362px; position:relative;">
<div style="position:absolute; right:0px; top:-15px; font-size:11px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;"><a href="javascript:void(0);" onmouseover="alias.getElementById('explication').style.display='block';" onmouseout="alias.getElementById('explication').style.display='none';" style="color:#4b4b4b; text-decoration:none;">Aide navigation</a></div>
<div style="position:absolute; right:61px; top:66px; display:none;" id="explication"><img src="images/explication.png" /></div>

Idem pour les 2 popups du bas de page :

Code : Tout sélectionner

<center>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="594"><tr>
<td align="center" width="50%">
<h4><a href="javascript:void(0);" onmouseover="alias.getElementById('rvideo').style.display='block';" onmouseout="alias.getElementById('rvideo').style.display='none';" style="color:#4b4b4b; text-decoration:none;">par rapport à la vidéo</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
</td>
<td align="center" width="50%">
<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onmouseover="alias.getElementById('rphoto').style.display='block';" onmouseout="alias.getElementById('rphoto').style.display='none';" style="color:#4b4b4b; text-decoration:none;">par rapport à la photographie</a></h4>
</td></tr></table>
</center>

C'est normal ou pas ?

04 oct. 2010, 15:24

Ce sont sur les div contenant l'image et les textes qu'il faut agir, il n'y a pas d'attribut z-index pour le moment, mais tu peux le rajouter

exemple pour ton image (avec la souris)

<div style="position:absolute; right:61px; top:66px; display:none;" id="explication"><img src="images/explication.png" /></div>

deviens

<div style="position:absolute; right:61px; top:66px; display:none;z-index:2;" id="explication"><img src="images/explication.png" /></div>

Mais je suis pas sur que cela fonctionne, ca ne fonctionne pas avec mon firebug.

Pour les deux popups, décale les de par et d'autre du flash ca reglera le probléme (joue avec les attributs right et top)

04 oct. 2010, 16:29

J'ai suivi tes conseils et repositionné les 2 popups du bas de page entre l'animation Flash et les menus de droite et gauche déroulés.
j'ai testé sur ie en 1920 x 1080 sur du 4/3 et du 16/9 là pas de pb...
en 1024 x 768 ça passe juste mais c'est bon !

Du coup, j'ai appliqué la même méthode pour le fichier d'aide à la navigation sauf que j'ai postionné la fenêtre au dessus de l'anime sinon, à droite ou à gauche, la fenêtre "passait" SOUS les menus une fois déroulés.
C'est pas trop mal au niveau esthétique et ça a le mérite de ne jamais masquer l'anime avec des popups...

Merci pour ton aide sur ce coup là.

Remplacer une image par une animation Flash

Qui est en ligne