Se connecter avec
S'enregistrer | Connectez-vous

Decharger une anim flash en langage html

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte

bonsoir,
en fait comme tu l'a compris, je cherche le code HTLM pour "éteindre" une animation flash au clic d'une image predominante. En fait, il s'agit d'un diaporama (on clique sur une vignette pour voir l'image en grand; pour ne pas démarrer sur un diaporama qui apparaitrait comme vide(avant d'avoir cliquer la première fois) j'ai incorporé une animation flash que je souhaiterais voir disparaitre lors du premier clic.
Je travaille ds dreamweaver, le diaporama est en javascript
j'espere avoir été + clair. Merci à eous pour vos éventuelles solutions

je peux effectivement te donner tout mon code source ou si tu prefere juste la partie du diaporama
le voici : 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head>
  3. <title>cvp1</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <link rel="stylesheet" media="screen" type="text/css" title="70" href="pbookprint.css" />
  6. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. <!--
  10. function MM_swapImgRestore() { //v3.0
  11.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  12. }
  13.  
  14. function MM_findObj(n, d) { //v4.01
  15.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  16.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  17.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  18.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  19.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  20. }
  21.  
  22. function MM_swapImage() { //v3.0
  23.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  24.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  25. }
  26. //-->
  27. </script>
  28. </script>
  29. <style type="text/css">
  30. <!--
  31. #apDiv1 {
  32. 	position:absolute;
  33. 	left:749px;
  34. 	top:-12px;
  35. 	width:324px;
  36. 	height:526px;
  37. 	z-index:1;
  38. }
  39. #apDiv2 {
  40. 	position:absolute;
  41. 	left:136px;
  42. 	top:343px;
  43. 	width:123px;
  44. 	height:119px;
  45. 	z-index:2;
  46.  
  47. }
  48. #apDiv3 {
  49. 	position:absolute;
  50. 	left:200px;
  51. 	top:192px;
  52. 	width:739px;
  53. 	height:500px;
  54. 	z-index:2;
  55. }
  56. -->
  57. </style>
  58. <style type="text/css" media="screen">
  59.  
  60. #tout {
  61. 	width:904px;
  62. 	margin-left:150px;
  63. 	float:left;
  64. 	}	
  65.  
  66. #grandeImageDIV {
  67. 	width:904px;
  68. 	height:480px;
  69. 	margin-left:50px;
  70.  
  71.  
  72. }
  73. #legende_complete{
  74. 	width:838px;
  75. 	height:24px;
  76. 	text-align:center;
  77.  
  78. 	font-family:"Arial black", Helvetica, sans-serif;
  79. 	font-size:12px;
  80.    color:#ffffff;
  81.  
  82. }
  83.  
  84. #boutonGauche {
  85. 	background-color:#ff00cc;
  86. 	height:48px;
  87. 	width:32px;
  88. 	cursor:pointer;
  89. 	float:left;
  90.  
  91. }
  92. #boutonDroit {
  93. 	background-color:#9900ff;
  94. 	width:32px;
  95. 	height:48px;
  96. 	cursor:pointer;
  97. 	float:left;
  98.  
  99. }
  100.  
  101.  
  102. #masqueVign {
  103. 	height:48px;
  104. 	background-color:#ff9900;
  105. 	width:775px;
  106. 	overflow:hidden;
  107. 	position:relative;
  108. 	float:left;
  109.  
  110. }
  111.  
  112. #lesVignettes {
  113. 	font-family:Arial, Helvetica, sans-serif;
  114. 	position:absolute;
  115. 	height:48px;
  116. }
  117.  
  118.  
  119. </style>
  120. <script type="text/javascript">
  121.  
  122. <!--
  123.  
  124. function MM_preloadImages() { //v3.0
  125.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  126.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  127.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  128. }
  129. //-->
  130. </script>
  131. <div id="page">
  132.  
  133. <body onload="MM_preloadImages('images/baccueil-ro.png','images/faccueilro.png','images/fcvro.png','images/fbook-ro.png','images/bbookrder.png')">
  134. <div id="apDiv1">
  135.   <object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="280" height="500">
  136.     <param name="movie" value="flash/arabesque haut.swf" />
  137.     <param name="quality" value="high" />
  138.     <param name="wmode" value="transparent" />
  139.     <param name="swfversion" value="6.0.65.0" />
  140.     <!-- 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. -->
  141.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
  142.     <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
  143.     <!--[if !IE]>-->
  144.     <object type="application/x-shockwave-flash" data="flash/arabesque haut.swf" width="280" height="500">
  145.       <!--<![endif]-->
  146.       <param name="quality" value="high" />
  147.       <param name="wmode" value="transparent" />
  148.       <param name="swfversion" value="6.0.65.0" />
  149.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
  150.       <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
  151.       <div>
  152.         <h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
  153.         <p><a href="<a href="http://www.adobe.com/go/getflashplayer" target="_blank">http://www.adobe.com/go/getflashplayer</a>"><img src="<a href="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" target="_blank">http://www.adobe.com/images/shared/download_buttons/get...</a>" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
  154.       </div>
  155.       <!--[if !IE]>-->
  156.     </object>
  157.     <!--<![endif]-->
  158.   </object>
  159. </div>
  160. <div id="baccueil"><a href="index.html"><img src="images/faccueil.png" alt="accueil" width="157" height="151" border="0" id="accueil" onmouseover="MM_swapImage('accueil','','images/faccueilro.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
  161.  
  162. <div id="bcv"><a href="pcv .html"><img src="images/fcv.png" alt="cv" width="150" height="151" border="0" id="cv" onmouseover="MM_swapImage('cv','','images/fcvro.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
  163.  
  164. <div id="BBOOKOK"><a href="pbookok.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/bbookrder.png',1)"><img src="images/book-.png" alt="book" width="121" height="121" border="0" id="Image15" /></a></div>
  165. <div id="floatstop"/></div>
  166.  
  167.  
  168.  
  169.  
  170.  
  171. <div id="boutvert">
  172.   <ul id="menuDeroulant">
  173.    <li ><a href="#"><img src="images/roll-over-vert.png"  border="0" align="right" /></a>
  174.      <ul class="sousMenu">
  175.       <li id="text"><a href="pbookprint.html">Print</a></li>
  176.       <li id="text"><a href="pweb.html">Web</a></li>
  177.       <li id="text"><a href="pbookpaint.html">Paint </a></li>
  178.       <li id="text"><a href="pbookdesign urbain.html">Design urbain </a></li>
  179.       </ul>
  180.    </li>
  181.  
  182. </ul>
  183. </div>
  184. <script type="text/javascript">
  185. // <![CDATA[
  186.  
  187. 	var maGalerie = new Array;
  188.  
  189. maGalerie[0] =  ['FNFR', 'booked704_480/petites/dc_cata.png', 'booked704_480/grandes/dc_cata.png','Catalogue exposition "Leçons de choses"','2004'];
  190. maGalerie[1] =  ['FNFR', 'booked704_480/petites/1dcp.png', 'booked704_480/grandes/1dcp.png','dépliant','2004'];
  191. maGalerie[2] =  ['FNFR', 'booked704_480/petites/cahiers_animer.png', 'booked704_480/grandes/cahiers_animer.png','Les Cahiers d Animer','2004'];
  192. maGalerie[3] =  ['FNFR', 'booked704_480/petites/animer.png', 'booked704_480/grandes/animer.png','Journal de la FNFR','2003 2004'];
  193. maGalerie[4] =  ['FNFR', 'booked704_480/petites/le-fabu_festin.png', 'booked704_480/grandes/le-fabu_festin.png','Affiche-Carte Postale','2003'];
  194. maGalerie[5] =  ['FNFR', 'booked704_480/petites/bafa.png', 'booked704_480/grandes/bafa.png','Brochure Jeunesse','2004'];
  195. maGalerie[6] =  ['FNFR', 'booked704_480/petites/scs.png', 'booked704_480/grandes/scs.png','Journal Sciences Culture Société','2004'];
  196. maGalerie[7] =  ['CHEVIGNON', 'booked704_480/petites/chev.png', 'booked704_480/grandes/chev.png','Rapport annuel','1990'];
  197. maGalerie[8] =  ['MONOP', 'booked704_480/petites/monop2.png', 'booked704_480/grandes/monop2.png','Dépliant 2 volets','1994'];
  198. maGalerie[9] =  ['MONOP', 'booked704_480/petites/monop.png', 'booked704_480/grandes/monop.png','Dépliant 3 volets','1994'];
  199. maGalerie[10] =  ['RENAULT VI 1', 'booked704_480/petites/renault.png', 'booked704_480/grandes/renault.png','Livre des Normes','1993'];
  200. maGalerie[11] =  ['RENAULT VI', 'booked704_480/petites/renault2.png', 'booked704_480/grandes/renault2.png','carte de voeux','1993'];
  201. maGalerie[12] =  ['Legende 3', 'booked704_480/petites/moul1.png', 'booked704_480/grandes/moul1.png','Aides de visite','1996'];
  202. maGalerie[13] =  ['Legende 4', 'booked704_480/petites/moul2.png', 'booked704_480/grandes/moul2.png','Aides de visite','1997'];
  203. maGalerie[14] =  ['Legende 5', 'booked704_480/petites/echos2.png', 'booked704_480/grandes/echos2.png','N° spéciaux','1983'];
  204. maGalerie[15] =  ['Legende 6', 'booked704_480/petites/echos1.png', 'booked704_480/grandes/echos1.png','N° spéciaux','1984'];
  205. maGalerie[16] =  ['Legende 7', 'booked704_480/petites/unesco.png', 'booked704_480/grandes/unesco.png','Editions en trois langues','1987'];
  206. maGalerie[17] =  ['Legende 8', 'booked704_480/petites/dessanges.png', 'booked704_480/grandes/dessanges.png','Catalogue','1983 1984 1985'];
  207.  
  208.  
  209.  
  210.  
  211.  
  212. 	function f_allergauche(contenu,distance){
  213.  
  214. 		var bloc = document.getElementById(contenu);
  215. //
  216. 		var positionActuelle =  bloc.offsetLeft; // 0
  217. //		
  218. 		var largeurContenu = bloc.clientWidth; // 1280
  219. //		var largeurContenu = bloc.style.width;
  220. //		
  221. 		var largeurMasque = document.getElementById('masqueVign').clientWidth; // 633
  222. //		
  223. 		var limite = largeurMasque - largeurContenu; 
  224. //		
  225. 		if( positionActuelle != 0 ){
  226.  
  227. 			bloc.style.left= (positionActuelle + distance)+'px';
  228. 		} // Fin de la conditionnelle
  229.  
  230. 	} // Fin de la fonction
  231.  
  232. //---------------------------------------------------------------------------------------------------		
  233.  
  234. 	function f_allerdroite(contenu,distance){
  235.  
  236. 		var bloc = document.getElementById(contenu);
  237. //
  238. 		var positionActuelle =  bloc.offsetLeft; // 0
  239. //		
  240. 		var largeurContenu = bloc.clientWidth; // 1280
  241. //		var largeurContenu = bloc.style.width;
  242. //		
  243. 		var largeurMasque = document.getElementById('masqueVign').clientWidth; // 633
  244. //		
  245. 		var limite = largeurMasque - largeurContenu; 
  246. //		
  247. 		if( limite < positionActuelle ){
  248.  
  249. 			bloc.style.left= (positionActuelle - distance)+'px';
  250. 		} // Fin de la conditionnelle
  251.  
  252. 	} // Fin de la fonction
  253.  
  254. //---------------------------------------------------------------------------------------------------
  255.  
  256. function f_affichergrandeImage(numeroLigne){
  257.  
  258. 	document.getElementById('grandeImage').src = maGalerie[numeroLigne][2];
  259. 	document.getElementById('legende_complete').innerHTML = maGalerie[numeroLigne][0] + ' - ' + maGalerie[numeroLigne][3] + ' - ' + maGalerie[numeroLigne][4];
  260.  
  261. }
  262. //---------------------------------------------------------------------------------------------------
  263. // ]]>
  264. </script>
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271. <div id="tout">
  272. <div id=print> </div>
  273.  
  274. 	<div id="grandeImageDIV" ><img id="grandeImage" src=""  /> </div>
  275.  
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.     <div id="legende_complete"></div>
  283.     <div id="boutonGauche" onclick="f_allergauche('lesVignettes',71);" onselectstart="return false;" 
  284.          style="-moz-user-select:none;"><img src="images/fleched.png" alt="" width="35" height="48" /></div>
  285.  
  286. <div id="masqueVign" onselectstart="return false;" 
  287.          style="-moz-user-select:none;">
  288.  
  289.     	<div id="lesVignettes" style="left:0px;width:1280px;"> 
  290.         <script type="text/javascript">
  291. 		// <![CDATA[
  292.  
  293. 		var nombreLignes = maGalerie.length; // 20
  294.  
  295.         for(var i=0 ; i < nombreLignes ; i++ ){
  296.  
  297. 		var img = '<img src="'+ maGalerie[i][1] + '" alt="manquante" ';
  298. 		    img += 'onmouseover="f_affichergrandeImage(' + i + '); return false;" />';
  299.  
  300. 		document.write(img);
  301. 		var newlargeur=((i+1)*71) + 'px';
  302. 		document.getElementById('lesVignettes').style.width=newlargeur;
  303. 		}
  304. 		//on peut mettre ce code en bas quand on ades images lourdes(avant body)
  305. 		//Ajouter ici des effets visuels : fondu, redimentionnement
  306. 		</script>
  307.         </div>
  308.  
  309.   </div>
  310.  
  311.  
  312.     <div id="boutonDroit" onclick="f_allerdroite('lesVignettes',71);" onselectstart="return false;" 
  313.          style="-moz-user-select:none;"><img src="images/flecheg.png" alt="" /></div>
  314.  
  315.  
  316.  
  317.  
  318.  
  319. </div>
  320.  
  321.  
  322.  
  323. </div>
  324. <script type="text/javascript">
  325. <!--
  326. swfobject.registerObject("FlashID2");
  327. //-->
  328. </script>
  329. </body>
  330. </html>






et voici mon code css

  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. body
  5. {
  6.  
  7. 	background:url(degad%C3%A9.jpg)repeat;
  8. 	margin: auto; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
  9. 	padding: 0;
  10.  
  11.  
  12.  
  13. }
  14. .oneColElsCtr #container {
  15. 	width: 1024px;
  16. 	background: #FFFFFF;
  17. 	margin: 15 px; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
  18. 	border:none;
  19. 	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
  20. }
  21. .oneColElsCtr #mainContent {
  22.  
  23.  
  24. }
  25.  
  26. #baccueil
  27. {
  28. 	height:150px;
  29. 	width:157px;
  30. 	margin-top:10Opx;
  31. 	margin-left:290px;
  32. 	float:left
  33. }
  34.  
  35. 	#bcv
  36. {
  37. 	height:150px;
  38. 	width:157px;
  39. 	margin-top:10x;
  40. 	margin-left: -10px;
  41. 	float:left
  42. 	}
  43.  
  44. 	#bbook
  45. {
  46. 	height:150px;
  47. 	width:157px;
  48. 	margin-top:-10px;
  49. 	margin-left:-10px;
  50. 	float:left;
  51. 	}
  52.  
  53. 	#floatstop
  54. {
  55. 	height:2px;
  56. 	width:1024px;
  57. 	clear:both;
  58. }
  59.  
  60. 	#animbook
  61. {
  62. 	height:257px;
  63. 	margin-left:350px;
  64. 	float:left;
  65.  
  66. 	}
  67. 	#animflash
  68. {
  69. 	height:300px;
  70. 	width:200px;
  71. 	margin-top:0px;
  72. 	margin-left:750px;
  73. 	float:right;
  74. }
  75. #boutvert
  76. {
  77. 	height:150px;
  78. 	width:150px;
  79. 	margin-top:185px;
  80. 	margin-left:115px;
  81. 	position:absolute
  82.  
  83. }
  84.  
  85.  
  86.  
  87. #position
  88. { position:absolute
  89. }
  90. #text
  91. {  
  92. 	font-size:16px;
  93. 	font-family:"Arial Black", Gadget, sans-serif;
  94. 	margin-left:-55px;
  95.  
  96.  
  97.   }
  98. #print
  99. {float:left;
  100.  
  101.   }
  102. #tout{
  103. 	float:left;
  104. }
  105. #menuDeroulant{
  106.    list-style-type: none;
  107.    margin: 0;
  108.    padding: 0;
  109.    border: 0;
  110.    position: absolute;
  111.    top:0;
  112.    left:0;
  113.    }
  114.  
  115. #menuDeroulant li{
  116.    float: left;
  117.    width: 80px;
  118. 	 border: 0;
  119. }
  120.  
  121. #menuDeroulant li a:link{
  122.    display: block;
  123.   	margin: 0;
  124.    padding: 4px  8px;
  125.  
  126.    text-decoration: none;   
  127. }
  128. #menuDeroulant li a:visited{
  129. 	 display: block;
  130.    height: 1%;
  131.    color: #90FÒ;
  132.  
  133.    margin: 0;
  134.    padding: 4px  8px;
  135.    border-right: 0px solid;
  136.    text-decoration: none; 
  137.    }
  138. /*#menuDeroulant li a:hover{
  139.    background-color:#90C;
  140. }
  141. */#menuDeroulant li a:active{
  142.    background-color:#F90;
  143. }
  144.  
  145. #menuDeroulant  .sousMenu{
  146.    display: none;
  147.   list-style-type: none;
  148.    margin-left: 0px;
  149.  margin-top:-20px;
  150.  
  151. }
  152.  
  153.  
  154.  
  155. #menuDeroulant  .sousMenu li a:hover{
  156.    background-color:#F90;
  157. }
  158.  
  159. #menuDeroulant li:hover> .sousMenu{
  160.    display: block;
  161. }
  162.  
  163. #cadre{
  164. height:640px;
  165. width:480px;
  166.  
  167. }
  168.  
  169.  
  170.  
  171. a {
  172. color:#90F;
  173. }
  174.  
  175.  
  176.  
  177. #page {
  178. position:fixed !important;
  179. position:absolute;
  180. top:0%;
  181. left:25%;
  182. margin-top:1px;
  183. margin-left:;
  184. width:1024px;
  185. height:768px;
  186. background:url(fdiapo.jpg);
  187. }




et merci encore de l'interet que tu portes à mon probleme
Expert Programmation

J'imagine que ton flash est celui qui est dans le div apDiv1.
Tu peux faire un javascript (qui sera appelé par ton lien) de la forme:
  1. function remFlash() {
    

  2.    flash = document.getElementById('apDiv1');
    

  3.    ref = document.body;
    

  4.    ref.removeChild(flash);
    

  5.    return false;
    

  6. }


Par contre fait attention, tu as un div "page" qui traine avant ton body.

bonjour et merci
Mais en fait , je ne sais pas si je l'ai bien incorporé, mais ça ne change rien : l'animation flash ne disparait pas quand je passe sur mes vignettes ms elle vient se placer sous le diaporama
J'ai placé mon anim flash ds la div 'grandeImageDiv'
Voila, je me permets de t'envoyer mon code si jamais tu trouves ce serait super


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head>
  3. <title>cvp1</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <link rel="stylesheet" media="screen" type="text/css" title="70" href="pbookprint.css" />
  6. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. <!--
  10. function MM_swapImgRestore() { //v3.0
  11.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  12. }
  13.  
  14. function MM_findObj(n, d) { //v4.01
  15.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  16.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  17.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  18.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  19.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  20. }
  21.  
  22. function MM_swapImage() { //v3.0
  23.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  24.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  25. }
  26.  
  27. //-->
  28. </script>
  29. </script>
  30. <style type="text/css">
  31. <!--
  32. #apDiv1 {
  33. 	position:absolute;
  34. 	left:749px;
  35. 	top:-12px;
  36. 	width:324px;
  37. 	height:526px;
  38. 	z-index:1;
  39. }
  40. #apDiv2 {
  41. 	position:absolute;
  42. 	left:136px;
  43. 	top:343px;
  44. 	width:123px;
  45. 	height:119px;
  46. 	z-index:2;
  47.  
  48. }
  49. #apDiv3 {
  50. 	position:absolute;
  51. 	left:200px;
  52. 	top:192px;
  53. 	width:739px;
  54. 	height:500px;
  55. 	z-index:2;
  56. }
  57. -->
  58. </style>
  59. <style type="text/css" media="screen">
  60.  
  61. #tout {
  62. 	width:904px;
  63. 	margin-left:150px;
  64. 	float:left;
  65. 	}	
  66.  
  67. #grandeImageDIV {
  68. 	width:904px;
  69. 	height:480px;
  70. 	margin-left:50px;
  71.  
  72.  
  73. }
  74. #legende_complete{
  75. 	width:838px;
  76. 	height:24px;
  77. 	text-align:center;
  78.  
  79. 	font-family:"Arial black", Helvetica, sans-serif;
  80. 	font-size:12px;
  81.    color:#ffffff;
  82.  
  83. }
  84.  
  85. #boutonGauche {
  86. 	background-color:#ff00cc;
  87. 	height:48px;
  88. 	width:32px;
  89. 	cursor:pointer;
  90. 	float:left;
  91.  
  92. }
  93. #boutonDroit {
  94. 	background-color:#9900ff;
  95. 	width:32px;
  96. 	height:48px;
  97. 	cursor:pointer;
  98. 	float:left;
  99.  
  100. }
  101.  
  102.  
  103. #masqueVign {
  104. 	height:48px;
  105. 	background-color:#ff9900;
  106. 	width:775px;
  107. 	overflow:hidden;
  108. 	position:relative;
  109. 	float:left;
  110.  
  111. }
  112.  
  113. #lesVignettes {
  114. 	font-family:Arial, Helvetica, sans-serif;
  115. 	position:absolute;
  116. 	height:48px;
  117. }
  118.  
  119.  
  120. </style>
  121. <script type="text/javascript">
  122.  
  123. <!--
  124.  
  125. function MM_preloadImages() { //v3.0
  126.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  127.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  128.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  129. }
  130. //-->
  131. </script>
  132. <div id="page">
  133.  
  134. <body onload="MM_preloadImages('images/baccueil-ro.png','images/faccueilro.png','images/fcvro.png','images/fbook-ro.png','images/bbookrder.png')">
  135. <div id="apDiv1">
  136.   <object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="280" height="500">
  137.     <param name="movie" value="flash/arabesque haut.swf" />
  138.     <param name="quality" value="high" />
  139.     <param name="wmode" value="transparent" />
  140.     <param name="swfversion" value="6.0.65.0" />
  141.     <!-- 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. -->
  142.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
  143.     <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
  144.     <!--[if !IE]>-->
  145.     <object type="application/x-shockwave-flash" data="flash/arabesque haut.swf" width="280" height="500">
  146.       <!--<![endif]-->
  147.       <param name="quality" value="high" />
  148.       <param name="wmode" value="transparent" />
  149.       <param name="swfversion" value="6.0.65.0" />
  150.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
  151.       <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
  152.       <div>
  153.         <h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
  154.         <p><a href="<a href="http://www.adobe.com/go/getflashplayer" target="_blank">http://www.adobe.com/go/getflashplayer</a>"><img src="<a href="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" target="_blank">http://www.adobe.com/images/shared/download_buttons/get...</a>" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
  155.       </div>
  156.       <!--[if !IE]>-->
  157.     </object>
  158.     <!--<![endif]-->
  159.   </object>
  160. </div>
  161. <div id="baccueil"><a href="index.html"><img src="images/faccueil.png" alt="accueil" width="157" height="151" border="0" id="accueil" onmouseover="MM_swapImage('accueil','','images/faccueilro.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
  162.  
  163. <div id="bcv"><a href="pcv .html"><img src="images/fcv.png" alt="cv" width="150" height="151" border="0" id="cv" onmouseover="MM_swapImage('cv','','images/fcvro.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
  164.  
  165. <div id="BBOOKOK"><a href="pbookok.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/bbookrder.png',1)"><img src="images/book-.png" alt="book" width="121" height="121" border="0" id="Image15" /></a></div>
  166. <div id="floatstop"/></div>
  167.  
  168.  
  169.  
  170.  
  171.  
  172. <div id="boutvert">
  173.   <ul id="menuDeroulant">
  174.    <li ><a href="#"><img src="images/roll-over-vert.png"  border="0" align="right" /></a>
  175.      <ul class="sousMenu">
  176.       <li id="text"><a href="pbookprint.html">Print</a></li>
  177.       <li id="text"><a href="pweb.html">Web</a></li>
  178.       <li id="text"><a href="pbookpaint.html">Paint </a></li>
  179.       <li id="text"><a href="pbookdesign urbain.html">Design urbain </a></li>
  180.       </ul>
  181.    </li>
  182.  
  183. </ul>
  184. </div>
  185. <script type="text/javascript">
  186. // <![CDATA[
  187.  
  188. 	var maGalerie = new Array;
  189.  
  190. maGalerie[0] =  ['FNFR', 'booked704_480/petites/dc_cata.png', 'booked704_480/grandes/dc_cata.png','Catalogue exposition "Leçons de choses"','2004'];
  191. maGalerie[1] =  ['FNFR', 'booked704_480/petites/1dcp.png', 'booked704_480/grandes/1dcp.png','dépliant','2004'];
  192. maGalerie[2] =  ['FNFR', 'booked704_480/petites/cahiers_animer.png', 'booked704_480/grandes/cahiers_animer.png','Les Cahiers d Animer','2004'];
  193. maGalerie[3] =  ['FNFR', 'booked704_480/petites/animer.png', 'booked704_480/grandes/animer.png','Journal de la FNFR','2003 2004'];
  194. maGalerie[4] =  ['FNFR', 'booked704_480/petites/le-fabu_festin.png', 'booked704_480/grandes/le-fabu_festin.png','Affiche-Carte Postale','2003'];
  195. maGalerie[5] =  ['FNFR', 'booked704_480/petites/bafa.png', 'booked704_480/grandes/bafa.png','Brochure Jeunesse','2004'];
  196. maGalerie[6] =  ['FNFR', 'booked704_480/petites/scs.png', 'booked704_480/grandes/scs.png','Journal Sciences Culture Société','2004'];
  197. maGalerie[7] =  ['CHEVIGNON', 'booked704_480/petites/chev.png', 'booked704_480/grandes/chev.png','Rapport annuel','1990'];
  198. maGalerie[8] =  ['MONOP', 'booked704_480/petites/monop2.png', 'booked704_480/grandes/monop2.png','Dépliant 2 volets','1994'];
  199. maGalerie[9] =  ['MONOP', 'booked704_480/petites/monop.png', 'booked704_480/grandes/monop.png','Dépliant 3 volets','1994'];
  200. maGalerie[10] =  ['RENAULT VI 1', 'booked704_480/petites/renault.png', 'booked704_480/grandes/renault.png','Livre des Normes','1993'];
  201. maGalerie[11] =  ['RENAULT VI', 'booked704_480/petites/renault2.png', 'booked704_480/grandes/renault2.png','carte de voeux','1993'];
  202. maGalerie[12] =  ['Legende 3', 'booked704_480/petites/moul1.png', 'booked704_480/grandes/moul1.png','Aides de visite','1996'];
  203. maGalerie[13] =  ['Legende 4', 'booked704_480/petites/moul2.png', 'booked704_480/grandes/moul2.png','Aides de visite','1997'];
  204. maGalerie[14] =  ['Legende 5', 'booked704_480/petites/echos2.png', 'booked704_480/grandes/echos2.png','N° spéciaux','1983'];
  205. maGalerie[15] =  ['Legende 6', 'booked704_480/petites/echos1.png', 'booked704_480/grandes/echos1.png','N° spéciaux','1984'];
  206. maGalerie[16] =  ['Legende 7', 'booked704_480/petites/unesco.png', 'booked704_480/grandes/unesco.png','Editions en trois langues','1987'];
  207. maGalerie[17] =  ['Legende 8', 'booked704_480/petites/dessanges.png', 'booked704_480/grandes/dessanges.png','Catalogue','1983 1984 1985'];
  208.  
  209.  
  210.  
  211.  
  212.  
  213. 	function f_allergauche(contenu,distance){
  214.  
  215. 		var bloc = document.getElementById(contenu);
  216. //
  217. 		var positionActuelle =  bloc.offsetLeft; // 0
  218. //		
  219. 		var largeurContenu = bloc.clientWidth; // 1280
  220. //		var largeurContenu = bloc.style.width;
  221. //		
  222. 		var largeurMasque = document.getElementById('masqueVign').clientWidth; // 633
  223. //		
  224. 		var limite = largeurMasque - largeurContenu; 
  225. //		
  226. 		if( positionActuelle != 0 ){
  227.  
  228. 			bloc.style.left= (positionActuelle + distance)+'px';
  229. 		} // Fin de la conditionnelle
  230.  
  231. 	} // Fin de la fonction
  232.  
  233. //---------------------------------------------------------------------------------------------------		
  234.  
  235. 	function f_allerdroite(contenu,distance){
  236.  
  237. 		var bloc = document.getElementById(contenu);
  238. //
  239. 		var positionActuelle =  bloc.offsetLeft; // 0
  240. //		
  241. 		var largeurContenu = bloc.clientWidth; // 1280
  242. //		var largeurContenu = bloc.style.width;
  243. //		
  244. 		var largeurMasque = document.getElementById('masqueVign').clientWidth; // 633
  245. //		
  246. 		var limite = largeurMasque - largeurContenu; 
  247. //		
  248. 		if( limite < positionActuelle ){
  249.  
  250. 			bloc.style.left= (positionActuelle - distance)+'px';
  251. 		} // Fin de la conditionnelle
  252.  
  253. 	} // Fin de la fonction
  254.  
  255. //---------------------------------------------------------------------------------------------------
  256.  
  257. function f_affichergrandeImage(numeroLigne){
  258.  
  259. 	document.getElementById('grandeImage').src = maGalerie[numeroLigne][2];
  260. 	document.getElementById('legende_complete').innerHTML = maGalerie[numeroLigne][0] + ' - ' + maGalerie[numeroLigne][3] + ' - ' + maGalerie[numeroLigne][4];
  261.  
  262. }
  263.    function remFlash() {
  264.     flash = document.getElementById('grandeImageDiv');
  265.     ref = document.body;
  266.     ref.removeChild(flash);
  267.     return false;
  268.   }
  269. //---------------------------------------------------------------------------------------------------
  270. // ]]>
  271. </script>
  272.  
  273.  
  274.  
  275.  
  276.  
  277.  
  278. <div id="tout">
  279.  
  280.  
  281. <div id="grandeImageDIV" ><img id="grandeImage" src=""  /> 
  282.   <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="280">
  283.     <param name="movie" value="flash/book.swf" />
  284.     <param name="quality" value="high" />
  285.     <param name="wmode" value="transparent" />
  286.     <param name="swfversion" value="9.0.45.0" />
  287.     <!-- 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. -->
  288.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
  289.     <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
  290.     <!--[if !IE]>-->
  291.     <object type="application/x-shockwave-flash" data="flash/book.swf" width="320" height="280">
  292.       <!--<![endif]-->
  293.       <param name="quality" value="high" />
  294.       <param name="wmode" value="transparent" />
  295.       <param name="swfversion" value="9.0.45.0" />
  296.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
  297.       <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
  298.       <div>
  299.         <h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
  300.         <p><a href="<a href="http://www.adobe.com/go/getflashplayer" target="_blank">http://www.adobe.com/go/getflashplayer</a>"><img src="<a href="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" target="_blank">http://www.adobe.com/images/shared/download_buttons/get...</a>" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
  301.       </div>
  302.       <!--[if !IE]>-->
  303.     </object>
  304.     <!--<![endif]-->
  305.   </object>
  306. </div>
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313.  
  314.     <div id="legende_complete"></div>
  315.     <div id="boutonGauche" onclick="f_allergauche('lesVignettes',71);" onselectstart="return false;" 
  316.          style="-moz-user-select:none;"><img src="images/fleched.png" alt="" width="35" height="48" /></div>
  317.  
  318. <div id="masqueVign" onselectstart="return false;" 
  319.          style="-moz-user-select:none;">
  320.  
  321.     	<div id="lesVignettes" style="left:0px;width:1280px;"> 
  322.         <script type="text/javascript">
  323. 		// <![CDATA[
  324.  
  325. 		var nombreLignes = maGalerie.length; // 20
  326.  
  327.         for(var i=0 ; i < nombreLignes ; i++ ){
  328.  
  329. 		var img = '<img src="'+ maGalerie[i][1] + '" alt="manquante" ';
  330. 		    img += 'onmouseover="f_affichergrandeImage(' + i + '); return false;" />';
  331.  
  332. 		document.write(img);
  333. 		var newlargeur=((i+1)*71) + 'px';
  334. 		document.getElementById('lesVignettes').style.width=newlargeur;
  335. 		}
  336. 		//on peut mettre ce code en bas quand on ades images lourdes(avant body)
  337. 		//Ajouter ici des effets visuels : fondu, redimentionnement
  338.  
  339.  
  340. 		</script>
  341.         </div>
  342.  
  343.   </div>
  344.  
  345.  
  346.     <div id="boutonDroit" onclick="f_allerdroite('lesVignettes',71);" onselectstart="return false;" 
  347.          style="-moz-user-select:none;"><img src="images/flecheg.png" alt="" /></div>
  348.  
  349.  
  350.  
  351.  
  352.  
  353. </div>
  354.  
  355.  
  356.  
  357. </div>
  358. <script type="text/javascript">
  359. <!--
  360. swfobject.registerObject("FlashID2");
  361. swfobject.registerObject("FlashID");
  362. //-->
  363. </script>
  364. </body>
  365. </html>

Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde