begin process at 2012 02 13 01:17:48
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > RENVOI D'IMAGES DANS UNE FAUSSE POPUP SANS RECHARGER LA PAGE

RENVOI D'IMAGES DANS UNE FAUSSE POPUP SANS RECHARGER LA PAGE


 Information sur la source

Note :
9,27 / 10 - par 15 personnes
9,27 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Niveau :Initié Date de création :27/12/2003 Date de mise à jour :08/01/2006 03:10:53 Vu / téléchargé :25 142 / 1 290

Auteur : chimelpremier

Ecrire un message privé
Site perso
Commentaire sur cette source (68)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Utile pour ceux qui ont des images à montrer.
Page de test : http://moncastel.free.fr/gimg/gimg.htm
Simple à incorporer au fichier HTML. Fichier JS externe.
programme automatique et autonome qui redirige les liens vers des images dans un calque de la page en cours.

Il suffit d'incorporer en fin de body:
<script type="text/javascript" src="g_img.js"></script>
dans le head:
<link rel="stylesheet" href="gimg.css" type="text/css" />

Copier les images et fermer.gif  dans un répertoire nommé img.
La pseudo-fenêtre se positionne automatiquement à 2px en haut et à gauche. Si vous souhaitez l'avoir à droite, remplacer left par right dans le fichier gimg.css
Soyez sympa, si vous utilisez ce script de me donner l'URL, je ferai un lien ici comme exemple.

Essayé avec succés avec win98 et les browsers IE5 à 6,Opéra7,Netscape6 et +, Mozilla .6, Firefox


Source

  • <!-- redirection des liens image jpg. Michel Deboom 05/2005
  • //modifié 01/06
  • function initLienImg(){
  • db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
  • gdim=D.getElementById('pop'); lx=D.getElementById('tet')
  • addEvent(lx,"mousedown",function(){dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;})
  • addEvent(lx,"mouseup",function(){drag=0})
  • addEvent(D,"mousemove",controle_position)
  • //création de l'image
  • im1=D.createElement("img");gdim.appendChild(im1);
  • if(gk)im1.style.marginBottom=-4+"px";//correction Gecko
  • //écriture des évènements
  • l=D.getElementsByTagName('a');
  • for(var i=0;i<l.length;++i){
  • //ajoute onclick=grdimg dans les liens image
  • result=l[i].href.search(/.jpg$|.jpeg$|.png$|.gif$/i);
  • if(result!=-1){l[i].onclick=grdimg;}
  • }
  • }
  • function controle_position(e){
  • sx=gk?pageXOffset:db.scrollLeft; //scroll h
  • sy=gk?pageYOffset:db.scrollTop; //scroll v
  • px=gk?e.pageX:event.clientX+sx; //curseur x
  • py=gk?e.pageY:event.clientY+sy; //curseur y
  • if(drag){with(gdim.style){left=px-dx+"px";top=py-dy+"px"};return false}
  • }
  • // bug ie corrigé : cache les <select>
  • function voirSelect(v){
  • elem=document.getElementsByTagName('select');
  • if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
  • }
  • //Renvoi image et title dans le calque.
  • function grdimg(){
  • fx=gk?innerWidth-20:db.clientWidth //l fenêtre
  • fy=gk?innerHeight:db.clientHeight //h fenêtre
  • //charge l'image dans le cache du navigateur.
  • im=new Image();im.src=this.href;
  • //la montre.
  • with(gdim.style){display="block";top=sy+2+'px'};
  • //montre le message d'attente.
  • lx.firstChild.data="patientez svp";
  • //colore le lien comme visité, récupère le message title
  • this.style.color=D.vlinkColor;txt=this.title;
  • voirSelect('hidden');
  • //Lance le controle de chargement
  • actif=setTimeout('controleChargement()',100)
  • //désactive l'action normale du lien HTML
  • ;return false
  • }
  • //controle du chargement de l'image
  • function controleChargement(){
  • clearTimeout(actif);
  • //L'image ne dépasse pas la fenêtre:
  • if(im.width>=fx){im.height*=(fx-20)/im.width;im.width=fx-20;}
  • if(im.height>=fy){im.width*=(fy-30)/im.height;im.height=fy-30;}
  • //relance le contrôle toutes les 100 ms
  • if(im.complete){lx.firstChild.data=txt;
  • with(im1){src=im.src;width=im.width;height=im.height;};
  • }
  • else actif=setTimeout('controleChargement()',100)
  • }
  • function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
  • if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
  • else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
  • else {return false;}
  • }
  • // initialisation
  • D=document;gk=window.Event?1:0/*Gecko*/;
  • dx=dy=e=drag=cr=0
  • // Création de la pseudo-popup :
  • D.write('<div id="pop"><div id="tet">titre<img title=" Fermer " src="img/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" /></div></div>');
  • //addEvent(window,"load",initLienImg)
  • initLienImg()
  • //-->
  • Le style CSS du fichier gim.css :
  • #pop{ /* fausse popup */
  • position:absolute;
  • left:3px;
  • top:3px;
  • display:none;
  • z-index:200;
  • background-color:#FFF;
  • border:3px outset;
  • /* pour IE seulement */
  • filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)
  • }
  • #tet{ /* titre */
  • cursor:move;
  • background-color:maroon;
  • font:12px/18px "Comic Sans MS", "Times New Roman", Times, serif;
  • color:white;
  • padding:0 20px 0 .5em;
  • }
  • #tet img{ /* croix pour fermer */
  • position:absolute;
  • right:0;
  • top:0;
  • height:14px;
  • width:16px;
  • cursor:default;
  • margin:2px 1px 1px;
  • border:0
  • }
