PHP

Prob Zoom Image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Prob Zoom Image

sebs77

apprentis

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 :

<html>
<head><title>Zoom sur une image by Neolien</title>
<body>
<style type="text/css">
#showimage{
z-index: 2;
position:absolute;
visibility:hidden;
top:0;
margin-left:100;
margin-top:0;
border: 1px solid gray;
}
#dragbar{
cursor: hand;
cursor: pointer;
background-color: #f2f2f2;
min-width: 100px; /*NS6 style to overcome bug*/
}
#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
height : 18px;
color:#000000;
}
.photo2-sej{width: 93px;height : 145px;}
.lien { color:#1B7FBB; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:none;}
.lien:hover { color:#c2c2c2; font-family:arial; font-size:12px; font-weight: bold; text-decoration:underline;}
.visiter { color:#777777; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:underline;}
</style>
<SCRIPT type="text/javascript" title="Promovacances.com">
var ie=document.all
var ns6=document.getElementById&&!document.all
function ietruebody(){
return (document.compatMode!="BackCompat" )? document.documentElement : document.body
}
function zoom2(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage" ) : document.all.showimage
// ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE
crossobj.style.left=280+"px"
crossobj.style.top=80+"px"
crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">» Fermer</span></div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar" ){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false" )
</SCRIPT>
<div id="showimage"></div>
<tr>
<td align=center>
<SCRIPT type="text/javascript" title="Promovacances.com">
// position loupes
var navig= navigator.appCodeName;
//alert(navig);
if (document.all){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
}
if (!document.all){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:39;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
}
if (ns6){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
}
</SCRIPT>
<div id="showloupe1"><a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)"></a></div>
<a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)">
<IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16897.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
<div id="showloupe1"><a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)"></a></div>
<a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)">
<IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16917.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
</body>
</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 :

<?php
include ("menu.php" );
echo '<tr>
<td background="fond.jpg" valign="top">
<table style="border-collapse: collapse;" id="table9" border="0" cellpadding="0" width="100%">
<tbody><tr>
<td width="14"> </td>
<td>
<font face="Arial" size="2">
<center><img src="d-h.jpg" border=0>
<br><br><br>
<style type="text/css">
#showimage{
z-index: 2;
position:absolute;
visibility:hidden;
top:0;
margin-left:100;
margin-top:0;
border: 1px solid gray;
}
#dragbar{
cursor: hand;
cursor: pointer;
background-color: #f2f2f2;
min-width: 100px; /*NS6 style to overcome bug*/
}
#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
height : 18px;
color:#000000;
}
.photo2-sej{width: 93px;height : 145px;}
.lien { color:#1B7FBB; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:none;}
.lien:hover { color:#c2c2c2; font-family:arial; font-size:12px; font-weight: bold; text-decoration:underline;}
.visiter { color:#777777; font-family:Arial; font-size:12px; font-weight: bold; text-decoration:underline;}
</style>
<SCRIPT type="text/javascript" title="Promovacances.com">
var ie=document.all
var ns6=document.getElementById&&!document.all
function ietruebody(){
return (document.compatMode!="BackCompat" )? document.documentElement : document.body
}
function zoom2(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage" ) : document.all.showimage
// ICI POUR REGLER LA POSITION DE LA LOUPE PAR RAPPORT A LA PAGE
crossobj.style.left=280+"px"
crossobj.style.top=80+"px"
crossobj.innerHTML='<div align="right" id="dragbar" class="txt-bold"><span id="closetext" onClick="closepreview()">» Fermer</span></div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, affiche image ds le navigateur en pleine page
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar" ){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false" )
</SCRIPT>
<div id="showimage"></div>
<tr>
<td align=center>
<SCRIPT type="text/javascript" title="Promovacances.com">
// position loupes
var navig= navigator.appCodeName;
//alert(navig);
if (document.all){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
}
if (!document.all){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:39;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:41;position:absolute;visibility:visible;)</style>');
}
if (ns6){
document.write('<style type="text/css">#showloupe1{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe2{margin-left:8;margin-top:112;position:absolute;visibility:visible;)</style>');
document.write('<style type="text/css">#showloupe3{margin-left:8;margin-top:114;position:absolute;visibility:visible;)</style>');
}
</SCRIPT>
<div id="showloupe1"><a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)"></a></div>
<a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)">
<IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16897.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
<div id="showloupe1"><a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)"></a></div>
<a href="gc/grand/CK16917.gif" onClick="return zoom2('gc/grand/CK16917.gif',event)">
<IMG alt="Cliquez pour Zoomer" SRC="gc/petit/CK16917.gif" name="img1" vspace="10" hspace="1" class="photo2-sej" border="0" ALIGN="top"></a>
</font></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table style="border-collapse: collapse;" id="table10" border="0" cellpadding="0" width="100%">
<tbody><tr>
<td>
<p align="center"><b><font color="#808080" face="Arial" size="1">Copyright 2006-2007 - www.besomeone.fr </font></span></font></b></p></td>
</tr>
</tbody></table>
</td>
<td width="16"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
<td> </td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</div>
';
?>

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

Publicité

kmeleon1

Ubuntu Forweeeeever

Mauvaise catégorie.

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

sebs77

apprentis

ha , je dois le mettre où ?

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

Siluro

problème de php pourtant

kmeleon1

Ubuntu Forweeeeever

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 ::.

sebs77

apprentis

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

rufo

Pas me confondre avec Lycos!

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

sebs77

apprentis

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

rufo

Pas me confondre avec Lycos!

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

sebs77

apprentis

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 :

#
<div id="showloupe1"><a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)"></a></div>
#
<a href="gc/grand/CK16897.gif" onClick="return zoom2('gc/grand/CK16897.gif',event)">
#
<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

Publicité

sebs77

apprentis

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

sebs77

apprentis

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

rufo

Pas me confondre avec Lycos!

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

sebs77

apprentis

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...

FORUM HardWare.fr

Programmation

PHP

Prob Zoom Image

Sujets relatifs
[C#] DataGridView image + texte dans une cellule	[javascript] afficher image un temps donné
[Resolu] espace blanc entre le bord d'une image et la fenetre !	Encadrer une image par du texte
Changer d'image en cliquant sur un clip?	Programer une page web pour qu'on ne puisse pas copier une image
reconnaissance de texte dans un fichier image	Redimensioner une image
Image.FromResource ?	Insertion image Excel à la place d'un caractére
Plus de sujets relatifs à : Prob Zoom Image

Page générée en 0.145 secondes