Accueil > > > 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
 Description
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
 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
 Sources de la même categorie
 Commentaires et avis
|
Derniers Blogs
 UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|