<!-- redirection des liens image jpg. Michel Deboom 05/2005 
//modifié 01/06  

function initLienImg(){ 
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6 
gdim=D.getElementById('pop'); lx=D.getElementById('tet') 

addEvent(lx,"mousedown",function(){dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;}) 
addEvent(lx,"mouseup",function(){drag=0}) 
addEvent(D,"mousemove",controle_position) 
  
//création de l'image 
im1=D.createElement("img");gdim.appendChild(im1); 
if(gk)im1.style.marginBottom=-4+"px";//correction Gecko 
//écriture des évènements 
l=D.getElementsByTagName('a'); 
for(var i=0;i<l.length;++i){ 
  //ajoute onclick=grdimg dans les liens image 
  result=l[i].href.search(/.jpg$|.jpeg$|.png$|.gif$/i); 
  if(result!=-1){l[i].onclick=grdimg;} 
  } 
} 
  
function controle_position(e){ 
sx=gk?pageXOffset:db.scrollLeft; //scroll h 
sy=gk?pageYOffset:db.scrollTop; //scroll v 
px=gk?e.pageX:event.clientX+sx; //curseur x 
py=gk?e.pageY:event.clientY+sy; //curseur y 
if(drag){with(gdim.style){left=px-dx+"px";top=py-dy+"px"};return false} 
} 
  
// bug ie corrigé : cache les <select> 
function voirSelect(v){ 
elem=document.getElementsByTagName('select');
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;} 
} 

//Renvoi image et title dans le calque. 
function grdimg(){ 
fx=gk?innerWidth-20:db.clientWidth //l fenêtre 
fy=gk?innerHeight:db.clientHeight //h fenêtre 
//charge l'image dans le cache du navigateur. 
im=new Image();im.src=this.href; 
//la montre. 
with(gdim.style){display="block";top=sy+2+'px'}; 
//montre le message d'attente. 
lx.firstChild.data="patientez svp"; 
//colore le lien comme visité, récupère le message title 
this.style.color=D.vlinkColor;txt=this.title; 
voirSelect('hidden');
//Lance le controle de chargement 
actif=setTimeout('controleChargement()',100) 
//désactive l'action normale du lien HTML 
;return false 
} 

//controle du chargement de l'image 
function controleChargement(){ 
clearTimeout(actif); 
//L'image ne dépasse pas la fenêtre: 
if(im.width>=fx){im.height*=(fx-20)/im.width;im.width=fx-20;} 
if(im.height>=fy){im.width*=(fy-30)/im.height;im.height=fy-30;} 
//relance le contrôle toutes les 100 ms 
if(im.complete){lx.firstChild.data=txt;
with(im1){src=im.src;width=im.width;height=im.height;};  
}
else actif=setTimeout('controleChargement()',100) 
} 
    
function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant. 
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+ 
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+ 
else {return false;} 
} 
  
// initialisation 
D=document;gk=window.Event?1:0/*Gecko*/; 
dx=dy=e=drag=cr=0 

// Création de la pseudo-popup : 
D.write('<div id="pop"><div id="tet">titre<img title=" Fermer " src="img/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" /></div></div>'); 
//addEvent(window,"load",initLienImg) 
initLienImg()
//--> 

Le style CSS du fichier gim.css :

#pop{ /* fausse popup */
position:absolute;
left:3px;
top:3px;
display:none;
z-index:200;
background-color:#FFF;
border:3px outset;
/* pour IE seulement */
filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)
}
#tet{ /* titre */
cursor:move;
background-color:maroon;
font:12px/18px "Comic Sans MS", "Times New Roman", Times, serif;
color:white;
padding:0 20px 0 .5em;
}
#tet img{ /* croix pour fermer */
position:absolute;
right:0;
top:0;
height:14px;
width:16px;
cursor:default;
margin:2px 1px 1px;
border:0
}  

 Conclusion

