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
- Image iso - Guide
- Légender une image - 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