A voir également:
- [images] Affichage capricieux.
- Images gratuites - Guide
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Les paramètres d'affichage nvidia ne sont pas disponibles ✓ - Forum Carte graphique
- Google images - Guide
10 réponses
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
15 oct. 2006 à 16:53
15 oct. 2006 à 16:53
Bonjour.
Pour faire des miniatures, tu as plusieurs solutions :
-En Javascript (je ne sais pas faire, mais voir un exemple : http://clb56.freezee.org/galerie_photo/?galerie )
-En php. Je ne sais pas faire non plus.
-En CSS, c'est très simple.
Il suffit de faire un lien, avec un id, par exemple :
<a id="photo1" href="photo1.jpg">Photo1</a>
Et le CSS :
a#photo1 {
background-image : url(photo1.jpg)
width:dimensions;
height:idem;
}
Et voila !
Pour faire des miniatures, tu as plusieurs solutions :
-En Javascript (je ne sais pas faire, mais voir un exemple : http://clb56.freezee.org/galerie_photo/?galerie )
-En php. Je ne sais pas faire non plus.
-En CSS, c'est très simple.
Il suffit de faire un lien, avec un id, par exemple :
<a id="photo1" href="photo1.jpg">Photo1</a>
Et le CSS :
a#photo1 {
background-image : url(photo1.jpg)
width:dimensions;
height:idem;
}
Et voila !
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
15 oct. 2006 à 17:30
15 oct. 2006 à 17:30
Oups !
Ca ne marche pas sous IE !
Voici la solution :
http://css.mammouthland.net/zoomer-une-image-avec-css.php
Ca ne marche pas sous IE !
Voici la solution :
http://css.mammouthland.net/zoomer-une-image-avec-css.php
Merci SSylvain, C'est chouette, mais le problème, c'est qu'il est dit dans la 2° technique, que l'image est lourde et plus longue à charger.... Or,, c'est justement parce que je crois que mes images sont déjà trop longues à charger que je cherche à les réduire.....
Car je suppose que c'est pour cela que l'affichage de mes images est capricieux!..... Sinon, ce serait bien.....
Car je suppose que c'est pour cela que l'affichage de mes images est capricieux!..... Sinon, ce serait bien.....
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
15 oct. 2006 à 21:18
15 oct. 2006 à 21:18
Tu peux réduire tes images avec divers logiciels de graphisme, et avec :
http://tools.dynamicdrive.com/imageoptimizer/
http://tools.dynamicdrive.com/imageoptimizer/
Merci, mais j'ai un programme pour cela..... Seulement, j'aimerais quand même pouvoir les charger en petit, puis les agrandir une à une en cliquant dessus!!!!
Aurais-tu la gentillesse d'aller voir sur mon site: http://users.skynet.be/collies.shelties/
C'est la page des chiots où l'affichage des images est capricieux, et je ne comprends pas pourquoi......Merci.
Aurais-tu la gentillesse d'aller voir sur mon site: http://users.skynet.be/collies.shelties/
C'est la page des chiots où l'affichage des images est capricieux, et je ne comprends pas pourquoi......Merci.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Utilisateur anonyme
16 oct. 2006 à 13:29
16 oct. 2006 à 13:29
tu peux en specifier la taille que tu veux en ajoutant
pour la largeur et hauteur, tu choisis celles que tu veux et alors quand tu clique dessus la photo s'ouvre en taille originale dans une nouvelle fenêtre.
Est assez clair?
Bien a vous
W.
<a href="chemin de l'image" target="_blank"><img src="chemin de l'image" width="largeur voulu en pixels" height="hauteur voulu en pixels"></a>
pour la largeur et hauteur, tu choisis celles que tu veux et alors quand tu clique dessus la photo s'ouvre en taille originale dans une nouvelle fenêtre.
Est assez clair?
Bien a vous
W.
Squalou
Messages postés
29
Date d'inscription
vendredi 6 octobre 2006
Statut
Membre
Dernière intervention
29 novembre 2006
3
16 oct. 2006 à 15:15
16 oct. 2006 à 15:15
Voila le code si tu veux le faire en javascript :
D'abord pour chaque grande image tu crées une page html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre de la page (description de l'image par exemple)</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="Chemin vers ta grande image" width="largeur de l'image" height="hauteur de l'image" />
</body>
</html>
Ensuite sur la page ou il y a les petites vignettes, tu vas appeler ces pages en javascript, ce qui va ouvrir un pop mais de la taille exacte de l'image, avec un titre à la page...
Commencer par mettre le code javascript Entre les balises <head></head>
<head>
<script language="javascript" type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>
Ensuite on met le lien pour chaque image :
<a href="" onClick="window.open(' chemin vers la page html de la grande image','nom_de_l_image','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="largeur de la fenetre",height="hauteur de la fenêtre"');return false;"><img src="ta petite image.jpg" alt="texte de survol de la petite image" width="largeur de la petite image" height="hauteur de la petite image" border="0"></a>
Tu peux rajouter plein d'option à la fenêtre qui s'affichera comme les menus de navigations, les ascenceurs...(il suffit de mettre yes au lieu de no dans les diverses options)
Pour la taille de la fenêtre, mets y la taille de la grande image, voir + 10 ou 20 pixels parfois en fonction des navigateurs.
Pour ce qui est des petites images, je te conseille de toutes les retravailler à la bonne taille, tu gagneras en temps de chargement sur ta page, et l'affichage sera beaucoup plus net...
@+
D'abord pour chaque grande image tu crées une page html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre de la page (description de l'image par exemple)</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="Chemin vers ta grande image" width="largeur de l'image" height="hauteur de l'image" />
</body>
</html>
Ensuite sur la page ou il y a les petites vignettes, tu vas appeler ces pages en javascript, ce qui va ouvrir un pop mais de la taille exacte de l'image, avec un titre à la page...
Commencer par mettre le code javascript Entre les balises <head></head>
<head>
<script language="javascript" type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>
Ensuite on met le lien pour chaque image :
<a href="" onClick="window.open(' chemin vers la page html de la grande image','nom_de_l_image','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="largeur de la fenetre",height="hauteur de la fenêtre"');return false;"><img src="ta petite image.jpg" alt="texte de survol de la petite image" width="largeur de la petite image" height="hauteur de la petite image" border="0"></a>
Tu peux rajouter plein d'option à la fenêtre qui s'affichera comme les menus de navigations, les ascenceurs...(il suffit de mettre yes au lieu de no dans les diverses options)
Pour la taille de la fenêtre, mets y la taille de la grande image, voir + 10 ou 20 pixels parfois en fonction des navigateurs.
Pour ce qui est des petites images, je te conseille de toutes les retravailler à la bonne taille, tu gagneras en temps de chargement sur ta page, et l'affichage sera beaucoup plus net...
@+
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
16 oct. 2006 à 18:25
16 oct. 2006 à 18:25
Euh, ca ne serait pas plus simple en CSS ?
Exemple :
<img id="1" src="chien1.jpg" alt="C'est mon chien" />
Et le code CSS :
Et tu peux faire ca pour chaque image.
Par contre, elles ne s'ouvriront pas dans une nouvelle fenêtre.
Sinon, le mieux serait tout simplement de faire un lien vers l'image, non ?
Tout en réduisant sa taille avec l'attribut style.
Ah, et une autre précision :
Ce n'est pas parce que l'image est affichée dans une dimension plus petite qu'elle est moins lourde.
a plus
Exemple :
<img id="1" src="chien1.jpg" alt="C'est mon chien" />
Et le code CSS :
img#1{
width:hauteur réduite;
height:largeur réduite;
}
img#:active, img#1focus /* quand on clique ur l'image*/
{
width:hauteur non réduite;
height:largeur non réduite;
}
Et tu peux faire ca pour chaque image.
Par contre, elles ne s'ouvriront pas dans une nouvelle fenêtre.
Sinon, le mieux serait tout simplement de faire un lien vers l'image, non ?
Tout en réduisant sa taille avec l'attribut style.
Ah, et une autre précision :
Ce n'est pas parce que l'image est affichée dans une dimension plus petite qu'elle est moins lourde.
a plus
Squalou
Messages postés
29
Date d'inscription
vendredi 6 octobre 2006
Statut
Membre
Dernière intervention
29 novembre 2006
3
17 oct. 2006 à 09:37
17 oct. 2006 à 09:37
Bonjour Sylvain,
Je ne parlais pas simplement d'afficher l'image, mais de la retravailler avant à la taille exacte ou l'on veut l'afficher.
Imaginons une image de 400 * 300 qui pèse 40 ko si on l'intégre via le code en la passant à 150 * 113 elle pésera toujours 40 ko
- en revanche si on l'a enregistré avant à la taille souhaitée (150 * 113) via photoshop par exemple, elle ne pésera plus que 10 ko... Je vous laisse calculer le gain sur une page avec énormément d'images et en plus vous y gagnerez en qualité d'images !
Après en ce qui concerne les techniques d'agrandissement, chacun ces petites préférences... il y a des rendus plus esthetique que d'autres...
Bonne journée à tous
Je ne parlais pas simplement d'afficher l'image, mais de la retravailler avant à la taille exacte ou l'on veut l'afficher.
Imaginons une image de 400 * 300 qui pèse 40 ko si on l'intégre via le code en la passant à 150 * 113 elle pésera toujours 40 ko
- en revanche si on l'a enregistré avant à la taille souhaitée (150 * 113) via photoshop par exemple, elle ne pésera plus que 10 ko... Je vous laisse calculer le gain sur une page avec énormément d'images et en plus vous y gagnerez en qualité d'images !
Après en ce qui concerne les techniques d'agrandissement, chacun ces petites préférences... il y a des rendus plus esthetique que d'autres...
Bonne journée à tous
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
17 oct. 2006 à 21:50
17 oct. 2006 à 21:50
Bonsoir.
A ce moment la, tu pourrais :
I
- Faire des liens qui pointent vers l'image réelle avec l'image réduite comme image de fond.
-Ou faire de liens qui changent d'image de fond quand on passe la souris dessus, avec des css, mais c'est plus compliqué et ca ne fonctionne pas ou mal (et c'est difficle a mettre en place) avec IE. Pour ca, tu peux utiliser un script qui ne fonctionnera que sous IE avec les instructions conditionnelles.
II
-Faire un JavaScript pour tout les navigateurs, avec des onMouseOver et onMouseOut.
a plus
A ce moment la, tu pourrais :
I
- Faire des liens qui pointent vers l'image réelle avec l'image réduite comme image de fond.
-Ou faire de liens qui changent d'image de fond quand on passe la souris dessus, avec des css, mais c'est plus compliqué et ca ne fonctionne pas ou mal (et c'est difficle a mettre en place) avec IE. Pour ca, tu peux utiliser un script qui ne fonctionnera que sous IE avec les instructions conditionnelles.
II
-Faire un JavaScript pour tout les navigateurs, avec des onMouseOver et onMouseOut.
a plus
