KioskeaKioskeaCommentCaMarcheInscrivez-vous, c'est gratuit !
Vendredi 16 mai 2008 - 08:21:25

Agrandir image sur un site

Rechercher : dans
agrandir image sur un site
par vaness
 Fil de Discussions
Statut : Non résolu
lundi 28 mars 2005 à 20:15:44
salut!
j'ai crée mon site avec frontpage, et j'aimerais qu'on puisse agrandir les images en ouvrant une nouvelle page en cliquant dessus.
vous savez comment on fait?

merci!!
Répondre à vaness  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par daniel le cordonnier, le lundi 28 mars 2005 à 21:12:12 Fil de Discussions
slt je crois quil suffit de faire 1 image + grande dans ta new page
avec 1 lien qui l'amene dessus ( lien sur sur la page d'avant ) dis moi si ca marche et si tu veux donne adresse de ton site pour le visiter
Répondre à daniel le cordonnier

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par marie-claude, le jeudi 24 août 2006 à 22:14:54 Fil de Discussions
bonjour,
je viens de trouver une réponse à ta question en allant sur le site

www.allhtml.com/articles/details/292

Il semblerait que ce ne soit pas compatible avec Netscape.

A essayer quand même....
Répondre à marie-claude

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par fanou, le vendredi 25 août 2006 à 08:30:51 Fil de Discussions
Bonjour à tous

vaness :
Pour agrandir une photo en cliquant sur une vignette, voici un code :

Dans le <head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function PopupImage(image) {
var titre="";
var texte="";
var imgtitle="";
var alt="";
var style="popup.css";
var h = 250;
var l = 250;
var mh = 60;
var mv = 20;
var ln = 10;
var hn = 30;
var lfm,hfm,hautfm,gauchefm;
if (typeof self.innerHeight != 'undefined')
{
ln2 = self.outerWidth-document.body.offsetWidth;
hn2 = self.outerHeight-self.innerHeight;
hautfm = self.screenY;
gauchefm = self.screenX;
lfm = self.outerWidth-ln2;
hfm = self.innerHeight+hn2;
}
else if (typeof document.documentElement != 'undefined' && document.documentElement.clientHeight != 'undefined')
{
hautfm = window.center;
gauchefm = window.center;
lfm = document.documentElement.clientWidth-ln;
hfm = document.documentElement.clientHeight-hn;
}
else if (typeof document.body != 'undefined')
{
hautfm = window.center;
gauchefm = window.center;
lfm = document.body.clientWidth-ln;
hfm = document.body.clientHeight-hn;
}
var PosX = Math.round(( hfm - h ) / 2)+hautfm;
var PosY = Math.round(( lfm - l ) / 2)+gauchefm;
var option = "resizable,toolbar=no,scrollbars=no,top="+PosX+",left="+PosY+",wi­dth="+l+",height="+h+"";
w=open('',"titre",option);
w.document.write("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>");
w.document.write("<html xmlns='http://www.w3.org/1999/xhtml'>");
w.document.write("<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />");
w.document.write("<html><head><title>"+titre+"</title&­gt;</head>");
w.document.write("<link href='"+style+"' rel='stylesheet' type='text/css' />");
w.document.write("<script type=text/javascript>function checkSize() { if (document.images[0].width > 1 && document.images[0].height > 1) { window.resizeTo(document.images[0].width+"+ln+"+"+mv+",document.images­[0].height+"+hn+"+"+mh+")} else { setTimeout('checksize()',250) } }</"+"script>");
w.document.write("<script type=text/javascript>function centerPopup() { window.moveTo(Math.round(("+lfm+"-(document.images[0].width+"+mv+"))/2­)+"+gauchefm+",Math.round(("+hfm+"-(document.images[0].height+"+m­h+"))/2)+"+hautfm+");}</"+"script>");
w.document.write("<body onload='checkSize();centerPopup()' onblur='window.close()' onclick='window.close()'>");
w.document.write("<div class='cadreh'></div><div class='cadreg'></div><div class='cadrec'><img src='"+image+"' class='image' alt='"+alt+"' title='"+imgtitle+"'></div><div class='cadred'></div><div class='cadreb'><div class='legende'>"+texte+"</div></div>");
w.document.write("</body></html>");
w.document.close();

} // -->
</SCRIPT>

Dans le< body> à l'endroit de la photo :


<a onclick="PopupImage(this.href);return false;" href="grande_photo.jpg"><img src="petite_photo.jpg"</a></td>


L'ami est le pilier qui reste debout, même quand tout s'effondre.
Fanou
Répondre à fanou

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par caroll13340, le samedi 15 mars 2008 à 13:18:27 Fil de Discussions
bonjour j ai ouvert un blog et mes foto sont compresser on ma conseiller d aller sur tynipic pour les agrandir mais ca marche pas a tu une formule magique merci a vous
Répondre à caroll13340

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par caroll13340, le samedi 15 mars 2008 à 14:21:32 Fil de Discussions
bonjour je suis novice et je voudrais savoir comment agrandir mes images vous avez plein de formule mais il faut les mettre ou merci
Répondre à caroll13340

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par legros0, le jeudi 13 décembre 2007 à 21:33:44 Fil de Discussions
Simple. Voici le code html: <a href="nom_de_l_image.jpg">ICI l'image taille réduite</a>
Alors une fois que tu aura cliqué sur l'image en taille réduite, elle apparaîtra en grand, comme quand tu cliques sur une image sur Goooooooooooooooooooogle.
J'éspère que sa t'aura aidé...
Répondre à legros0

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par sinifer, le mardi 19 février 2008 à 10:44:11 Fil de Discussions
je sai pas si j'ai bien compris mais tu souhaite pouvoire passé ta souris dessu et ke sa agrandisse l'image et que aussi tu puisse entré dans un liens??? ben si c'est sa voila le code


dans ton css

a img {border:none}
a:hover {border:0px} /*hack pour IE */
a:hover img {width:300px ; height:216px}

et html

<p><a href="http://www.yahoo.fr"><img src="images/Fax1.gif" width="180" height="72" border="0"></a></p>

et sa marchera
Répondre à sinifer

10


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par Bouzouki, le mercredi 23 avril 2008 à 17:22:50 Fil de Discussions
Bjr sinifer
Dans le css, c koi "a img" et "a:hover img" ?
"a" tout seul je comprends (idem a:hover) mais pas "a img"

Tu pourrais me mettre le html et le css complet en réponse pour que je comprenne ?
Merci d'avance.
Répondre à Bouzouki

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par graffx, le samedi 15 mars 2008 à 15:11:58 Fil de Discussions
tu a une petite image




lorsque tu clic dessus, une popup s' ouvre et t' agrandis l' image de la vignette dans cette popup:



<a HREF="#" onclick="window.open('../images/nom_grande_image.jpg','Popup','toolbar=0,location=0,d­­irectories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=350,height=4­5­0');return(false)">(img src="../images/nom_vignette.jpg"></a>
Répondre à graffx

11


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par Bouzouki, le mercredi 23 avril 2008 à 17:30:40 Fil de Discussions
Bjr
dans ton exemple, c koi le tout premier "#" ?
Merci d'avance
Répondre à Bouzouki

9


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par caroll13340, le dimanche 16 mars 2008 à 09:15:18 Fil de Discussions
merci beaucoup je vais essayer mais ca va pas etre evident novice enfin on verra bien grand merci encore
Répondre à caroll13340

12


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par sinifer, le lundi 28 avril 2008 à 09:38:23 Fil de Discussions
désolé bouzouki de répondre que maitenant mais je vais te montré un site ou j'ai pris ce que je t donnée jespère que tu arrivera mieu avec sa mais aussi dit nous ou tu en est que l'on puissse savoir saha

http://batraciens.net/css-astuces/image-survol-zoom.htm

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none} /* pas d'encadrement des images */
a:hover {border:0px } /* hack pour IE - ne sert sinon à rien */
a:hover img {width:300px ; height:216px} /* agrandi les images lors du survol */
</style>
</head>

<body>


<a href="#"><img src="image.jpg" width="200" height="144" alt=""></a>

</body>
</html>



Répondre à sinifer

13


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par Bouzouki, le lundi 28 avril 2008 à 12:57:57 Fil de Discussions
Merci beaucoup Sinifer !
Lien très utile !
:)
Répondre à Bouzouki

14


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par Falgor, le jeudi 1 mai 2008 à 19:52:55 Fil de Discussions 
Merci mille fois !

Pour ceux qui n'arrivent pas à garder les proportions, dont les images partent à droite ou à gauche, je leur suggère de bien regarder la syntaxe car c'est souvent la cause du problème ( je viens de passer 2 heures sur des forums à garder les mêmes erreurs ).

Bonne journée
Répondre à Falgor
Discussions pertinentes trouvées dans le forum
28/03 20h15agrandir image sur un siteWebmastering01/05 19h5214
26/01 10h53Agrandir Image de Fond d'un ForumInfographie/Photo27/01 19h105
22/06 11h43agrandir image .gifLogiciels/Pilotes22/09 13h463
28/02 09h12recherche agrandir images sans popupWebmastering17/04 09h381
23/07 20h36agrandir image progressivement sur un cliqueProgrammation23/07 20h411
Plus de discussions sur « agrandir une image sur un site » Discussion en cours Discussion fermée Problème résolu
Répondre
Titre du message :
Votre pseudo:
Votre email :
Message: 
  •  
  •  
Options: Recevoir les réponses par mail.
 

Aide