Se connecter avec
S'enregistrer | Connectez-vous

Lightbox sur aera shape

Dernière réponse : dans Programmation

Bonjour à tous,

Je suis confronté à un petit problème lors de la réalisation de mon site/portfolio.

en gros, j'aimerais utiliser lightbox pour l'affichage de ma galerie d'images, je l'avais fais sans problèmes sur mon site précédent, (la j'avais un tableau avec des miniatures à l'intérieur qui servaient de lien vers les images)
mais cette fois ci j'utilise des "aera shape" , des zones cliquable sur l'écran tout simplement, qui servent de liens vers mes images.

Impossible de faire fonctionner lightbox, lorsque je click sur la zone, l'écran s'assombrit mais l'image ne s'ouvre pas (sans lightbox l'image apparait dans un nouvel onglet)

étant spécialisé dans la 3D et non dans le web, je bloque la, voici mon code, l'un de vous saurait il m'aider ? Merci .


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
  2. <html>
  3. <head>
  4. <title>Graphline - portfolio - 3D gallery</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="keywords" content="3d , 3ds max , 3d max , modélisation , illustrator , photoshop , sony vegas , sound forge , dessin , sculpture , photos , photo"/>
  7. <meta name="description" content="illustrator - 2D"/>
  8. <meta name="Creation_Date" content="mars 2010"/> 
  9. <meta name="robots" content="index, follow, all"/>
  10. <meta name="identifier-url" content="<a href="http://www.Graphline.be" target="_blank">www.Graphline.be</a>"/>
  11. <meta name="revisit-after" content="5 days"/>
  12. <meta name="author" content="Grégoire Arnaud"/>
  13. <meta name="rating" content="general"/>
  14.  
  15. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  16. <script type="text/javascript" src="js/prototype.js"></script>
  17. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  18. <script type="text/javascript" src="js/lightbox.js"></script>
  19.  
  20. <script language="JavaScript">
  21. <!--
  22. function MM_findObj(n, d) { //v4.01
  23.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  24.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  25.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  26.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  27.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  28. }
  29. function MM_swapImage() { //v3.0
  30.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  31.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  32. }
  33. function MM_swapImgRestore() { //v3.0
  34.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  35. }
  36.  
  37. function MM_preloadImages() { //v3.0
  38.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  39.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  40.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  41. }
  42.  
  43. //-->
  44. </script>
  45. </head>
  46. <body bgcolor="#50637A" onLoad="MM_preloadImages('portfolio_r2_c1_f2.jpg','portfolio_r2_c2_f2.jpg','portfolio_r2_c3_f2.jpg','portfolio_r2_c4_f2.jpg');">
  47. <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
  48. <!-- fwtable fwsrc="BASE.png" fwbase="portfolio.jpg" fwstyle="Dreamweaver" fwdocid = "1963897273" fwnested="0" -->
  49.   <tr>
  50.    <td><img src="spacer.gif" width="166" height="1" border="0" alt=""></td>
  51.    <td><img src="spacer.gif" width="167" height="1" border="0" alt=""></td>
  52.    <td><img src="spacer.gif" width="112" height="1" border="0" alt=""></td>
  53.    <td><img src="spacer.gif" width="166" height="1" border="0" alt=""></td>
  54.    <td><img src="spacer.gif" width="413" height="1" border="0" alt=""></td>
  55.    <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  56.   </tr>
  57.  
  58.   <tr>
  59.    <td colspan="5"><img name="portfolio_r1_c1" src="portfolio_r1_c1.jpg" width="1024" height="145" border="0" alt=""></td>
  60.    <td><img src="spacer.gif" width="1" height="145" border="0" alt=""></td>
  61.   </tr>
  62.   <tr>
  63.    <td><a href="index.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c1','','portfolio_r2_c1_f2.jpg',1);"><img name="portfolio_r2_c1" src="portfolio_r2_c1.jpg" width="166" height="44" border="0" alt=""></a></td>
  64.    <td><a href="portfolio.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c2','','portfolio_r2_c2_f2.jpg',1);"><img name="portfolio_r2_c2" src="portfolio_r2_c2.jpg" width="167" height="44" border="0" alt=""></a></td>
  65.    <td><a href="cv.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c3','','portfolio_r2_c3_f2.jpg',1);"><img name="portfolio_r2_c3" src="portfolio_r2_c3.jpg" width="112" height="44" border="0" alt=""></a></td>
  66.    <td><a href="contact.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c4','','portfolio_r2_c4_f2.jpg',1);"><img name="portfolio_r2_c4" src="portfolio_r2_c4.jpg" width="166" height="44" border="0" alt=""></a></td>
  67.    <td rowspan="2"><img src="3dgallerydroite.jpg" width="413" height="755" border="0" usemap="#Map2"></td>
  68.    <td><img src="spacer.gif" width="1" height="44" border="0" alt=""></td>
  69.   </tr>
  70.   <tr>
  71.    <td colspan="4"><img src="3dgallery-gauche.jpg" width="611" height="711" border="0" usemap="#Map"></td>
  72.    <td><img src="spacer.gif" width="1" height="711" border="0" alt=""></td>
  73.   </tr>
  74. </table>
  75.  
  76. <map name="Map">
  77. <area shape="rect" coords="478,676,535,700" href="portfolio.html">
  78. <area shape="rect" coords="56,103,112,264" href="3D Gallery/perso_TFA.jpg" rel="lightbox" alt="tfa">
  79. <area shape="rect" coords="159,101,217,264" href="3D Gallery/maison.jpg">
  80. <area shape="rect" coords="264,101,322,264" href="3D Gallery/peppertbot.jpg">
  81. <area shape="rect" coords="368,101,425,264" href="3D Gallery/Seau.jpg">
  82. <area shape="rect" coords="473,102,530,265" href="3D Gallery/Perso_Le Souffle.jpg">
  83. <area shape="rect" coords="577,102,655,264" href="3D Gallery/Le Puit.jpg">
  84. </map>
  85. <map name="Map2"><area shape="rect" coords="-2,146,24,309" href="3D Gallery/Le Puit.jpg">
  86. </map></body>
  87. </html>

Autres pages sur : lightbox aera shape

Lassé par la pub ? Créez un compte

Salut OmaR,

J'utilise la dernière version, c'est à dire la 2.04.
avant de poster je me suis renseigner sur plusieurs forum biensure, et j'ai lu plusieurs personnes qui faisaient fonctionner lightbox sur des aera donc je suis presque sûr que c'est possible ;) 

Je viens de résoudre mon problème,

Il fallait rajouter une commande à la ligne de code du lien vers les image :

<area shape="rect" coords="55,103,111,264" href="3D Gallery/perso_TFA.jpg" alt="push for service!" rel="lightbox" title="Perso" />

Au cas ou ca pourra servir à quelqu'un ;) 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde