Rechercher : dans
Par :

Agrandir image sur un site

Dernière réponse le 1 mai 2008 à 19:52:55 vaness, le 28 mar 2005 à 20:15:44 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « agrandir image sur un site » dans :
Agrandir une image de petite taille VoirQuand l'ordinateur agrandit une image, il doit "inventer" les pixels manquants. Il existe différentes méthodes de calcul pour inventer ces pixels. Sommaire: Photo Dessin au trait Recommandations pour de meilleurs résultats Liens Le...
Afficher les images et les animations Flash dans le navigateur VoirQuand vous allez sur un site internet, vous n'avez plus d'images affichées ; elles sont remplacées par un petit rectangle avec un carré rouge ou un triangle bleu (par exemple). 1 - Vérifier d'abord les paramètres de votre navigateur : Pour...

1

daniel le cordonnier, le 28 mar 2005 à 21:12:12
  • +1

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

marie-claude, le 24 aoû 2006 à 22:14:54

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

fanou, le 25 aoû 2006 à 08:30:51
  • +1

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+",width="+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></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+"+mh+"))/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

caroll13340, le 15 mar 2008 à 13:18:27
  • +1

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

caroll13340, le 15 mar 2008 à 14:21:32

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

legros0, le 13 déc 2007 à 21:33:44

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

sinifer, le 19 fév 2008 à 10:44:11

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

Bouzouki, le 23 avr 2008 à 17:22:50

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

graffx, le 15 mar 2008 à 15:11:58

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=45­0');return(false)">(img src="../images/nom_vignette.jpg"></a>

Répondre à graffx

11

Bouzouki, le 23 avr 2008 à 17:30:40

Bjr
dans ton exemple, c koi le tout premier "#" ?
Merci d'avance

Répondre à Bouzouki

9

caroll13340, le 16 mar 2008 à 09:15:18

Merci beaucoup je vais essayer mais ca va pas etre evident novice enfin on verra bien grand merci encore

Répondre à caroll13340

12

sinifer, le 28 avr 2008 à 09:38:23

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

Bouzouki, le 28 avr 2008 à 12:57:57

Merci beaucoup Sinifer !
Lien très utile !
:)

Répondre à Bouzouki

14

 Falgor, le 1 mai 2008 à 19:52:55

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
Collection CommentÇaMarche.net