Comment refermer une image agrandie

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.



A voir également:

2 réponses

Utilisateur anonyme
 
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 -
0
Marie31
 
je te remercie mais tu ne reponds pas exactement à ce que je veux faire. Tu prends par exemple un article de journal tu ouvres une photo en grand , tu peux refermer cette photo agrandie et tu es toujours sur le même article ou page.

Mon problème sur mon site cette photo agrandie tu ne peux pas la fermer
0
txiki Messages postés 6596 Date d'inscription   Statut Contributeur Dernière intervention   521
 
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:
<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...


0
Marie31
 
Je te remercie mais la partie en gras ne s'est pas affichée. Je ne suis pas assez pro pour mettre en place toutes tes explications. Il y a peut être plus simple. A bientôt
0