Modification animation (background & images)

Résolu
rollerfire -  
Bonjour, je cherche à modifier mon animation http://www.vip-anim.fr
j'ai trouver sa "picasa" que j'ai actuellement sur mon site

http://www.outils-web.com/p.asp?cod=gall&diap=carousel3d&fmt=pic

qui n'est pas mal du tout , mais mtn je cherche à supprimer le fond noir pour avoir un transparent et agrandir les images .

voilà les fichier que j'obtient après avoir créer mon diaporama sur picasa
http://www.hostingpics.net/viewer.php?id=829910Capturepleincran12112012151502.png

serait vous dans quel fichier je peut trouver de quoi modifier ceci , car après plusieurs recherche et modification rien n'a changé

15 réponses

Résumé de la discussion

Le fil porte sur la modification d’un diaporama Flash (Carousel.swf) intégré via Picasa afin d’afficher des images sans fond noir et en taille maximale sur une page, sans perturber le menu. Des réponses proposent d’agir sur le fichier XML et le HTML pour modifier le fond et activer le mode wmode transparent dans l’intégration Flash du carousel. En parallèle, des conseils préconisent d’ajuster la taille des images et d’employer CSS et JavaScript pour les rollover, afin d’éviter le défilement et de préserver l’accès au menu. Plusieurs échanges soulignent que le rendu dépend fortement du paramétrage du flash (wmode, background color) et qu’il faut tester sur différents navigateurs et configurations pour évaluer l’impact sur l’affichage et l’ergonomie.

Bobot (l’IA à votre service)
  4. RAD ZONE Contributeur
    Salut

    cela devrait ce regler dans les code d insertion du swf ?
    il faut voir le code de ta page html et peut etre le xml aussi !

    a+
    2. astuces72
      slt

      je crois que c'est propre au swf et que ce n'est pas modifiable.
      à voir avec l'auteur !
      1. rollerfire Auteur
        oui c'est propre au swf car le xml modifie le html mais pas le swf , je n'est plus qu'a chercher un autre carrousel aussi bien fait que celui -la ^^
        1. astuces72
          pourtant ton fond de page est noir et le fond du carrousel aussi, alors pourquoi changer ?
          1. RAD ZONE Contributeur 
            oui c'est propre au swf car le xml modifie le html mais pas le swf


            a bon ?? tu crois que ce xml modifie le html !!??
            le xml donne des instruction au swf et pas au html !!

            dans ce xml je vois une couleur de bg, la taille des petites images,la vitesse de rotation ect ect ect !! 

            <slide_show>
  <options>
    <debug>false</debug>
    <!-- true, false -->
      <background>0x000000</background>
      <!-- 0xRRGGBB -->
        <interaction>
          <rotation>mouse</rotation>
          <!-- auto, mouse, keyboard -->
            <speed>90</speed>
            <!-- [-360,360] -->
              <view_point>mouse</view_point>
              <!-- none, mouse, keyboard -->
                <console>onClick</console>
                <!-- show, hide, onClick --></interaction>
                <far_photos>
                  <size>50</size>
                  <!-- [0,100] -->
                    <amount>25</amount>
                    <!-- [0,100] -->
                      <transparency>true</transparency>
                      <!-- true, false --></far_photos>
                      <reflection>
                        <amout>300</amout>
                        <!-- [0,1000] -->
                          <blur>15</blur>
                          <!-- [0,100] -->
                            <distance>10</distance>
                            <!-- [-1000,1000] -->
                              <alpha>75</alpha>
                              <!-- [0,100] --></reflection>
                            </options>
                            <photo href="images/p1050636.jpg" target="_blank">thumbnails/p1050636.jpg</photo>
                            <photo href="images/p1050738.jpg" target="_blank">thumbnails/p1050738.jpg</photo>
                            <photo href="images/p1050038.jpg" target="_blank">thumbnails/p1050038.jpg</photo>
                            <photo href="images/p1050042.jpg" target="_blank">thumbnails/p1050042.jpg</photo>
                            <photo href="images/p1050109.jpg" target="_blank">thumbnails/p1050109.jpg</photo>
                            <photo href="images/p1010495.jpg" target="_blank">thumbnails/p1010495.jpg</photo>
                            <photo href="images/p1010545.jpg" target="_blank">thumbnails/p1010545.jpg</photo>
                            <photo href="images/p1000177.jpg" target="_blank">thumbnails/p1000177.jpg</photo>
                            <photo href="images/p1000328.jpg" target="_blank">thumbnails/p1000328.jpg</photo>
                          </slide_show>

            1. rollerfire Auteur
              oui j'ai remarquez ma connerie ^^ non je voulais dire que dans le xml il ne propose pas de changer le background du caroussel .

              et pour astuce72 mon fond de site et traversé par une barre verte mais j'ai pas encore résolu le problème de résolution de mon site, donc il est probable que chez toi mon carousel s'affiche trop grand donc tu ne vois pas le fond du site va sur contact tu devrais le voir
              1. RAD ZONE Contributeur
                salut

                tu as essaye en modifiant dans le xml !? 
                <background>0x000000</background>
              2.  astuces72
                je ne suis pas sur que çà fasse plus joli en changeant le fond du carrousel !
                tu devrait peut être remonter ton backgroud de page !
            2. rollerfire Auteur
              j'ai mis ce que tu a mis dans mon background a première vu rien n'a changé
              1. RAD ZONE Contributeur 
                j'ai mis ce que tu a mis dans mon background
                non si tu a mis 0X000000 c est ce qui est deja , c est a dire noir !
                met par exemple
                <background>0x888888</background>
                voir si ca change?

                il faut peut etre voir aussi ce que ca donne si tu ne donne pas de couleur au bg dans le XML , et que tu change le param wmode de opaque a transparent
                ( changer aux 2 endroit dans le code d insertion swf sur la page html )                 

                <param value="transparent" name="wmode">
                a voir ???
              2. rollerfire Auteur
                j'ai fait <background>0x888888</background>
                en faite sa sert a changé la couleur qu'on les image quand elle passe au fond du caroussel
              3. rollerfire Auteur 
                il faut peut etre voir aussi ce que ca donne si tu ne donne pas de couleur au bg dans le XML , et que tu change le param wmode de opaque a transparent 
