calque et image

calque et image - HTML/CSS - Programmation

Marsh Posté le 04-04-2004 à 10:44:55    

Bonjour,  
 
J'ai recup un script pour charger des images dans un calque. J ai reussi a le modifier pour placer le calque a l endroit ou je veux mais meme en donnant une taille defini au calque celui prend qd meme la taille de l image, c'est embetant parceque je voudrai centrer l image dans le calque.  
Si qq un pouvai me donner un coup de main pour voir d ou viens le probleme. Ce script et ds un fichier js qui fonctionne avec une page html, les liens sont d sla page html et font appels a ce script
merci d avance  
 
CODE :  
<!-- redirection liens image jpg. Michel Deboom 07/02/2004  
 
//Insérer en fin de body : <script type="text/javascript" src="g_img.js">  
 
//Affiche l'image et le message.  
function grdimg(){  
//évalue le scroll vertical  
sy=gk?pageYOffset:db.scrollTop;  
//charge l'image dans le cache du navigateur.  
im=new Image();im.src=this.href;  
//l'affiche en grandeur réduite pour voir la progression du chargement.  
im1.src=im.src;af(gds);im1.width=im1.height=100;  
//montre le message d'attente et le positionne par rapport à l'ascenceur vertical.  
as.top=sy+85+'px';af(as)  
//colore le lien comme visité.  
this.style.color='gray';  
//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(){  
//éxecute imgOK quand c'est terminé  
im.complete?imgOK():  
//sinon relance le contrôle toutes les 100 ms  
actif=setTimeout('controleChargement()',100)}  
 
//si le chargement est terminé:  
function imgOK(){  
//arrête le compteur et cache le message.  
clearTimeout(actif);ef(as);  
//positionne l'image et lui applique ses dimensions réelles.  
gds.top=sy+195+'px';im1.width=im.width;im1.height=im.height;  
}  
 
//montrer un objet  
function af(obj){obj.display=""}  
//le cacher  
function ef(obj){obj.display="none"}  
 
//initialisation :  
function initLienImg(){  
//Détection Gecko, dom  
gk=window.Event?1:0;  
//détection doctype IE6,OP7  
de=document.documentElement.clientWidth>=1?1:0  
db=de?document.documentElement:document.body  
 
//Création des éléments :  
//Calque contenant l' image  
gdim=document.createElement("div" );document.body.appendChild(gdim);gds=gdim.style;  
//Ses attributs  
with(gds){position="absolute";left="445px"; top="230px"; width="350px"; height="350px"; zIndex="1",display="none";}  
//Lien contenant l'image du calque.  
lien_img=document.createElement("a" );gdim.appendChild(lien_img);  
//Fonction et message pour cacher cette image  
with(lien_img){href='javascript:ef(gds)';title=" Cliquez pour cacher l'image ";className="trsp"}  
//création de l'élément image  
im1=document.createElement("img" );lien_img.appendChild(im1);  
with(im1.style){  
//ajoute une bordure blanche  
//border="6px solid white";  
//ajoute une ombre pour IE seulement  
filter="progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)"}  
//message pendant le chargement de l'image.  
avs=document.createElement("div" );avs.appendChild(document.createTextNode("Patientez svp ..." ));  
document.body.appendChild(avs);as=avs.style;  
//Ses attributs  
with (as)  
{position="absolute";color="black";fontSize="2em";zIndex="50";width="300px";display="none";}  
 
//écriture des évènements  
lien=document.links  
for(var i=0; i < lien.length; ++i){  
//ajoute onclick=grdimg dans liens image  
result=lien[i].href.search(/jpg$|JPG$/);  
if(result!=-1){lien[i].onclick=grdimg;}  
}  
}  
//lance le script, peut être aussi écrit dans la balise body avec onload  
initLienImg()  
 
//-->  
 
CODE /

Reply

Marsh Posté le 04-04-2004 à 10:44:55   

Reply

Marsh Posté le 05-04-2004 à 09:38:39    

trouve dans ton code la balise <img src='image.png' .. et ajoute width='la taille max heigth='taille max'>  ... tu peu meme faire appel au javascript pr donner cet attribut que si l image est plus grande que le calque

Reply

Marsh Posté le 05-04-2004 à 09:44:29    

Liothan a écrit :

Bonjour,  
 