J'ai ajouté des commentaires dans le script.
J'attend les votres et vos notes bien sûr, merci ;o)
Images test : mes animaux familiers

le5/04/2004 amélioré la page démo.

le 7/04/2004 report du message title.

le 11/04/04 aspect popup

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

07 août 2004 19:55:52 :
bug sur image "fermer.gif" signalé par joss résolu : , aulieu de ; dans la définition de style. optimisation du script et reconstruction de la page test.
07 août 2004 19:58:41 :
bug sur image "fermer.gif" signalé par joss résolu : , aulieu de ; dans la définition de style. optimisation du script et reconstruction de la page test.
07 août 2004 20:00:38 :
Erreur sur l'erreur, c'était pas joss mais Atomium58
06 novembre 2004 21:28:24 :
Suite à plusieurs questions sur la cohabitation avec d'autres scripts, j'ai ajouté un commentaire dans la présentation du source.
19 mars 2005 19:49:55 :
amélioration style
18 avril 2005 02:30:04 :
Image ramenée au dimentions de la fenêtre si elle est plus grande. Améliorations du script et mise à jours des instructions.
23 avril 2005 00:56:40 :
Amélioration de la gestion des évènements ajout du drag & drop script entièrement remanié
23 avril 2005 22:24:07 :
correction Gecko (NS6) améliorée ligne 45 du js
10 mai 2005 12:54:17 :
ajouté: cacher les sélects pour résoudre un bug IE
10 mai 2005 12:57:05 :
ajouté: cacher les sélects pour résoudre un bug IE
08 janvier 2006 02:57:08 :
- prise en compte des images extension : .jpg, .jpeg, .png ou .gif sans distinction de casse. - style CSS de la fausse fenêtre maintenant dans le fichier gimg.css. - plus rapidement actif, car Insertion du script en fin de page sans utilisation de window.onload. - La nouvelle image est seulement visible quand le chargement est terminé. - Démo ici : http://moncastel.free.fr/gimg/gimg.htm
08 janvier 2006 03:02:58 :
correction de la présentation du code
08 janvier 2006 03:10:53 :
ajouté le css

 Sources du même auteur

Source avec Zip Source avec une capture MENU SELECT MULTINIVEAUX
Source avec Zip Source avec une capture ROLLOVER D'IMAGES AUTOMATIQUE
Source avec Zip Source avec une capture MENU EXPANSIF, MULTINIVEAUX
Source avec Zip Source avec une capture QUIZZ AVEC GLISSÉ DÉPOSÉ D'OBJETS COMPATIBLE (DRAG&DROP) .
Source avec Zip MENU MULTIFONCTIONS, ACCESSIBLE

 Sources de la même categorie

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol

Commentaires et avis

Commentaire de salley le 04/03/2004 20:52:57

Vraiment un code sympa: pas long,  bien explique, et qui donne un super resultat esthetique.

Commentaire de vbbreizh le 12/04/2004 17:00:39

Salut Michel
Tout d'abord c'est du bon boulot même si pour ma part je trouve le code un peu compliqué et un peu long...
petites remarques en passant :
-Attention à tes noms de fichiers. Pour ma part j'ai du renommer toutes tes images (majuscules, noms longs...). Nous ne sommes pas tous avec un matos au top et c'est décourageant pour le visiteur.
-Concernant les miniatures width suffit, height va s'adapter automatiquement (gain de temps et de code).
Ce ne sont pas des critiques mais des remarques, bonne continuation.
Cordialement, VB'Breizh

Commentaire de romalafrite le 18/04/2004 21:26:13

Bon résultat fonctionnel, c'est du bon boulôt. Je trouve vraiment excellent l'idée d'adapter exactement la taille de la fenêtre à l'image. J'en aurai surement l'utilité bientôt...

Commentaire de Atomium58 le 11/05/2004 23:23:36

Bonjour,
J'ai découvert hier ce site et je ne le regrette pas.

Quand à ce script. Super. Je vais enfin pouvoir supprimer les fenêtres popup de mon site.

J'ai cependant un petit soucis concernant la référence relative à l'image "fermer".gif.
Par rapport à la racine de mon site, mes pages html ne se situent pas toutes au même niveau. Or l'appel à cette image part de la position de la page html et non de la position du fichier script g_img.js (j'ai mis un certain temps avant de comprendre ...). Avant de modifier la position de mes pages, existe-il une autre solution ? (Une référence absolue ne marche pas).

Merci pour ce script et merci d'avance aussi pour ces précisions.


Commentaire de nw88 le 24/06/2004 18:11:16

C'est génial, Michel !
Mais ce n'est pas vraiment pour des débutants, plutôt pour des personnes quelque peu initiés au javascript (il faut tout de même modifier certains paramètres ... et sans se tromper).

Nicolas (des Vosges)

Commentaire de fulchinsfulch le 17/09/2004 21:17:37

Ce script est magnifique toutefois et malheureusement (vois pas pourquoi) il met hors fonction le script suivant qui n'a pourtant rien à voir et qui lui se trouve dans la page principale html :

<script type="text/javascript">

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

</script>

qui permet de faire facilement des rollover sur des images (ainsi: <img src="imageoff.gif" hsrc="imageon.gif">

Quelqu'un sait pourquoi?

Commentaire de chimelpremier le 18/09/2004 04:08:40

Le mieux est d'enlever "onload=init" dans ton script et
"window.onload=initLienImg" à la fin du mien, puis d'ajouter dans le tag body :
<body onload="init();initLienImg()" >
Peut-tu me donner l'adresse du site pour la citer ici ?
cordialement

Commentaire de lollie le 27/01/2005 16:26:54

Super code! je l'ai adopté pour résoudre un problème sur mon site! :p
Mais j'ai une question : est-il possible d'empécher l'affichage de l'image seule dans le navigateur quand on clique sur le lien?

merci!

Commentaire de chimelpremier le 27/01/2005 23:17:37

L'ouverture de l'image seule, c'est en HTML quand javascript est désactivé ou incompatible. Je m'efforce à rendre mes scripts accessibles, alors non !
C'est pour protéger tes images? Il n'éxiste pas de solution miracle.

Commentaire de lollie le 27/01/2005 23:45:46

c'est surtout par ce que je trouve ca bête quand on est sur un site on voit l'image s'afficher en passant sur le lien et si on clique on passe sur un page blanche avec l'image seule!
On sort du site et je trouve que ca casse un peu la navigation c'est tout!

et je sais bien qu'il n'y a pas de moyen fiable pour protéger ses images.

Commentaire de chimelpremier le 28/01/2005 13:04:57

Lollie, As-tu essayé le source, parce que le fonctionnement ne correspond pas à ta description ?

Commentaire de lollie le 28/01/2005 14:02:06

c'est bon j'ai re-téléchargé le g_img.js mais celui sur votre page d'exemple!
ce n'est pas tout a fait le même que celui d'ici on dirait!
et ca marche beaucoup mieux!

la seule chose mais je vois pas d'où cela peut venir, quand l'image est agrandie je n'ai pas la petite barre de titre avec la croix pour fermer.

Commentaire de frva le 07/02/2005 07:55:08

moi non plus !!!

Commentaire de frva le 07/02/2005 07:56:12

En tout cas bravo c'est un bon paliatif de popup.

Commentaire de frva le 07/02/2005 08:10:25

c'est bizard l'image fermer et la barre du haut son présent lorsqu la photo est en chargement (2 secondes à peine) puis disparait lorsque la photo est en taille réel???

mais comment cela se fait t'il?

Commentaire de chimelpremier le 08/02/2005 20:10:19

frva et lollie, je vient de recompresser le zip. Si il ya toujours pblème, pouvez-vous m'indiquer votre config, car je n'ai pas testé au dessus de WIN 98.

Commentaire de lollie le 08/02/2005 21:51:42

personnellement je n'ai plus de problème!
j'ai téléchargé la version sur la page d'exemple et ca marche!

la barre avec la petite croix pour fermer est la car j'ai bien ajouté l'image dans le bon répertoire.

script nikel!

Commentaire de frva le 09/02/2005 12:28:58

Merci je vais voire si ça fonctinne sous XP pro.

Commentaire de bobybx le 10/03/2005 00:18:19

Très joli script, je vais tenter de l'insérer dans ma création web en cours... je verrai si je garde :)

Commentaire de chimelpremier le 19/03/2005 14:04:53

Josallart, il suffit de modifier la ligne 16 du script :
right=top="5px";
testé, ça marche
cordialement

Commentaire de chimelpremier le 19/03/2005 19:55:28

Josallart, concernant mon précédent message, il faudra télécharger la nouvelle version .

Commentaire de AlexFr23 le 14/04/2005 23:08:57

Bonsoir à vous tous,

Est-t'il possible que l'image soit limitée par un pourcentage maximale de l'explorateur (width="50%";height="50%";) par exemple : j'ai certaines photos qui prennent des proportions gigantesques, je ne voudrais pas devoir redim. toute mes photos pour qu'elles soient visible en pleine écran)
Mes Explication sont peut-être un peu flou
Pour faire simple : peut-on donner une dimention max au calque ?
Merci
Alex

Commentaire de chimelpremier le 15/04/2005 08:08:38

Modifier la fonction :

function imgOK(){
//arrête le compteur, copie le title dans l'entête du calque.
clearTimeout(actif);avs.firstChild.nodeValue=txt;

//image ne dépasse pas la fenêtre:
fx=gk?innerWidth-20:de.clientWidth   //l fenêtre
fy=gk?innerHeight:de.clientHeight      //h fenêtre
im.width=im.width>=fx?fx:im.width
im.height=im.height>=fy:im.height

//applique les dimensions à l'image.
im1.width=im.width;im1.height=im.height;
}

Je n'ai pas essayé, et pour une question de temps de chargement, il vaux mieux réduire la dimension des images
Cordialement
Michel

Commentaire de chimelpremier le 15/04/2005 08:11:26

erratum : remplacer de par db

Commentaire de AlexFr23 le 15/04/2005 23:17:54

Bonsoir,

Désolé, mais ça ne marche pas

- J'ai été obligé de modifié le code plus haut car il manquais un "?fy" sans cette modif, il y avais une erreur de script

- Maintenant, j'obtient une toute petite image, aussi petite que l'image de chargement

- Autre Bug rapporté au sujet de script de départ, je n'ai pas de bouton pour fermer le calque, est-ce normal ?

Merci de votre aide
Amicalement
Alex

Commentaire de chimelpremier le 16/04/2005 03:11:13

Après essais et pour garder les proprotions de l'image :

//image ne dépasse pas la fenêtre:
fx=gk?innerWidth-20:db.clientWidth   //l fenêtre
fy=gk?innerHeight:db.clientHeight      //h fenêtre
if(im.width>=fx){im.height*=(fx-20)/im.width;im.width=fx-20;}
if(im.height>=fy){im.width*=(fy-30)/im.height;im.height=fy-30;}


Commentaire de chimelpremier le 16/04/2005 03:15:51

Et pour le bouton, l' image fermer.gif doit se trouver dans le répertoire img
A+
Mchel

Commentaire de AlexFr23 le 20/04/2005 01:13:45

Géantissime !!!

Coup de chapeau pour ce script et pour l'aide fournie pour adapter celui-ci à mes caprices ! ;-p

Je vais mettre la meilleur note pour cela !!
c'est génial

PS: pour le bouton "fermer", j'avais une erreur dans le script due à Dreamweaver il y avais trop de ???? dans une ligne et ça faisait une erreur de script

Encore MERCI et bon courage pour la suite
Alex

Commentaire de Waichboub le 01/05/2005 05:52:19

Bonjour, je trouve ce script tout simplement magnifique !

Je voulais toutefois savoir si il était possible de parametrer le script afin que l'image soit affichée au centre de la page, en hauteur et en largeur ?

Merci d 'avance si une soluce existe !

Commentaire de Waichboub le 02/05/2005 06:48:33

Je reviens juste pour dire que le script fonctionne parfaitement sous MAC OSX...

Commentaire de chimelpremier le 02/05/2005 08:07:47

Bonjour Waichboub,
Ajoutes à la fin de la fonction imOK() :

//centrer dans la page
with(gdim.style){left=(fx-im.width)/2+"px";top=sy-12+(fy-im.height)/2+"px";}
}
Il faudra peut-être ajuster entre 10 et 15 la correction verticale.