( changer aux 2 endroit dans le code d insertion swf sur la page html )


                je pense pas que le html agis sur le swf
            3. RAD ZONE Contributeur
              bon regarde ce que j ai fais vite fait !!
              un html propre et correctement structure !
              a part le css du menu que tu n a pas , tout fonctionne ! 

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
    <!--
    * {
      margin: 0;
      padding: 0;
    }

    html{
      background-color: #000000;
    }

    #site{
      position: relative;
      margin-top: 30px;
      width: 100%;
      z-index: 10;
    }

    #header{
      position: absolute;
      width: 405px;
      height: 138px;
      margin-left: 20px;
      background-image: url(http://www.vip-anim.fr/miseenpage/image/logoVERT.png);
    }

    #menu{
      height: 100px;
      margin-left: 445px;
    }

    #footer{
      height: 100px;
      width: 1000px;
      background-image: url(http://www.vip-anim.fr/miseenpage/image/barre%20fin.png);
      margin: auto;
    }

    #content{
      width: 100%;
      margin-top: 20px;
    }

    #carou{
       height: 500px;
    }




      /* TRUC POUR IMAGE EN BG */

    .background {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
    }

    .screen {
      height: 100%;
    }

    .image {
      width: 100%;
    }

    .full {
      width: 100%;
      height: 100%;
    }

    /* TRUC POUR IMAGE EN BG */


    -->
    /*]]>*/
    </style>
    <link rel="stylesheet" href="menu1/style.css" type="text/css" />
  </head>
  <body>

  <!-- TRUC POUR IMAGE EN BG -->
    <div class="background">
      <img class="full screen image" src="http://www.vip-anim.fr/miseenpage/image/arriereplan.jpg" alt="" />
   <!-- TRUC POUR IMAGE EN BG -->

    </div>
    <div id="site">
      <div id="header"></div>
      <div id="menu">
        <ul id="menu1" class="topmenu">
          <li class="topfirst">
            <a href="#">Vip</a>
          </li>
          <li class="topmenu">
            <a href="#">Presentation</a>
          </li>
          <li class="topmenu">
            <a href="#">Contact</a>
          </li>
          <li class="toplast">
            <a href="#">Partenaires</a>
          </li>
        </ul>
      </div>
      <div id="content">
        <div id="carou">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
            <param name="base" value="http://www.vip-anim.fr/" />
            <param name="movie" value="http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="swfversion" value="6.0.65.0" />
            <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
            <param name="expressinstall" value=
            "http://www.vip-anim.fr/articles/mariagenico/Scripts/expressInstall.swf" />
            <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data=
            "http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" width="100%" height="100%">
              <!--<![endif]-->
              <param name="base" value="http://www.vip-anim.fr/" />
              <param name="quality" value="high" />
              <param name="wmode" value="transparent" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="http://www.vip-anim.fr/Scripts/expressInstall.swf" />
              <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
              <div>
                <h4>
                  Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.
                </h4>
                <p>
                  <a href="https://get.adobe.com/flashplayer/"><img src=
                  "https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=
                  "Obtenir le lecteur Adobe Flash" /></a>
                </p>
              </div><!--[if !IE]>-->
            </object> <!--<![endif]-->
          </object>
        </div>
      </div>
      <div id="footer"></div>
    </div>
  </body>
