Zoom sur une image

Version imprimable

17/05/2006, 08h40
flo456

Zoom sur une image

bonjour,
j'aimerais savoir s'il est possible de mettre une fonction zoom sur une image.

j ai une page asp qui m affiche une petite image qui se trouve dans un dossier upload. Mais je ne veux pas créer une image plus grande. y a t il un moyen de faire un zoom sur l image sans en créer une plus grande?
comme sur le clique droit de la souris.. defois il y a le zoom..

merci

ps: j ai fait des recherches sur le forum, y a des sujets interessant mais je n ai jamais fait de javascript..
17/05/2006, 09h51
Sheriff
salut !
tu peux écrire une fonction qui redimensionne l'image...
Code:

1 2 3 function zoom_plus(){ if (document.image.style.height==200){document.image.style.height=400;document.image.style.width==800;} }
et dans la page tu fais

Code:

<img src=url border=0 name=image><a href=javascript:zoom_plus()>Agrandir</a>

et tu fais le contraire pour diminuer la taille de l'image...
@+
17/05/2006, 10h06
flo456
j ai essayé mais rien ne se passe..
faut il que j écrive comme ca?

Code:

<a href="#" onClick="javascript:zoom_plus()"><img src="../upload/<%=img%>"width="100" height="100">Agrandir</a>

ca devrai fonctionner non?

j ai mit dans la meme page mais au sommet :
Code:

1 2 3 4 5 6 <script language="Javascript"> function zoom_plus() { if (document.image.style.height==200){document.image.style.height=400;document.image.style.width==800;} } </script>
(c est le code que tu m as donné!)

ou alors il faut que ca ouvre une autre page pour afficher l image?
17/05/2006, 10h11
Sheriff

ca ne peut mas agrandir puisque la condition n'est pas remplie...
remarque que la taille initiale de ton image est height=100 et non height=200
17/05/2006, 10h13
flo456

j ai changé ca.. j ai vu par apres mais quand je clique sur le lien.. rien ne se passe. il met juste au fond : erreur sur la page..
17/05/2006, 10h14
Sheriff
dans ton cas tu dois faire
Code:

1 2 3 function zoom_plus(){ if (document.image.style.height==100){document.image.style.height=200;document.image.style.width==200;} }
et dans la page

Code:

<a href="#" onClick="javascript:zoom_plus()"><img src="../upload/<%=img%>" width="100" height="100" name="image">Agrandir</a>

c'est important que ton image ait un name...
17/05/2006, 10h17
flo456

je suis désolée mais ca ne change rien..
rien ne se passe et il y a toujours : erreur sur la page...

ok je te refile le code entier
Code:

1 2 3 4 5 <script type=text/javascript> function zoom_plus(){ if (document.getElementById('lien').title=='petite image'){document.image.style.width=200;document.image.style.height=200;document.getElementById('lien').title='grande image';} } </script>
dans la page tu fais

Code:

<a href=javascript:zoom_plus()>zoom +</a><a title='petite image' href='#' id='lien'><img name='image' src='url' width=100 height=100 border=0></a>

@+

17/05/2006, 10h43
flo456

excuse moi mais je fais exactement ce que tu me dis depuis tout a l heure et ca ne change rien!

je mets mon bout de script juste avant la fermeture du <head>

tu as testé? parce que chez moi .. ca mets toujours : erreur sur la page..

je suis vraiment désolée..

voici mon code
tu peux le tester directement, même sans image...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
	<head>
	<script type=text/javascript>
function zoom_plus(){
if (document.getElementById('lien').title=='petite image')
{document.image.style.width=200;document.image.style.height=200;document.getElementById('lien').title='grande image';}
else
{document.image.style.width=100;document.image.style.height=100;document.getElementById('lien').title='petite image';}
}
</script>
	</head>
<body>
	<a href=javascript:zoom_plus()>zoom</a><a href='#' title='petite image' id='lien'><img name='image' src='url' width=100 height=100></a>
</body>
</html>

17/05/2006, 11h00
Sheriff

si ça marche toujours pas... :aie:
au fait c quoi ton navigateur ?
j'utilise ie, moi.
17/05/2006, 11h01
flo456

et bien.. je ne sais pas ce qu a ma page mais.. ca va pas..

tampis.. merci quand meme,.,.
17/05/2006, 11h05
Sheriff

non, non...
sauvegarde mon code en tant que page html à part et exécute-la.
c'est peut-être un problème de conflit avec les autres variables de ton programme.
je veux m'assurer que mon code fonction en solitaire chez toi...

ça ne fait pas 2 jours que j'ai eu le même problème et je t'assure que c ce code que j'utilise !!!
17/05/2006, 11h09
flo456

alors c est ma page qui ne vas pas..
il fonctionne bien c est vrai..
comment puis-je faire? pourtant je n ai qu une fonction javascript dans ma page..
17/05/2006, 11h11
flo456

alors c est ma page qui ne vas pas..
il fonctionne bien c est vrai..
comment puis-je faire? pourtant je n ai qu une fonction javascript dans ma page..
17/05/2006, 11h19
Sheriff

nous y voila

va dans mon code et renomme les variables que tu as peut-être utilisés dans ton programme.
par exemple le name de l'image, le id de la balise <a id=lien>, le nom de la fonction, etc.

ok ?
17/05/2006, 11h22
Sheriff

et si tu me disais quel est le message renvoyé par l'erreur ?
17/05/2006, 11h24
flo456

ok ca j ai fait. j ai essayé ca fonctionne dans ta page.
mais toujours pas dans la mienne..

j ai regarder la hauteur de mon tableau..il y a de la place pour l image en grand pourtant.

quand je clique sur zoom, rien ne se passe

sauf que dans ma barre internet en bas, ca écrit : erreur sur la page avec le triangle jaune..
17/05/2006, 11h33
Sheriff

double clique sur le triangle jaune pour afficher le message d'erreur...
17/05/2006, 11h35
flo456

il dit :
erreur : 'document.image.style' a la valeur Null ou n'est pas un objet
17/05/2006, 11h46
Sheriff

assure-toi donc que ton image a pour nom 'image' (<img name='image' ...>) ou renomme ton image en 'monimage' c'est à dire <img name='monimage'>
et tu remplaces tout ça dans le code javascript (document.monimage.style.height....) etc.

ca change rien..
c est mon code en entier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%
     'pour afficher l image
    dim Repertoire
    dim item
    dim rstImg
 
    set rstImg = conn.execute("SELECT Image FROM TableMesure where Nom_Wafer ='" & RS("Nom_Wafer") & "' ")
 
    img = rstImg("Image")
    Set FSO = CreateObject("Scripting.FileSystemObject")
    Set Repertoire = FSO.GetFolder(server.MapPath("/intranet/upload/") & "\")
    if FSO.FileExists(Server.MapPath("/intranet/upload/" & img)) then%>
            <a href=javascript:zoom_plus()>zoom</a><a title='petite image' href='#' id='lien'><img src="../upload/<%=img%>" width="100" height="100" name="Monimage"></a>
                      <%else%>
                      <span class="textBody">Pas d image pour ce projet 
                      <%
    end if
     Set Repertoire = nothing
     Set FSO = nothing
     rstImg.close
     set rstImg = nothing
    %>

ca fonctionne peut etre pas a cause de ca non?

regarde un peu ça...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
 <head>
 <script type=text/javascript>
function zoom_plus(){
if (document.getElementById('lien').title=='petite image')
{document.image.style.width=200;document.image.style.height=200;document.getElementById('lie
n').title='grande image';}
else
{document.image.style.width=100;document.image.style.height=100;document.getElementById('lie
n').title='petite image';}
}
</script>
 </head>
<body>
 <%
     'pour afficher l image
    dim Repertoire
    dim item
    dim rstImg
 
    set rstImg = conn.execute("SELECT Image FROM TableMesure where Nom_Wafer ='" & 
RS("Nom_Wafer") & "' ")
 
    img = rstImg("Image")
    Set FSO = CreateObject("Scripting.FileSystemObject")
    Set Repertoire = FSO.GetFolder(server.MapPath("/intranet/upload/") & "\")
    if FSO.FileExists(Server.MapPath("/intranet/upload/" & img)) then%>
            <a href=javascript:zoom_plus()>zoom</a><a title='petite image' href='#' 
id='lien'><img src="../upload/<%=img%>" width="100" height="100" name="image"></a>
                      <%else%>
                      <span class="textBody">Pas d image pour ce projet 
                      <%
    end if
     Set Repertoire = nothing
     Set FSO = nothing
     rstImg.close
     set rstImg = nothing
    %>
</body>
</html>

et je te promets que ça marche chez moi

remarque ce qui est en rouge-gras...
pense aussi à respecter la casse

@+

17/05/2006, 13h55
flo456

alors pourquoi avec le meme code que toi (copier coller les 2 bouts de codes) ca ne fonctionne pas chez moi?

je n y comprends rien! c est exactement le meme!!!!
17/05/2006, 14h03
Sheriff

tu as testé ma page html en solitaire et ça marche au moins ?
si oui c'est peut-être le navigateur.
si non c'est un conflit avec les autres variables de ta page...
sorry, mais faut débugger !
au fait... c quoi tout ton code ?
17/05/2006, 14h07
flo456

oui ta page en solitaire elle fonctionne bien,.
mon code?
j upload une image et je la mets dans un dossier upload a la racine de mon site et en meme temps j enregistre le nom de l image dans ma bdd pour ne pas etre obligée d enregistrer mon image dans ma table.

et le bou de code la, sert a récupérer l image dans le dossier upload qui correspond au nom dans ma table.

sauf que je les importe en 100/100px et j aurais voulu faire un zoom dessu.. pour qu on voit les détails.

vais voir le code en entier..

merci pour ta patience!
17/05/2006, 16h34
flo456

y aurait pas qqn qui pourrait nous aider? enfin.. surtout moi..
ca serait vraiment bien s'y je pouvais y arriver. (grace a vous bien sur)

..
17/05/2006, 20h21
Sheriff

c vraiment dommage que cela ne marche pas...
faut faire comme je t'ai dit : me donner ton code et aussi le code js que je t'ai refilé ; c'est surement un tout petit détail !
@+
18/05/2006, 07h55
flo456

tu voudrais tout mon code? ma page entière? il fait quand meme 376lignes..
je peux le mettre sur le forum?
18/05/2006, 13h22
Sheriff

salut, toi.
passé une bonne nuit ?
pour ta question, biensur que tu peux envoyer ton code.
si tu trouve que c'est assez volumineux tu peux toujours envoyer en tant que fichier attaché (sers toi de l'icone représentant un trombone...)
mais entre temps j'ai pensé à un autre truc : les div (tu sais, le getElementById('monid').innerHTML='..........')
je teste et je t'envoies, ok ?

t'inquiète, on va résoudre ton pb.

1 pièce(s) jointe(s)

voici la page avec les div...
dis, tu utilises quel éditeur ?
j'ai remarqué que lorque je copiais le code à partir du forum, ça mettais des retours à la ligne innatendus, et, biensur c pas la même chose lorsque le nom d'une variable est coupé...
c'est pour cela que je t'envoi aussi le fichier .html
mais voici quand même le code brut

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
 <head>
 <script type=text/javascript language=javascript>
function zoom_plus(){
 if (document.getElementById('lien').title=='petite image'){
  document.getElementById('monid').innerHTML="<img src='../upload/<%=img%>' width='200' height='200'>";
  document.getElementById('lien').title='grande image';
 }
 else{
  document.getElementById('monid').innerHTML="<img src='../upload/<%=img%>' width='100' height='100'>";
  document.getElementById('lien').title='petite image';
 }
}
</script>
 </head>
<body>
 <%
     'pour afficher l image
    dim Repertoire
    dim item
    dim rstImg
 
    set rstImg = conn.execute("SELECT Image FROM TableMesure where Nom_Wafer ='" & 
RS("Nom_Wafer") & "' ")
 
    img = rstImg("Image")
    Set FSO = CreateObject("Scripting.FileSystemObject")
    Set Repertoire = FSO.GetFolder(server.MapPath("/intranet/upload/") & "\")
    if FSO.FileExists(Server.MapPath("/intranet/upload/" & img)) then%>
            <a href=javascript:zoom_plus()>zoom</a><a title='petite image' href='#' 
id='lien'><div id='monid'><img src="../upload/<%=img%>" width="100" height="100"></div></a>
                      <%else%>
                      <span class="textBody">Pas d image pour ce projet 
                      <%
    end if
     Set Repertoire = nothing
     Set FSO = nothing
     rstImg.close
     set rstImg = nothing
    %>
</body>
</html>

18/05/2006, 13h58
flo456

1 pièce(s) jointe(s)

c est genial. ca fonctionne. mais par contre quand j agrandi, mon image disparait..
et ma page affiche desfois plusieur image avec des noms différents bien sur. si je clique sur la 3ème image, c est la 1ere qui s agrandit..

j ai mit mon code en piece jointe. j utilise dreamwaver..

ho.. oui j ai bien dormi.. enfin.. j ai pas réver de code.. c est deja ca.. hi hi
18/05/2006, 14h06
Sheriff

Citation:

Envoyé par flo456

c est genial. ca fonctionne. mais par contre quand j agrandi, mon image disparait..
et ma page affiche desfois plusieur image avec des noms différents bien sur. si je clique sur la 3ème image, c est la 1ere qui s agrandit...

dans ce cas il faut t'assurer que chaque image porte un nom exclusif...
sinon il y aura des conflits... idem pour les variables.
je vais jetter un oeil à ton code, mais en attendant je dois rentrer en cours...
s8 vraiment désolé, mais on discutera un tout petit peu plus tard.
@+
18/05/2006, 14h08
flo456

chaque image a un nom différent! ca c est sur!

merci de ton aide. on se revoit plus tard (suis la jusque vers 17h) sinon demain.
merci pour ton aide! et bonne fin de journée
18/05/2006, 18h15
Sheriff

1 pièce(s) jointe(s)
Citation:

Envoyé par flo456

chaque image a un nom différent! ca c est sur!

je n'avais pas cette précision...
dans ce cas la fonction doit être paramétrée...
Code:

1 2 3 function zoom_plus(param1, param2,...){ }
le paramètre peut être le nom de l'image parexemple ou le id de la balise <a> la précédant...
si les images sont dynamiquement générée c'est plus compliqué, car il faudra aussi générer des noms pour chacune d'elles : trop alambiqué.

je te propose d'utiliser l'objet this pour cela.
regarde un peu:

code js
Code:

1 2 3 4 5 function zoom(nom){ nom.style.width=(nom.style.width=='200px'?100:200); nom.style.height=(nom.style.height=='200px'?100:200); nom.alt=(nom.alt=='Agrandir'?'Reduire':'Agrandir'); }
et dans la page

Code:

<a href=javascript:void(0)><img alt="Agrandir" src="../upload/<%=img%>" width="100" height="100" onclick=zoom(this)></a>

le truc est simple : faut cliquer sur une image pour l'agrandir, et recliquer dessus pour la réduire ; même avec 100 images dans la page ça marche
bon... je t'ai envoyé le fichier .asp revu et corrigé selon la formule que je suis entrain de te proposer (j'ai corrigé seulement la partie qui m'intéresse, because je ne m'y connais pas très bien, en asp. lol)

@ 2m1 !
19/05/2006, 07h48
flo456

alors la, je te tire mon chapeau!
ca fonctionne a merveille! je sais pas quoi dire!
Merci infiniment de ton aide!!! merci merci merci!!!