J'ai recup un script pour charger des images dans un calque. J ai reussi a le modifier pour placer le calque a l endroit ou je veux mais meme en donnant une taille defini au calque celui prend qd meme la taille de l image, c'est embetant parceque je voudrai centrer l image dans le calque.  
Si qq un pouvai me donner un coup de main pour voir d ou viens le probleme. Ce script et ds un fichier js qui fonctionne avec une page html, les liens sont d sla page html et font appels a ce script
merci d avance  
 
CODE :  
<!-- redirection liens image jpg. Michel Deboom 07/02/2004  
 
//Insérer en fin de body : <script type="text/javascript" src="g_img.js">  
 
//Affiche l'image et le message.  
function grdimg(){  
//évalue le scroll vertical  
sy=gk?pageYOffset:db.scrollTop;  
//charge l'image dans le cache du navigateur.  
im=new Image();im.src=this.href;  
//l'affiche en grandeur réduite pour voir la progression du chargement.  
im1.src=im.src;af(gds);im1.width=im1.height=100;  
//montre le message d'attente et le positionne par rapport à l'ascenceur vertical.  
as.top=sy+85+'px';af(as)  
//colore le lien comme visité.  
this.style.color='gray';  
//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(){  
//éxecute imgOK quand c'est terminé  
im.complete?imgOK():  
//sinon relance le contrôle toutes les 100 ms  
actif=setTimeout('controleChargement()',100)}  
 
//si le chargement est terminé:  
function imgOK(){  
//arrête le compteur et cache le message.  
clearTimeout(actif);ef(as);  
//positionne l'image et lui applique ses dimensions réelles.  
gds.top=sy+195+'px';im1.width=im.width;im1.height=im.height;  
}  
 
//montrer un objet  
function af(obj){obj.display=""}  
//le cacher  
function ef(obj){obj.display="none"}  
 
//initialisation :  
function initLienImg(){  
//Détection Gecko, dom  
gk=window.Event?1:0;  
//détection doctype IE6,OP7  
de=document.documentElement.clientWidth>=1?1:0  
db=de?document.documentElement:document.body  
 
//Création des éléments :  
//Calque contenant l' image  
gdim=document.createElement("div" );document.body.appendChild(gdim);gds=gdim.style;  
//Ses attributs  
with(gds){position="absolute";left="445px"; top="230px"; width="350px"; height="350px"; zIndex="1",display="none";}  
//Lien contenant l'image du calque.  
lien_img=document.createElement("a" );gdim.appendChild(lien_img);  
//Fonction et message pour cacher cette image  
with(lien_img){href='javascript:ef(gds)';title=" Cliquez pour cacher l'image ";className="trsp"}  
//création de l'élément image  
im1=document.createElement("img" );lien_img.appendChild(im1);  
with(im1.style){  
//ajoute une bordure blanche  
//border="6px solid white";  
//ajoute une ombre pour IE seulement  
filter="progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)"}  
//message pendant le chargement de l'image.  
avs=document.createElement("div" );avs.appendChild(document.createTextNode("Patientez svp ..." ));  
document.body.appendChild(avs);as=avs.style;  
//Ses attributs  
with (as)  
{position="absolute";color="black";fontSize="2em";zIndex="50";width="300px";display="none";}  
 
//écriture des évènements  
lien=document.links  
for(var i=0; i < lien.length; ++i){  
//ajoute onclick=grdimg dans liens image  
result=lien[i].href.search(/jpg$|JPG$/);  
if(result!=-1){lien[i].onclick=grdimg;}  
}  
}  
//lance le script, peut être aussi écrit dans la balise body avec onload  
initLienImg()  
 
//-->  
 
CODE /
 


 
1) Tu ne pourras pas centrer verticalement ton image dans ton calque avec un div. Le centrage vertical ne fonctionne pas.
Il faut ruser, utiliser javascript pour connaitre la taille de l'image et déduire son positionnement et sa taille en fonction de ses données.
C'est plus compliqué qu'il n'y parait.
 
- Si ton image est carrée et ton image < div, pas de problème --> image centrée dans le div en hauteur et en largeur.
 
- Si ton image est carrée et ton image > div, taille de l'image --> taille du div.
 
- Si ton image est rectangle et que largeur > hauteur etc... etc...
 
A toi de réfléchir.
 
Dans tous les cas, ce sera pas simple pour avoir quelque chose qui fonctionne dans tous les cas.
 
J'ai pour ma part fait plusieurs fois des albums photos en utilisant PHP et le même principe...

Reply

Marsh Posté le 05-04-2004 à 10:36:37    

Liothan a écrit :


J'ai recup un script  


 
ça commence déjà mal :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Sujets relatifs:

Leave a Replay

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