Prob Zoom Image

Prob Zoom Image - PHP - Programmation

Marsh Posté le 26-06-2007 à 11:23:54    

Bonjour,
voilà mon problème, j'ai trouvé un bon script pour fair un zoom sur une image. Dans une page html le code marche bien, mais dès que je le met dans la page php de mon site les problèmes commencent. Il y a apparement des érreures, si je remplace les ' par des " dans le script la page s'affiche mais le code ne fonctionne plus.
voilà l'exemple du code dans une page html qui fonctionne : http://www.besomeone.fr/site/zoom/zoom.html
et voilà la page php avec le même code dedans et donc qui ne fonctionne pas : http://www.besomeone.fr/site/zoom/d-h.php
voilà le code du script dans la page html :  

Code :
  1. <html>
  2. <head><title>Zoom sur une image by Neolien</title>
  4. <body>
  6. <style type="text/css">
  8. #showimage{
  9. z-index: 2;
  10. position:absolute;
  11. visibility:hidden;
  12. top:0;
  13. margin-left:100;
  14. margin-top:0;
  15. border: 1px solid gray;
  16. }
  18. #dragbar{
  19. cursor: hand;
  20. cursor: pointer;
  21. background-color: #f2f2f2;
  22. min-width: 100px; /*NS6 style to overcome bug*/
  23. }
  25. #dragbar #closetext{
  26. font-weight: bold;
  27. margin-right: 1px;
  28. height : 18px;
  29. color:#000000;
  30. }
  31. .photo2-sej{width: 93px;height : 145px;}
  32. .lien { color:#1B7FBB; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:none;}
  33. .lien:hover { color:#c2c2c2; font-family:arial; font-size:12px; font-weight: bold; text-decoration:underline;}
  34. .visiter { color:#777777; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:underline;}
  37. </style>
  38. <SCRIPT type="text/javascript" title="Promovacances.com">
  40. var ie=document.all
  41. var ns6=document.getElementById&&!document.all
  43. function ietruebody(){
  44. return (document.compatMode!="BackCompat" )? document.documentElement : document.body
  45. }
  47. function zoom2(which, e, position, imgwidth, imgheight){
  48. if (ie||ns6){
  49. crossobj=document.getElementById? document.getElementById("showimage" ) : document.all.showimage
  50. // ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE
  51. crossobj.style.left=280+"px"
  52. crossobj.style.top=80+"px"
  54. crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">&raquo; Fermer</span></div><img src="'+which+'">'
  55. crossobj.style.visibility="visible"
  56. return false
  57. }
  58. else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
  59. return true
  60. }
  62. function closepreview(){
  63. crossobj.style.visibility="hidden"
  64. }
  66. function drag_drop(e){
  67. if (ie&&dragapproved){
  68. crossobj.style.left=tempx+event.clientX-offsetx+"px"
  69. crossobj.style.top=tempy+event.clientY-offsety+"px"
  70. }
  71. else if (ns6&&dragapproved){
  72. crossobj.style.left=tempx+e.clientX-offsetx+"px"
  73. crossobj.style.top=tempy+e.clientY-offsety+"px"
  74. }
  75. return false
  76. }
  78. function initializedrag(e){
  79. if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar" ){
  80. offsetx=ie? event.clientX : e.clientX
  81. offsety=ie? event.clientY : e.clientY
  83. tempx=parseInt(crossobj.style.left)
  84. tempy=parseInt(crossobj.style.top)
  86. dragapproved=true
  87. document.onmousemove=drag_drop
  88. }
  89. }
  91. document.onmousedown=initializedrag
  92. document.onmouseup=new Function("dragapproved=false" )
  95. </SCRIPT>
  97. <div id="showimage"></div>
  99.   <tr>
  100.     <td align=center>
  101. <SCRIPT type="text/javascript" title="Promovacances.com">
  102. // position loupes
  103. var navig= navigator.appCodeName;
  104. //alert(navig);
  105. if (document.all){
  106. document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  107. document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
  108. document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  109. }
  110. if (!document.all){
  111. document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
  112. document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:39;position:absolute;visibility:visible;)</style>');
  113. document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
  114. }
  115. if (ns6){
  116. document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  117. document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
  118. document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  119. }
  121. </SCRIPT>
  123. <div id="showloupe1"><a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)"></a></div>
  124. <a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)">
  125. <IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16897.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
  127. <div id="showloupe1"><a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)"></a></div>
  128. <a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)">
  129. <IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16917.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
  132. </body>
  133. </html>


 
donc si vous pouviez m'aider, me dire ce qui ne va pas et les modifications à apporter pour que le script marche dans ma page php ça serait super.
Je n'y connais pas grand chose en programmation , je bidouille...
 
D'avance merci.
 
voilà le code de la page php :  
 