Commentaire de Waichboub le 05/05/2005 19:22:05

Nikel chrome !!!! Merci beaucoup !

Commentaire de Waichboub le 05/05/2005 22:55:20

Visible sur www.59hardware.net :)

Commentaire de AlexFr23 le 10/05/2005 00:06:17

Salut à tous,
J'ai adapté votre script avec un BBcode [img] pour les forum phpBB seul soucis :
Sur les choix multiples des champs <input>, ils passent au travers du calque et se retrouvent au milieu de mes photos, y a t'il une solution ?

Merci de votre attention

Alex
PS : Je vais mettre une démo sur mon site pour mieux se rendre compte
http://surin.music.free.fr/démophpBB/

Commentaire de chimelpremier le 10/05/2005 10:20:23

bonjour,

// bug ie corrigé : cache les <select>
  elem=document.getElementsByTagName('select');

function voirSelect(v){
if(ie&!op){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}

dans la fonction imgOK, ajouter :
voirSelect('hidden')

il faudra rajouter une fonction pour les rendre à nouveau visibles
a+, Michel

Commentaire de chimelpremier le 10/05/2005 13:06:44

Voilà le source modifié. Vous pouvez voir le résultat :
http://perso.wanadoo.fr/michel.deboom/moncastel/gimg/gimg.htm

Commentaire de tguerlus le 10/05/2005 17:19:36

Salut chimelpremier,

Je suis allé sur ton site :
http://perso.wanadoo.fr/michel.deboom/moncastel/gimg/gimg.htm

Tout d'abord bravo pour ton script, c'est sympas comme tout.

Par contre, pour info, il y a une erreur de signalée :

Erreur : li.appendChild is not a function
Fichier Source : http://perso.wanadoo.fr/michel.deboom/moncastel/gimg/rolover.js
Ligne : 5

Rien de grave apparament, mais bon, ca fait pas propre.

Cordialement
TG

Commentaire de AlexFr23 le 10/05/2005 22:38:13

Respect !!

très très bon script

vraiment, bonne maîtrise !

Avec tous mes remerciement

Alex

Commentaire de chimelpremier le 11/05/2005 08:09:29

merci alexfr23. Tguerlus, j'ai supprimé le fichier qui ne servait pas, mais je ne sais pas comment tu as pu avoir cette erreur ni avec quelle conifg ?
cordialement
Michel

Commentaire de tguerlus le 11/05/2005 08:57:24

Tout simplement avec Mozilla firefox qui propose une console javascript qui est vraiment perfomante. On peut vraiment debugguer avec.

Cordialement.
TG

Commentaire de gipp le 02/06/2005 12:44:26

BRAVO !!!
Superbe code !!!
J'avais commencé un truc identique, mais j'ai préféré utiliser ton script que j'ai très légèrement modifié :
- Fermeture par un clic sur l'image ;
- Suppression du bouton "Fermer" ;
- Replacement de l'image toujours à gauche du navigateur à l'ouverture ;
- Annulation du re-dimensionnement de l'image.

Pour l'instant, je l'ai appliqué sur seulement une page de mon site web : http://www.partirou.com/nepal/ensemble/index.html .
Mais je pense appliquer ce code sur toutes mes pages. Donc merci beaucoup pour ce code.
Cordialement,
Gilles

Commentaire de chmel le 02/06/2005 13:25:32

Merci Gipp.Tes modifications sont un peu simplistes et il n'y a pas d'indication au visiteur pour fermer la fenêtre mais ça marche.

Par contre tu as mis trôp de photos sur la page
http://www.partirou.com/nepal/ensemble/photos_toutes.html
Plusieurs pages seraient mieux ou des vignettes plus petites, mème en ADSL c'est long.
Ton menu génère plein d'erreurs sous Firefox.

Commentaire de gipp le 03/06/2005 18:46:11

Merci CHMEL pour le test, mais celui-ci était un peu trop tôt car j'étais en pleine maintenance du site !
Maintenant c'est OK, vous pouvez tester cette page http://www.partirou.com/nepal/ensemble/photos_toutes.html

Vous y trouverez le script de Michel, ainsi que plusieurs autres script que j'ai développé, donc merci pour vos commentaires de tests.

Gilles

Commentaire de blueboy le 14/06/2005 17:31:33

Bonjour et merci à chimelpremier de nous faire profiter de son script au demeurant trés original. :-)

