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
 [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|