Comment refermer une image agrandie
Marie31
-
Marie31 -
Marie31 -
Bonjour,
Sur mon site j'ai des images qui sont en petit format quand on clique dessus elles s'ouvrent en grand format. Comment faire pour revenir sur la page du site. Quel code html faut-il ajouter ?
<p><a href="plan_sous_sol.jpg"><img
style="border: 0px solid ; width: 305px; height: 284px; float: left;"
title="Cliquer pour agrandir l'image"
alt="Cliquer pour agrandir l'image"
src="thumbnail/TN-plan_sous_sol.jpg" hspace="10"
vspace="20"></a></p>
Merci beaucoup.
Sur mon site j'ai des images qui sont en petit format quand on clique dessus elles s'ouvrent en grand format. Comment faire pour revenir sur la page du site. Quel code html faut-il ajouter ?
<p><a href="plan_sous_sol.jpg"><img
style="border: 0px solid ; width: 305px; height: 284px; float: left;"
title="Cliquer pour agrandir l'image"
alt="Cliquer pour agrandir l'image"
src="thumbnail/TN-plan_sous_sol.jpg" hspace="10"
vspace="20"></a></p>
Merci beaucoup.
A voir également:
- Comment refermer une image agrandie
- Comment agrandir une image - Guide
- Légender une image - Guide
- Image iso - Guide
- Comment rechercher une image sur google - Guide
- Reduire taille image - Guide
2 réponses
Ton soucie viens du fait que tu ouvre directement l'image et non une page contenant l'image ^^
le plus simple serait de créé une page qui recois l'image avec un lien retour index , ou un lien sur l'image qui renverait a l'index;
sinon avec du php , une seul page contenant suffirait.
__
_/ \_____________________
\__/ - diablobros was here -
le plus simple serait de créé une page qui recois l'image avec un lien retour index , ou un lien sur l'image qui renverait a l'index;
sinon avec du php , une seul page contenant suffirait.
__
_/ \_____________________
\__/ - diablobros was here -
Bonjour,
Moi j'ai utilisé un pseudo popup regarde sur le site http://editionsgracianne.free.fr/livres/Pays_De_Sorcieres.php si tu clique sur l'image, tu a la version grande avec sa légende au dessus mais surtout un bouton pour fermer cette image.
dans le head j'ai mis le chemin du fichier javascript:
et le contenu de ce fichier javascript (à paramétrer sur les premières lignes):
Note: la partie en gras est l'image du bouton de fermeture.
Voila, si ça peut t'aider...
Moi j'ai utilisé un pseudo popup regarde sur le site http://editionsgracianne.free.fr/livres/Pays_De_Sorcieres.php si tu clique sur l'image, tu a la version grande avec sa légende au dessus mais surtout un bouton pour fermer cette image.
dans le head j'ai mis le chemin du fichier javascript:
<script language="javascript" src="../scripts/g_img.js" type="text/javascript"></script>
et le contenu de ce fichier javascript (à paramétrer sur les premières lignes):
<!-- redirection des liens image jpg. Michel Deboom 05/2005
// Création de la pseudo-popup :
fe='<div id="pop" style="position:absolute;left:250px;top:350px;display:none;z-index:200;background-color:#FFFFFF;border:3px outset;'
//ajoute une ombre pour IE seulement
fe+='filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#000000,strength=6)">'
fe+='<div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="cursor:move;background-color:#FFFFFF;line-height:18px;color:#267726;font-size:12px;padding:0 20px 0 .5em;font-family: Arial;">'
fe+='entête<img title="Fermer" src="../images/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" height="14" width="16"'
fe+='style="cursor:default;position:absolute;margin:1px;right:0;top:0; " /></div></div>'
function initLienImg(){
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
gdim=D.getElementById('pop'); lx=D.getElementById('tet')
addEvent(D,"mousemove",controle_position)
elem=document.getElementsByTagName('select');
//création de l'image
im1=D.createElement("img");gdim.appendChild(im1);
with(im1.style){border=0;margin="1px";}
//écriture des évènements
l=D.getElementsByTagName('a');
for(var i=0;i<l.length;++i){
//ajoute onclick=grdimg dans liens image avec extention .jpg ou .JPG
result=l[i].href.search(/jpg$|JPG$/);
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
}
//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;
//l'affiche en grandeur réduite repositionnée.
with(gdim.style){display="block";top=sy+2+'px'};
with(im1){src=im.src;width=height=100};
if(!cr)cr=gdim.offsetHeight-127;
if(gk)im1.style.marginBottom=-cr+"px";//correction Gecko
//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;
//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(){
//éxécute imgOK quand c'est terminé
im.complete?imgOK():
//sinon relance le contrôle toutes les 100 ms
actif=setTimeout('controleChargement()',100)
}
function imgOK(){ // image chargée.
clearTimeout(actif);lx.firstChild.data=txt;
//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;}
//applique les dimensions recalculées à l'image.
im1.width=im.width;im1.height=im.height;
voirSelect('hidden')
}
// bug ie corrigé : cache les <select>
function voirSelect(v){
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}
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
addEvent(window,"load",initLienImg)
D.write(fe)
//-->
Note: la partie en gras est l'image du bouton de fermeture.
Voila, si ça peut t'aider...
Mon problème sur mon site cette photo agrandie tu ne peux pas la fermer