</html>



              ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
              1. rollerfire Auteur
                °_° je t'aime ! est ce que avec sa le problème de résolution est corrigé ? tu peu vérifier le première avant gout ici
                http://www.vip-anim.fr/defaut.php
                1. RAD ZONE Contributeur 
                  est ce que avec sa le problème de résolution est corrigé

                  Oui plus de problème de résolution!

                  et si tu veux le CSS de ce menu !
                  https://travellerz.de/

                  il ne te reste plus qu a modifier l image de fond si tu veux recentrer la vague l

                  a+


                  ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
                  1. rollerfire Auteur
                    un grand merci ^^ je vais remettre les image de mon menu est c'est parti pour modifier toute mes page -_-
                    1. RAD ZONE Contributeur 
                      je vais remettre les image de mon menu

                      la methode faite par dreamweaver est tres lourde et plein de js inutile !
                      essaye de modifier mon menu , qui lui n est que en CSS .( tout le style ce regle par la CSS externe du menu "style.css" ! )
                      a+
                    2. rollerfire Auteur
                      au début j'ai pensé modifier directement sur le html , mais sa reviendrais au même résultat que si je refait tout sur dreamweaver , je ne serais pas modifier ton style.css pour donner le résultat souhaité , je ne connais pas assez le css
                    3. rollerfire Auteur
                      en tout cas tu m'a fait faire un énorme pas en avant ! je t'en remercie encore.
                    4. rollerfire Auteur
                      désolé jt'en demande beaucoup mais peux-tu m'aider à introduire mes images sur le menu ?
                    5. rollerfire Auteur
                      c'est super pratique les #chose { } , merci
                  2. RAD ZONE Contributeur
                    si tu veux vraiment utiliser tes images ,le fait de vouloir ces images en rollover va poser un probleme de dimensions d images et de resolution d ecran!
                    il faut aussi utiliser un peu de js !

                    voila ce que ca donne ,avec les images au tailles les plus pres du max possible pour une bonne vision sur un ecran 1024 ,en dessous de 1024 ou si tu met une taille plus grande au images, il faut scroller pour recuperer le menu ! 

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
    <!--
* {
	margin: 0;
	padding: 0;
}
html {
	background-color: #000000;
}
#site {
	position: relative;
	margin-top: 30px;
	width: 100%;
	z-index: 10;
}
#header {
	position: absolute;
	width: 405px;
	height: 138px;
	margin-left: 20px;
	background-image: url(http://www.vip-anim.fr/miseenpage/image/logoVERT.png);
}
#menu {
	margin-left: 445px;
}
#footer {
	height: 100px;
	width: 1000px;
	background-image: url(http://www.vip-anim.fr/miseenpage/image/barre%20fin.png);
	margin: auto;
}
#content {
	width: 100%;
	margin-top: 20px;
}
#carou {
	height: 500px;
}
ul#menu1 {
	margin: 0;
	list-style: none;
	width: 490px;
	height: 100px;
	position: relative;
}
ul#menu1 li {
	width: 120px;
	margin-right: 2px;
	float: left;
}
ul#menu1 a img {
	height: 100px;
	width: 120px;
    border: none;
}

/* DEBUT TRUC POUR IMAGE EN BG */

.background {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
}
.screen {
	height: 100%;
}
.image {
	width: 100%;
}
.full {
	width: 100%;
	height: 100%;
}

    /* FIN TRUC POUR IMAGE EN BG */


    -->
    /*]]>*/
    </style>

    <!-- DEBUT JS POUR LES ROOLOVER IMAGES -->

     <script language="JavaScript" type="text/javascript">
      /*<![CDATA[*/