Simple question :
Je voulais savoir s'il était possible d'exploiter également les fichiers au format gif. (?)

Merci à vous
Cordialement.

Commentaire de chimelpremier le 14/06/2005 18:13:26

Bonjour blueboy, tu ajoutes |gif$
ligne 24

Commentaire de LunaticPandora le 15/06/2005 01:18:41

bonjour!

merci pour ce super script simple et pratique! ^^ une question cependant, pas essentielle mais bon : j'ai des boutons flash placés à environ 20% du haut de ma page. et... quand la fausse pop up s'affiche les boutons restent par dessus ^^" ce qui n'est pas terrible. alors certes je peux toujours placer la pop up un peu plus bas, mais ça serait plus sympa si elle pouvait simplement se mettre bien au premier plan! j'espere ne pas avoir posé de question stupide O_o" merci d'avance!

Commentaire de blueboy le 15/06/2005 16:28:20

Bonjour chimel

Ok, lu pour l'extention gif et c'est fonctionnel. ;-)

Merci et bonne continuation.
Cordialement

Commentaire de chimelpremier le 17/06/2005 09:26:27

Bonjour LunaticPandora, Il faudrait une adresse web pour se rendre compte!

Commentaire de Waichboub le 23/06/2005 13:05:15

Re, on m'a fait par de bug sous MAc OSX et Safari (impossible de refermer l'image)... Quelqu'un peut t-il me le confirmer ?

Commentaire de bobvador le 20/09/2005 15:49:46

Est ce que ce systeme est applicable avec du texte ? (exactement ce que je cherche mais pour du texte)

Commentaire de chimelpremier le 22/09/2005 09:42:16

Bonjour,
Waichbourg : refermer l'image correspond à appliquer le style display="none" au conteneur de l'image ?
bobvador : non, que les images, pour du texte (dans la page) j'ai testé ceci :
http://perso.wanadoo.fr/michel.deboom/moncastel/accessBul/bulle.htm

Commentaire de Lapinou47 le 29/10/2005 16:35:11

Chimel au secours !!

Voila 2 mois que je me casse les dents sur un conflit entre le menu DHTML de mes sites et ton script.
Le probleme semble concerner la ligne suivante : function Minit(){el=0;df=-1;if((_d.all&&_d.getElementById)&&!mac)_d.write("<"+"script>function getflta(ap){try{if(ap.filters){flta=1}}catch(e){}}<"+"/script>");for(x=0;x<parr.length;x++){if(!opra){fixb("menu"+parr[x]);popup(parr[x])}}if(ns4){_d.captureEvents(Event.MOUSEMOVE);oww=self.innerWidth-16;owh=self.innerHeight-17;window.onresize=function(){if(ww!=oww||wh!=owh)window.history.go(0)}}_d.onmousemove=getMouseXY;MScan();}for(a=1;a<menus;a++){dmenu("menu"+a)}if(mac45)Oload=window.onLoad;else Oload=window.onload;if(!ns61&&ns6||ns6hif){window.onload=mOL}else{Minit();sis();window.onload=mOL};setInterval("MScan()",150);
et ta ligne :
addEvent(window,"load",initLienImg)

Aucune fonction ne passe dans le body. Aide moi stp je vais me mutiler a coup de clavier si sa continue ^^
http://stl.marmande.free.fr/
http://cuir.armes.free.fr/

Commentaire de ph0k le 05/11/2005 07:26:28

J'ai un petit probleme :
Enfait ton script charge les images dans une nouvelle page tout seule rien que pr la fenetre JS :(

Commentaire de chimelpremier le 09/11/2005 10:09:01

Lapinou 47, aulieu de window.onload=mOL, tu devrais mettre:
addEvent(window,"load",mOL)
phOk, javascript semble désactivé chez toi

Commentaire de chenzydeux le 05/01/2006 10:54:20

Bonjour à tous
d'abord bravo et merci pour ce script très sympathique
Par contre, j'ai juste un petit glitch, lorsque l'image est plus haute que large (261px par 392px), elle est ouverte dans une fenêtre carrée (392x392), et non aux dimensions de l'image rectangulaire. Des suggestions?
Merci

Commentaire de chimelpremier le 05/01/2006 11:25:49

Bonjour chenzydeux,
Donnes plus de précision car dans ma page test il n'y a pas de soucis : http://moncastel.9online.fr/gimg/gimg.htm

Commentaire de chimelpremier le 05/01/2006 11:34:13

Ah si !
Le texte du "title" ne doit pas être plus long que la largeur d'image. Sur certains navigateurs, le texte ne passe pas à la ligne et c'est le div qui s'élargie.  

Commentaire de chenzydeux le 05/01/2006 15:04:11

Bonjour Chimelpremier,
C'est en effet le title qui est plus long que la largeur de l'image, merci pour ton aide et bravo pour l'efficacite et la rapidité de la réponse.
Voici l'adresse du site : www.praxsys.fr. Par contre, les modifs en incluant ce script non pas encore été uploadés, courant semaine prochaine je pense. N'hesites pas à donner l'adresse du site pour exemple, tout en sachant qu'il n'y a qu'une image par page (et uniquement dans les pages suivantes (www.praxsys.fr/Page DS900i.html;www.praxsys.fr/Page DS800d.html;www.praxsys.fr/Page TDA400.html).
Autre question, (je ne sais pas si c'est le bon endroit pour la poster, et m'en excuse d'avance, mais je suis novice des forums ;~) existe-t-il un script javascript/html executable coté client pour permettre la recherche par mots clés sur le site entier, sans rien executer coté serveur? Je n'ai pas encore trouvé mais continu néanmoins à chercher.
Encore merci et encore bravo!!!
chenzydeux

Commentaire de gort1 le 19/02/2006 12:47:36

Bonjour, je découvre ce scrpit avec une exitation qui n'est pas courante.
je suis entrain de faire des tests et je suis à 90% du résultat final que je souhaiterai pour mon site.
La page de test que j'ai crée pour la mise en place du script est à l'adresse suivante:
http://www.mp-studio.com/top80/annees/1985/1985test.html
Vous pouvez avoir un apperçu sur les titres:
1: "tarzan boy" - baltimora (lettre B)
2: "brick" - Fake (lettre F)
3: "futur brain" - den harrow (lettre H)
pour le moment juste ces 3 titres pour les tests.

Il me reste à changer le positionement du calque que je devrais pouvoir faire seul mais ce que je ne comprend pas, c'est pourquoi:
1: toutes les images dans la page ont un cadre.
2: je ne peux plus selectionné du texte dans la page.

voila mes deux questions sinon je peux vous dire que c'est la première fois que je met les mains dans un script et que je remercie CHIMELPREMIER de l'avoir créer et d'en faire profiter la population. Merci à lui et merci pour vos réponse.

ps: une fois que tous sera ok dans la page test, toutes les pages du site seront équipées de ce script absolument 80's

Commentaire de gort1 le 19/02/2006 13:07:13

re bonjour:

je problème de cadre d'image à disparut avec le fichier "gimg.css" pris sur ta page de test

Commentaire de rolandjv2080 le 27/02/2006 23:51:19

Bonjour, bravo pour le script ! Il y a longtemps que je cherchai quelque chose comme ça pour mon site.

J'ai deux questions :

Je ne suis pas vraiment un professionnel de la programmation, mais je souhaiterai remplacer l'actuelle police "fantaisie" par une police plus conventionnelle style Verdana. Comment procéder ?

À quoi sert la fonction hsrc="" ?

Merci de votre aide
Bien cordialement

Commentaire de cathuba le 01/03/2006 09:56:45

Bonjour,
webmaster novice, j'ai réussi à utiliser votre script avec succès (après quelques déboires !) pour les nombreuses photos du site que j'essaie de faire.
Merci !
Voici l'adresse, comme vous le demandez, pour exemple : http://www.koloni-asso.org/
Il faut aller dans le menu "album photos"

Cordialement

Commentaire de johann1 le 16/09/2006 14:43:45

Superbe petit site Cathuba !
Et le script de Chimelpremier, lui convient bien !
Bonne continuation !

Commentaire de piwozdiwect le 26/03/2007 21:32:28

Bonjour, je suis vraiment bluffé par ce script, qui correspond exactement à ce que je recherche depuis longtemps !

Mais j'ai un problème
Le script nu fonctionne sans problème avec tous les navigateurs que j'ai pu tester
Par contre, intégré à mon site donc associé à Dotclear2, il y a un bug avec Internet Explorer 6 : le popup reste petit et bloqué sur "patientez svp"
cela fonctionne par contre très bien avec firefox ou internet Explorer 7

J'imagine qu'il doit y avoir un conflit entre les fonctions du script et les fonctions de Dotclear2... Quelqu'un a une idée de ce qui peut bien se passer ?
voici le lien de la page : http://www.electron-liberezvous.com/garocheurs/index.php?category/hongrie

Merci d'avance

Pierro

Commentaire de piwozdiwect le 20/04/2007 11:38:13

je retire ce que j'ai dit !!!

Une petite mise à jour du code et plus de problèmes !

Ce script est vraiment excellent, merci beaucoup !!!!!!!

Commentaire de adex91 le 31/01/2008 18:20:16

Bonjour,

Le script est visible à : http://r1223.adelex.fr/journal.html

J'en suis très contant, mais je n'arrive pas à fermer la pseudo pop-up avec un 'onmouseout'

J'ai rajouté la fonction :

function clsimage(){
??? <- c'est là ou je sêche.
}

qui est appelé par : if(result!=-1){l[i].onmouseout=clsimage()}

si vous pouvez m'aider.

Merci d'avance,

Xav'

Commentaire de Aerus le 10/02/2009 14:09:47 10/10

Bravo et merci pour ce script. Exactement ce que je cherchais à reproduire depuis des mois. Comme demandé voici le site sur lequel vous pourrez voir le résultat : www.luxury-club.fr
Plus précisément sur les pages détails des news (http://www.luxury-club.fr/news.php) et également sur les pages détails des véhicules (http://www.luxury-club.fr/location/Ferrari/F430.php). Je vais au fur et à mesure l'appliquer à tout le site. MERCI

Commentaire de nossoctoruss le 08/02/2010 01:39:07

merci!tu me donne une piste que je cherchait depuis bien longtemps!car ton code fait des fenetres modales et que j'essaye de trouver un code de fenetres modales sans php,si je prend un petit peu de mon temp,j'aurais ce que je veux!merci,t un géniale,mem si c'est peut etre pas de toi le code,tu me l'a fait découvrir et je t'en suis reconnaisant!mais par cont,jle un peu customisé ta fenetre du genre wn 98==>a==>win7 !
bye

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,636 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales