calque et image - HTML/CSS - Programmation
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
Marsh Posté le 05-04-2004 à 09:44:29
Liothan a écrit : Bonjour, |
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...
Marsh Posté le 05-04-2004 à 10:36:37
Liothan a écrit : |
ça commence déjà mal
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 /