[javascript] modif de script please help

[javascript] modif de script please help - HTML/CSS - Programmation

Marsh Posté le 27-06-2005 à 22:52:12    

bonjour tout l'monde
 
voila j'ai fait un site ou il y a beaucoup d'images
 
images que je fait visualiser via un script qui ouvre l'image qui est sous le curseur dans une fenetre sur la meme frame  
 
voir exemple :
 
http://jackyproject.free.fr/Pages/Photos/PorteAR.htm
 
le probleme de ce script est que les images en bas de page ou a droite ne sont plus visible
 
je cherche a ce que l'image s'ouvre toujours de la meme maniere mais au lieu qu'elle suive la souris elle s'ouvre au milieu de la fenetre  
 
exemple de code:
 
pour afficher l'image
<A onmouseover="return overlib('<IMG BORDER=1 SRC=../../Photos/33/01.JPG border=1 vspace=1 hspace=1> ')" onmouseout=nd()>
<IMG height=150 src="../../Photos/33/01.JPG" width=200></A>
 
en referance au fichier js
<DIV id=overDiv style="Z-INDEX: 1; POSITION: absolute"></DIV>
<SCRIPT language=JavaScript src="../../overlib.js"></SCRIPT>
 
si on change la valeur "absolute" l'image ne suis plus la souris mais s'ouvre en bas de page  
(ce que je ne cherche pas a faire)
 
lien vers le fichier js
http://jackyproject.free.fr/overlib.js
 
ce serais simpa de m'aider a modifier ce script  
ou si vous en conaisez un autre qui pourrais faire l'affaire
 
merci  
a+

Reply

Marsh Posté le 27-06-2005 à 22:52:12   

Reply

Marsh Posté le 27-06-2005 à 23:05:28    

[:akt]  
 
C'est pas du tout accessible tout ça  [:athlonmp]


---------------
http://yoyo.eurotchat.net -> Wednesday 14 September a 02:00:01 up 43 days, 11:47,  2 users,  load average: 0.07, 0.03, 0.00
Reply

Marsh Posté le 28-06-2005 à 08:40:40    

ouais je sais c'est un peu bordelique
 
alors je vais faire un exemple d'une page simple avec une seule photo
"
voici le code de la page (en imaginant que le fichier "overlib.js" soit enregistré dans le meme repertoire que cette page)
 
<HTML>
    <HEAD>
        <TITLE>No Title</TITLE>
    </HEAD>
    <BODY>
        <A onmouseover="return overlib('<IMG BORDER=1 SRC=01.jpg>')" onmouseout=nd()>
        <IMG height=150 src="01.jpg" width=200></A>
       
        <DIV id=overDiv style="Z-INDEX: 1; POSITION: absolute"></DIV>
        <SCRIPT language=JavaScript src="overlib.js"></SCRIPT>
    </BODY>
</HTML>
 
 
voila  
 
je vais pas vous detailer le fichier "overlib.js" car il est super long


Message édité par isotop le 28-06-2005 à 08:48:19
Reply

Marsh Posté le 28-06-2005 à 08:47:31    

cette ligne :
 
<DIV id=overDiv style="Z-INDEX: 1; POSITION: absolute"></DIV>
 
a l'air de controler l'image car si l'on change la valeur de POSITION l'image ne s'ouvre plus par dessus les autres mais en fin de page
 
bien sur je ne connait pas les autres valeurs que peut prendre POSITION
 
mais au faite c'est quoi une balise <DIV>

Reply

Marsh Posté le 28-06-2005 à 10:17:44    

Euh, l'overlib c'est pourri hein ^^'
 
Fais une popup accessible au clic genre :
 

Code :
  1. <a href="grandpouet.jpg" onclick="return(window.open(this.href));">
  2. <img src="minipouet.jpg" alt="pouet" title="Image de pouet" />
  3. </a>


Message édité par plainsofpain le 28-06-2005 à 10:18:10

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 28-06-2005 à 10:38:42    

Ouais, y'a pas pire que l'overlib niveau lourdeur et inacessibilité

Reply

Marsh Posté le 28-06-2005 à 10:54:18    

oula kler pour mettre des images c assez relou à l'utilisation !!!

Reply

Marsh Posté le 28-06-2005 à 10:55:47    

Si seulement l'overlib n'était lourde qu'a l'utilisation :D


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 28-06-2005 à 14:13:27    

plainsofpain a écrit :

Euh, l'overlib c'est pourri hein ^^'
 
Fais une popup accessible au clic genre :
 

Code :
  1. <a href="grandpouet.jpg" onclick="return(window.open(this.href));">
  2. <img src="minipouet.jpg" alt="pouet" title="Image de pouet" />
  3. </a>



 
ouais je crois que ça va finir comme ça  
domage j'aimais bien le principe  

Reply

Marsh Posté le 28-06-2005 à 14:15:31    

bof ... ca faisait un chargement plus long de la page.
 
Tu crées des miniatures de tes images que tu mets en lien (voire tu les génères avec gd s'il y a du php).


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 28-06-2005 à 14:15:31   

Reply

Marsh Posté le 28-06-2005 à 14:25:01    

pas besoin si je leur donne une taille directement a l'affichage
 
comme ça  
 

Code :
  1. <a href="grandpouet.jpg" onclick="return(window.open(this.href));">
  2. <img src="minipouet.jpg" height=150 width=200 alt="pouet" title="Image de pouet" />
  3. </a>

Reply

Marsh Posté le 28-06-2005 à 14:29:31    

Ouais, et ça fait comme tous ces sites, où à la place d'une miniature censée être légère et donner un aperçu, t'as un machin qui fait du 2048*1536, et qui est tout juste redimensionné à l'arrache comme ça [:moule_bite]
 
Donc tu es obligé de faire une version minitature de l'image finale :o

Reply

Marsh Posté le 28-06-2005 à 14:31:54    

FlorentG a écrit :

Ouais, et ça fait comme tous ces sites, où à la place d'une miniature censée être légère et donner un aperçu, t'as un machin qui fait du 2048*1536, et qui est tout juste redimensionné à l'arrache comme ça [:moule_bite]
 
Donc tu es obligé de faire une version minitature de l'image finale :o


 
ok ok pas taper
 
de toutes façon les miniatures sont deja faites  
car c'est le principe que j'utilisait avant (voir les autres pages de mon site)
 
sauf que je les ouvrais dans une nouvelle page et non pas par popup

Reply

Marsh Posté le 28-06-2005 à 14:43:05    

Ca doit aussi être faisable indoc, pas besoin de popups externes ^^


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 28-06-2005 à 22:24:32    

bon j'ai trouve autre chose  
presque pareil mais sans l'overlib
 
il faut cliquer sur les photos cette fois et il les ouvres de la même manière que tout a l'heure je peux déterminer la position d'ouverture de la fenêtre donc impeccable
j'ai eu le script ici
 
http://www.g1script.com/home/LANGA [...] php?id=415
 
le seul truc que je voudrais modifier c'est la barre en haut de l'image ouverte dans laquelle ce trouve le lien pour fermer cette image  
 
voir photo
http://cortex27.free.fr/divers/popup.JPG
 
je voudrais virer cette barre (ça c'est pas dur)
 
mais je voudrais faire en sorte que lorsqu'on clique sur l'agrandissement il se ferme
 
 
je vous donne le code de cette barre et du fermer
 

Code :
  1. function enlarge(which, e, position, imgwidth, imgheight)
  2. {
  3. if (ie||ns6)
  4. {
  5.  crossobj=document.getElementById? document.getElementById("showimage" ) : document.all.showimage
  7.  var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+192
  8.  var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+100
  10.  crossobj.style.left=horzpos+"px"
  11.  crossobj.style.top=vertpos+"px"
  12.  crossobj.style.visibility="visible"
  13.  crossobj.innerHTML='<div align="right" id="dragbar"><span onClick="closepreview()">Fermer</span> </div><img src="'+which+'">'
  15.  return false
  16. }
  17. else
  18.  return true
  19. }
  21. function closepreview()
  22. {
  23. crossobj.style.visibility="hidden"
  24. }


 
c'est a cette ligne la que ça ce passe:
crossobj.innerHTML='<div align="right" id="dragbar"><span onClick="closepreview()">Fermer</span> </div><img src="'+which+'">'
 
lorsqu'on clique sur fermer on appel la fontion closepreview()
 
je voudrais l'appeler en cliquant sur la fenetre tou betement
mais j'ai beau essayer dans tout les sens ça ne marche pas

Reply

Marsh Posté le 29-06-2005 à 22:34:44    

rooh allé je suis sur que vous savez  
 
je suis sur que c possible et qu'il n'y a pas grand chose a changer

Reply

Marsh Posté le 30-06-2005 à 09:08:23    

Franchement... C'est VRAIMENT pas compliqué. Si tu connais un tout petit peu l'HTML...

Reply

Marsh Posté le 30-06-2005 à 13:01:09    

je suis sur que ce n'est pas tres compliqué et que c'est sous mes yeux
le truc c'est que les balises <DIV> et <SPAN> je ne sais pas ce que c'est  

Reply

Marsh Posté le 30-06-2005 à 13:35:52    

ah oui on est mal barré déjà

Reply

Marsh Posté le 30-06-2005 à 13:36:20    

Et bien ? Quand tu ne sais pas un truc, tu te documentes [:itm]. En l'occurrence, la recommandation HTML 4 [:spamafote]

Reply

Marsh Posté le 30-06-2005 à 16:41:00    

j'ai trouve ça dessus  
http://www.le-webmestre.net/web/co [...] urs_10.php
mais ça m'aide pas trop

Reply

Marsh Posté le 30-06-2005 à 17:14:54    

allé "FlorentG" un indice

Reply

Marsh Posté le 01-07-2005 à 09:36:07    

Analysons la chose :
<div align="right" id="dragbar"><span onClick="closepreview()">Fermer</span> </div><img src="'+which+'">'
 

  • <div align="right">  


Bon ici, apparemment, on a un machin, dont on peut supposer que l'alignement est à droite
 

  • <span onClick="closepreview()">Fermer</span>


Là, un autre truc. En lisant, on peut voir un 'onclick', qui peut spécifier qu'en cas de clickage, il se passe quelque chose, en l'occurence 'closepreview', donc 'fermer aperçu'. Ah. Intéressant
 

  • <img src="'+which+'">


Hmmmm... img doit vouloir dire image, donc c'est notre image.
 
Bon, on veut virer le fermer, tout en gardant le click. Donc avec un peu de logique et 2-3 essais, on vire le div et le span, puis on copie/colle le onclick sur l'image :

<img onClick="closepreview()" src="'+which+'">


 
Maintenant faut essayer, je sais pas comment est goupillé le script...

Reply

Marsh Posté le 01-07-2005 à 15:53:21    

purée ct si simple que ça  
je savais pas que img suportais le onClick
 
grand merci FlorentG

Reply

Marsh Posté le 01-07-2005 à 16:07:32    

donc pour ceux que ça interesse voici du code final
 

Code :
  1. <html>
  3. <head>
  4. <title>Nouvelle page 2</title>
  6. <style type="text/css">
  8. #showimage
  9. {
  10. position:absolute;
  11. visibility:hidden;
  12. border: 1px solid gray;
  13. }
  14. </style>
  15. <SCRIPT type="text/javascript" title="JackyScript">
  17. var ie=document.all
  18. var ns6=document.getElementById&&!document.all
  20. function ietruebody()
  21. {
  22. return (document.compatMode!="BackCompat" )? document.documentElement : document.body
  23. }
  25. function enlarge(which, e, position, imgwidth, imgheight)
  26. {
  27. if (ie||ns6)
  28. {
  29.  crossobj=document.getElementById? document.getElementById("showimage" ) : document.all.showimage
  31.  var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+192
  32.  var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+100
  34.  crossobj.style.left=horzpos+"px"
  35.  crossobj.style.top=vertpos+"px"
  36.  crossobj.style.visibility="visible"
  37.  crossobj.innerHTML='<img onClick="closepreview()" style="cursor:hand" src="'+which+'">'
  39.  return false
  40. }
  41. else
  42.  return true
  43. }
  45. function closepreview()
  46. {
  47. crossobj.style.visibility="hidden"
  48. }
  50. </SCRIPT>
  53. </head>
  55. <body>
  57. <SCRIPT type="text/javascript" title="JackyScript">
  58. </SCRIPT>
  59. <div id="showimage"></div>
  60. <a href="01a.JPG" onClick="return enlarge('01a.JPG',event)">
  61. <img src="01b.JPG" border="0"></a>
  62. </body>
  64. </html>


 
O1a.JPG est l'image en haute resolution
01b.JPG est l'image en petite resolution
 
encore merci pour le coup de main FlorentG


Message édité par isotop le 01-07-2005 à 16:14:11
Reply

Marsh Posté le 01-07-2005 à 16:10:26    

Petite précision
 
Les valeurs 192 et 100 lignes 31 et 32
 
Permettent de déterminer l'endroit ou va s'ouvrir l'image  
Ils représentent le coin supérieur gauche de l'image

Reply

Marsh Posté le 01-07-2005 à 16:17:35    

Ca se code plus comme ça le javascript maintenant, tu sais...


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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