Problème avec une découpe d'un design

Répondre
zOy
le 25/04/2009 à 02:05
zOy
Déconnecté
SIAD Paris
Bonjour, je suis actuellement sur un site d'un groupe de musique, mais j'ai un problème sous firefox.

voiçi mon problème ... il est assez flagrand ^^

http://ns10.freeheberg.com/~mismos/

voiçi mon codage de toute la page :

index.php
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="facebox.css" media="screen" rel="stylesheet" type="text/css" />
  6. <script src="jquery.js" type="text/javascript"></script>
  7. <script src="facebox.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. jQuery(document).ready(function($) {
  10. $('a[rel*=facebox]').facebox({
  11. loading_image : 'loading.gif',
  12. close_image : 'closelabel.gif'
  13. })
  14. })
  15. </script>
  16. <script type="text/javascript" src="mootoolsrelease57.js"></script>
  17. <script type="text/javascript">
  18.    var effects = new Array();
  19.    window.onload=function(){
  20.       var els = document.getElementsByClassName('cool');
  21.       for (var i=0; i<els.length; i++){
  22.          els[i].id='cool'+i;
  23.          effects[els[i].id]=els[i].effect('font-size', {duration: 400, transition: fx.expoOut});
  24.          els[i].addEvent('mouseover', function(){effects[this.id].emphasize()});
  25.          els[i].addEvent('mouseout', function(){effects[this.id].deemphasize()});
  26.       }
  27.    };
  28.    fx.Style.implement({
  29. emphasize: function(){
  30. this.clearTimer();
  31. this.custom(parseInt(this.el.getStyle('font-size')), 24);
  32. },
  33. deemphasize: function(){
  34. this.clearTimer();
  35. this.custom(parseInt(this.el.getStyle('font-size')), 12);
  36.       }
  37.    });
  38. </script>
  39. <SCRIPT LANGUAGE="JavaScript">
  40. /*
  41. on precharge les images de substitution
  42. */
  43. i1 = new Image;
  44. i1.src = "28.jpg";
  45. i2 = new Image;
  46. i2.src = "28_jose.jpg";
  47. i3 = new Image;
  48. i3.src = "28_peter.jpg";
  49. i4 = new Image;
  50. i4.src = "28_dom.jpg";
  51. i5 = new Image;
  52. i5.src = "28_mika.jpg";
  53. i6 = new Image;
  54. i6.src = "28_nico.jpg";
  55. i7 = new Image;
  56. i7.src = "28_richard.jpg";
  57. i8 = new Image;
  58. i8.src = "28_stephanie.jpg";
  59. </SCRIPT>
  60. <style>
  61. .cool {
  62.       padding:12px;
  63.       line-height:48px;
  64.       background:transparent;
  65.       font-size:12px;
  66.       margin:auto;
  67.       vertical-align:middle;
  68.       color:#666;
  69.       text-decoration:none;
  70.    }
  71.    .cool:hover {
  72.       color:#000;
  73.       background:none;
  74.    }
  75.    #nav {
  76.       text-align:center;
  77.    }
  78.    h1 {
  79. text-align:center;
  80.    }
  81. body {
  82.    background-image: url(fond.png);
  83. }
  84. </style>
  85. </head>
  86.  
  87. <body>
  88. <table width="100%" border="0">
  89. <tr>
  90. <td> </td>
  91. </tr>
  92. <tr>
  93. <td><table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  94. <tr>
  95. <td width="700" height="500" valign="top"><div id="nav"> <a href="#" class="cool">Accueil</a><a href="#" class="cool">Bio</a><a href="#" class="cool">Press</a> <a href="videos.html" class="cool">Vidéos</a><a href="#" class="cool">Photos</a> <a href="#" class="cool">Le mur</a> <a href="contact.html" class="cool">Contact</a> <a href="#" class="cool">Bonus</a></div>
  96. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  97. <tr>
  98. <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
  99. <tr>
  100. <td><img src="1.jpg" width="393" height="59" /></td>
  101. <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
  102. <tr>
  103. <td><img src="2.jpg" width="62" height="23" /></td>
  104. </tr>
  105. <tr>
  106. <td><a href="#" onMouseOver="nomimage1.src=i6.src" onMouseOut="nomimage1.src='28.jpg'"><img src="3.jpg" width="62" height="36" border="0" /></a></td>
  107. </tr>
  108. </table></td>
  109. <td><img src="4.jpg" width="245" height="59" /></td>
  110. </tr>
  111. </table></td>
  112. </tr>
  113. <tr>
  114. <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
  115. <tr>
  116. <td><img src="5.jpg" width="96" height="91" /></td>
  117. <td><a href="bio_richard.html" rel="facebox" onMouseOver="nomimage1.src=i7.src" onMouseOut="nomimage1.src='28.jpg'"><img src="6.jpg" width="74" height="91" border="0" /></a></td>
  118. <td><a href="bio_dom.html" rel="facebox" onMouseOver="nomimage1.src=i4.src" onMouseOut="nomimage1.src='28.jpg'"><img src="7.jpg" width="87" height="91" border="0" /></a></td>
  119. <td><img src="8.jpg" width="136" height="91" /></td>
  120. <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
  121. <tr>
  122. <td><a href="bio_nico.html" rel="facebox" onMouseOver="nomimage1.src=i6.src" onMouseOut="nomimage1.src='28.jpg'"><img src="9.jpg" width="62" height="58" border="0" /></a></td>
  123. </tr>
  124. <tr>
  125. <td><a href="bio_nico.html" rel="facebox" onMouseOver="nomimage1.src=i6.src" onMouseOut="nomimage1.src='28.jpg'"><img src="10.jpg" width="62" height="33" border="0" /></a></td>
  126. </tr>
  127. </table>
  128. </td>
  129. <td><a href="bio_mika.html" rel="facebox" onMouseOver="nomimage1.src=i5.src" onMouseOut="nomimage1.src='28.jpg'"><img src="11.jpg" width="113" height="91" border="0" /></a></td>
  130. <td><img src="12.jpg" width="132" height="91" /></td>
  131. </tr>
  132. </table></td>
  133. </tr>
  134. <tr>
  135. <td><img src="13.jpg" width="393" height="39" /><img src="14.jpg" width="38" height="39" /><a href="bio_peter.html" rel="facebox" onMouseOver="nomimage1.src=i3.src" onMouseOut="nomimage1.src='28.jpg'"><img src="15.jpg" width="77" height="39" border="0" /></a><img src="16.jpg" width="60" height="39" /><img src="17.jpg" width="132" height="39" /></td>
  136. </tr>
  137. <tr>
  138. <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
  139. <tr>
  140. <td><img src="18.jpg" width="91" height="102" /></td>
  141. <td><a href="bio_jose.html" rel="facebox" onMouseOver="nomimage1.src=i2.src" onMouseOut="nomimage1.src='28.jpg'"><img src="19.jpg" width="100" height="102" border="0" /></a></td>
  142. <td><img src="20.jpg" width="36" height="102" /></td>
  143. <td><a href="bio_stephanie.html" rel="facebox" onMouseOver="nomimage1.src=i8.src" onMouseOut="nomimage1.src='28.jpg'"><img src="21.jpg" width="128" height="102" border="0" /></a></td>
  144. <td><img src="22.jpg" width="82" height="102" /></td>
  145. <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  146. <tr>
  147. <td><a href="bio_peter.html" rel="facebox" onMouseOver="nomimage1.src=i3.src" onMouseOut="nomimage1.src='28.jpg'"><img src="23.jpg" width="71" height="61" border="0" /></a></td>
  148. </tr>
  149. <tr>
  150. <td><img src="24.jpg" width="71" height="41" /></td>
  151. </tr>
  152. </table></td>
  153. <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  154. <tr>
  155. <td><img src="25.jpg" width="60" height="61" /></td>
  156. </tr>
  157. <tr>
  158. <td><img src="26.jpg" width="60" height="41" /></td>
  159. </tr>
  160. </table></td>
  161. <td><img src="27.jpg" width="132" height="102" /></td>
  162. </tr>
  163. </table></td>
  164. </tr>
  165. <tr>
  166. <td><IMG SRC="28.jpg" BORDER=0 HSPACE=0 VSPACE=0 NAME="nomimage1"><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>
  167. <div align="center">
  168. <object type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3=mp3=mp3/1.mp3|mp3/2.mp3|mp3/3.mp3|mp3/4.mp3|mp3/5.mp3|mp3/6.mp3|mp3/7.mp3|mp3/8.mp3&autostart=1&autoreplay=1" width="240" height="20">
  169. <param name="wmode" value="transparent" />
  170. <param name="movie" value="dewplayer-multi.swf?mp3=mp3/1.mp3|mp3/2.mp3|mp3/3.mp3|mp3/4.mp3|mp3/5.mp3|mp3/6.mp3|mp3/7.mp3|mp3/8.mp3&autostart=1&autoreplay=1" />
  171. </object>
  172. </div></td>
  173. </tr>
  174. </table></td>
  175. </tr>
  176. </table></td>
  177. </tr>
  178. </table>
  179. <script type="text/javascript">
  180. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  181. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  182. </script>
  183. <script type="text/javascript">
  184. var pageTracker = _gat._getTracker("UA-4230547-1");
  185. pageTracker._initData();
  186. pageTracker._trackPageview();
  187. </script>
  188. </body>
  189. </html>
  190.  
LA GLOBULE
le 25/04/2009 à 12:30
LA GLOBULE
Déconnecté
111 111 111 x 111 111 111 = 12 345 678 987 654 321
Pourquoi ne pas utiliser une image unique et faire une map ?
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Bretagne - php - Moto - Kit graphique