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.
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 --
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
-
-
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...