function imagerollover(){
	var toutesimages=document.getElementsByTagName("img")
	var preloadimages=[]
	for (var i=0; i<toutesimages.length; i++){
		if (toutesimages[i].getAttribute("data-over")){
			preloadimages.push(new Image())
			preloadimages[preloadimages.length-1].src=toutesimages[i].getAttribute("data-over")
			toutesimages[i].onmouseover=function(){
				this.src=this.getAttribute("data-over")
			}
			toutesimages[i].onmouseout=function(){
				this.src=this.getAttribute("data-out")
			}
		}
	}
}
 /*]]>*/
 </script>

  <!-- FIN JS POUR LES ROOLOVER IMAGES -->
  </head>
  <body>

  <!-- DEBUT TRUC POUR IMAGE EN BG -->
    <div class="background">
      <img class="full screen image" src="http://www.vip-anim.fr/miseenpage/image/arriereplan.jpg" alt="" />
   <!-- FIN TRUC POUR IMAGE EN BG -->

    </div>
    <div id="site">
      <div id="header"></div>
      <div id="menu">
        <ul id="menu1">
          <li>
            <a href="vip.php">
             <!-- DEBUT Methode POUR LES ROOLOVER IMAGES -->
             <img src="http://www.vip-anim.fr/miseenpage/image/menu2.png" data-over="http://www.vip-anim.fr/miseenpage/image/menu2p.png" data-out="http://www.vip-anim.fr/miseenpage/image/menu2.png" alt="Vip" />
            <!-- FIN Methode POUR LES ROOLOVER IMAGES -->
             </a>
          </li>
          <li>
            <a href="prestation.php">
             <!-- DEBUT Methode POUR LES ROOLOVER IMAGES -->
             <img src="http://www.vip-anim.fr/miseenpage/image/menu3.png" data-over="http://www.vip-anim.fr/miseenpage/image/menu3p.png" data-out="http://www.vip-anim.fr/miseenpage/image/menu3.png" alt="prestations" />
            <!-- FIN Methode POUR LES ROOLOVER IMAGES -->
             </a>
          </li>
          <li>
            <a href="contact.php">
             <!-- DEBUT Methode POUR LES ROOLOVER IMAGES -->
             <img src="http://www.vip-anim.fr/miseenpage/image/menu4.png" data-over="http://www.vip-anim.fr/miseenpage/image/menu4p.png" data-out="http://www.vip-anim.fr/miseenpage/image/menu4.png" alt="contact" />
            <!-- FIN Methode POUR LES ROOLOVER IMAGES -->
             </a>
          </li>
          <li>
            <a href="partenaire.php">
             <!-- DEBUT Methode POUR LES ROOLOVER ROOLOVER IMAGES -->
             <img src="http://www.vip-anim.fr/miseenpage/image/menu5.png" data-over="http://www.vip-anim.fr/miseenpage/image/menu5p.png" data-out="http://www.vip-anim.fr/miseenpage/image/menu5.png" alt="partenaires" />
            <!-- FIN Methode POUR LES ROOLOVER IMAGES -->
             </a>
          </li>
        </ul>
      </div>
      <div id="content">
        <div id="carou">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
            <param name="base" value="http://www.vip-anim.fr/" />
            <param name="movie" value="http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="swfversion" value="6.0.65.0" />
            <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
            <param name="expressinstall" value=
            "http://www.vip-anim.fr/articles/mariagenico/Scripts/expressInstall.swf" />
            <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data=
            "http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" width="100%" height="100%">
              <!--<![endif]-->
              <param name="base" value="http://www.vip-anim.fr/" />
              <param name="quality" value="high" />
              <param name="wmode" value="transparent" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="http://www.vip-anim.fr/Scripts/expressInstall.swf" />
              <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
              <div>
                <h4>
                  Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.
                </h4>
                <p>
                  <a href="https://get.adobe.com/flashplayer/"><img src=
                  "https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=
                  "Obtenir le lecteur Adobe Flash" /></a>
                </p>
              </div><!--[if !IE]>-->
            </object> <!--<![endif]-->
          </object>
        </div>
      </div>
      <div id="footer"></div>
    </div>
    <!-- JS A NE PAS OUBLIER -->
 <script type="text/javascript">
imagerollover()
</script>
     <!-- JS A NE PAS OUBLIER -->
 </body>
</html>


                    a+
                    1. rollerfire Auteur
                      ouai voila j'ai pas encore testé le code mais c'est sa que j'essayer de faire , j'ai rétrécis mes images pour que le menu soit plus petit . je test sa de suite et je te dit quoi . merci
                    2. rollerfire Auteur
                      j'te remercie pour tout l'aide apporté , j'ai terminé la mise en page de mon site , et j'ai testé avec tout les résolution . Bon avec les deux plus basse c'est pas ce qu'il y a de mieux mais sa passe
                      un très grand merci !
                    3. RAD ZONE Contributeur
                      ok

                      mais change le z-index du header !! ou vip ne sera pas cliquable avec une petite resolution !!
                      tu rajoute 
                       z-index: -9999;
                      a la balise header !

                      ce qui donne 
                      #header {
    background-image: url("http://www.vip-anim.fr/miseenpage/image/logoVERT.png");
    height: 138px;
    margin-left: 20px;
    position: absolute;
    width: 405px;
    z-index: -9999;
}


                      a+
                    4. rollerfire Auteur
                      J'ai supprimer le background image et j'ai ajouter un lien dans le div header pour avoir un accès a 'lindex . le problème est que du coût avec le z-index -9999 l'image n'est plus cliquable et je ne voit pas pourquoi d'ailleurs , j'avais ouvert un nouveau sujet pour ne pas te demander plus ^^ vu que tu m'a déjà pas mal aidé .

                  Discussions similaires

                  Idées animations centre d'appel
                  goliath09

                  8 réponses
                  Modifier une annonce ou le prix sur Leboncoin sans payer
                  BourrinOman83

                  22 réponses