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 / Exemple :
<!-- 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
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.