Code :
  1. <?php
  3. include ("menu.php" );
  5. echo '<tr>
  6.                <td background="fond.jpg" valign="top">
  7.                <table style="border-collapse: collapse;" id="table9" border="0" cellpadding="0" width="100%">
  8.                 <tbody><tr>
  9.                  <td width="14">&nbsp;</td>
  10.                  <td>
  11.                  <font face="Arial" size="2">
  12.               <center><img src="d-h.jpg" border=0>
  13. <br><br><br>
  19. <style type="text/css">
  21. #showimage{
  22. z-index: 2;
  23. position:absolute;
  24. visibility:hidden;
  25. top:0;
  26. margin-left:100;
  27. margin-top:0;
  28. border: 1px solid gray;
  29. }
  31. #dragbar{
  32. cursor: hand;
  33. cursor: pointer;
  34. background-color: #f2f2f2;
  35. min-width: 100px; /*NS6 style to overcome bug*/
  36. }
  38. #dragbar #closetext{
  39. font-weight: bold;
  40. margin-right: 1px;
  41. height : 18px;
  42. color:#000000;
  43. }
  44. .photo2-sej{width: 93px;height : 145px;}
  45. .lien { color:#1B7FBB; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:none;}
  46. .lien:hover { color:#c2c2c2; font-family:arial; font-size:12px; font-weight: bold; text-decoration:underline;}
  47. .visiter { color:#777777; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:underline;}
  50. </style>
  51. <SCRIPT type="text/javascript" title="Promovacances.com">
  53. var ie=document.all
  54. var ns6=document.getElementById&&!document.all
  56. function ietruebody(){
  57. return (document.compatMode!="BackCompat" )? document.documentElement : document.body
  58. }
  60. function zoom2(which, e, position, imgwidth, imgheight){
  61. if (ie||ns6){
  62. crossobj=document.getElementById? document.getElementById("showimage" ) : document.all.showimage
  63. // ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE
  64. crossobj.style.left=280+"px"
  65. crossobj.style.top=80+"px"
  67. crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">&raquo; Fermer</span></div><img src="'+which+'">'
  68. crossobj.style.visibility="visible"
  69. return false
  70. }
  71. else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
  72. return true
  73. }
  75. function closepreview(){
  76. crossobj.style.visibility="hidden"
  77. }
  79. function drag_drop(e){
  80. if (ie&&dragapproved){
  81. crossobj.style.left=tempx+event.clientX-offsetx+"px"
  82. crossobj.style.top=tempy+event.clientY-offsety+"px"
  83. }
  84. else if (ns6&&dragapproved){
  85. crossobj.style.left=tempx+e.clientX-offsetx+"px"
  86. crossobj.style.top=tempy+e.clientY-offsety+"px"
  87. }
  88. return false
  89. }
  91. function initializedrag(e){
  92. if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar" ){
  93. offsetx=ie? event.clientX : e.clientX
  94. offsety=ie? event.clientY : e.clientY
  96. tempx=parseInt(crossobj.style.left)
  97. tempy=parseInt(crossobj.style.top)
  99. dragapproved=true
  100. document.onmousemove=drag_drop
  101. }
  102. }
  104. document.onmousedown=initializedrag
  105. document.onmouseup=new Function("dragapproved=false" )
  108. </SCRIPT>
  110. <div id="showimage"></div>
  112.   <tr>
  113.     <td align=center>
  114. <SCRIPT type="text/javascript" title="Promovacances.com">
  115. // position loupes
  116. var navig= navigator.appCodeName;
  117. //alert(navig);
  118. if (document.all){
  119. document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  120. document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
  121. document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  122. }
  123. if (!document.all){
  124. document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
  125. document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:39;position:absolute;visibility:visible;)</style>');
  126. document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
  127. }
  128. if (ns6){
  129. document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  130. document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
  131. document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
  132. }
  134. </SCRIPT>
  136. <div id="showloupe1"><a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)"></a></div>
  137. <a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)">
  138. <IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16897.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
  140. <div id="showloupe1"><a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)"></a></div>
  141. <a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)">
  142. <IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16917.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
  149. </font></p>
  150.                  <p>&nbsp;</p>
  151.                  <p>&nbsp;</p>
  152.                  <p>&nbsp;</p>
  153.                  <p>&nbsp;</p>
  154.                  <p>&nbsp;</p>
  155.                  <table style="border-collapse: collapse;" id="table10" border="0" cellpadding="0" width="100%">
  156.                   <tbody><tr>
  157.                    <td>
  158.                    <p align="center"><b><font color="#808080" face="Arial" size="1">Copyright 2006-2007 - www.besomeone.fr </font></span></font></b></p></td>
  159.                   </tr>
  160.                  </tbody></table>
  161.                  </td>
  162.                  <td width="16">&nbsp;</td>
  163.                 </tr>
  164.                </tbody></table>
  165.                </td>
  166.               </tr>
  167.              </tbody></table>
  168.              </td>
  169.             </tr>
  170.            </tbody></table>
  171.           </div>
  172.           </td>
  173.          </tr>
  174.         </tbody></table>
  175.         </td>
  176.        </tr>
  177.       </tbody></table>
  178.      </div>
  179.      </td>
  180.      <td>&nbsp;</td>
  181.     </tr>
  182.    </tbody></table>
  183.   </div>
  184.   </td>
  185.  </tr>
  186. </tbody></table>
  187. </div>
  190. ';
  197. ?>


Message édité par sebs77 le 26-06-2007 à 12:23:02
Reply

Marsh Posté le 26-06-2007 à 11:23:54   

Reply

Marsh Posté le 26-06-2007 à 12:15:27    

Mauvaise catégorie.


---------------
.:: Kmeleon ::.
Reply

Marsh Posté le 26-06-2007 à 12:16:50    

ha , je dois le mettre où ?


Message édité par sebs77 le 26-06-2007 à 12:20:52
Reply

Marsh Posté le 26-06-2007 à 12:18:57    

problème de php pourtant :/

Reply

Marsh Posté le 26-06-2007 à 12:20:44    

Oui mais il faut que tu nous donne le code PHP qu'il y a dans la page indiquée, ton code Javascript ne sert à rien (enfin de un je capte rien, et de deux je pense pas que le problème vienne de là ^^).


---------------
.:: Kmeleon ::.
Reply

Marsh Posté le 26-06-2007 à 12:23:24    

voilà le code de la page php rajouté au sujet.

Reply

Marsh Posté le 26-06-2007 à 13:30:16    

ben c'est normal que t'aies un pb, tu utilises ' pour ouvrir et fermer la chaîne à afficher par echo et on trouve aussi des ' à l'intérieure de cette chaîne  :sarcastic: Faut les échaper avec \
 
Tu remarqueras d'ailleurs que le script chargé, sur ce forum, d'effectuer la coloration synthaxique merdouille aussi du fait du pb que j'ai mentionné précédemment.
Dans ton cas de figure :
solution 1 : je mettrais ta chaîne qui suit le echo dans un fichier et je ferais un include
solution 2 : j'utiliserais echo <<<END        
...
END;
 
http://fr.php.net/manual/fr/function.echo.php

Reply

Marsh Posté le 26-06-2007 à 14:18:57    

bon j'ai mi \ avan chaque ' , la page s'affiche mais il n'y a qu'un 0 noir sur fond blanc qui s'affiche :s  
http://www.besomeone.fr/site/zoom/d-h.php  
alor que c'est une page du type http://www.besomeone.fr/site/d-h.php qui devrai safficher
je ne sais pas trop quoi faire là...


Message édité par sebs77 le 26-06-2007 à 14:22:08
Reply

Marsh Posté le 26-06-2007 à 15:02:23    

pourquoi t'as fait la solution la plus compliquée?
Avec un include ou echo <<<END ... END; t'avais rien à toucher :/

Reply

Marsh Posté le 26-06-2007 à 15:34:24    

donc le plus simple serais de mettre tout le script dans une page que j'apelle genre script.php et de l'appeler par un include et de laisser dans ma page que sa :

Code :
  1. #
  2. <div id="showloupe1"><a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)"></a></div>
  3. #
  4. <a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)">
  5. #
  6. <IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16897.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>


 
?
 
mais il ya aura toujours un problème avec les ' de se que je laisse dans ma page
 
je ne comprend pas ton histoire de echo END, sa donne quoi dans la page et à la place de quoi concrètement ?


Message édité par sebs77 le 26-06-2007 à 15:36:19
Reply

Marsh Posté le 26-06-2007 à 15:34:24   

Reply

Marsh Posté le 26-06-2007 à 15:40:35    

bon j'ai fais avec le include, ça marche, mais tout le reste de ma page n'apparait plus, il n'y a plus que se qui marche avec le script qui s'affiche
http://www.besomeone.fr/site/zoom/d-h.php
 :??:
 
 
==> j'ai rien g oublié de mettre la moitié de la page


Message édité par sebs77 le 26-06-2007 à 15:42:40
Reply

Marsh Posté le 26-06-2007 à 15:45:35    

c'est bon ça marche, mettre le script en include suffisait !
merci, c'est toujours les trucs qu'on auxquels on ne pense pas.
http://www.besomeone.fr/site/zoom.php
par contre est-ce que vou savez comment agrandir la dragbar pour qu'elle serve de fond derrière la référence du produit ?


Message édité par sebs77 le 26-06-2007 à 16:04:44
Reply

Marsh Posté le 26-06-2007 à 16:09:11    

-> css, je pense en bidouillant le width et le height.

Reply

Marsh Posté le 26-06-2007 à 16:18:42    

arf non si j'agrandi le height sa agrandi la zone grise mais ça ne passe pas dérrière l'image, l'image n'est pas par dessus la bar :s comment fair...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed