Affciher image miniature ensuite grande taill
davidoviche
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
davidoviche Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
davidoviche Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
salut tous le monde,
j'ai un soucis ,je voudrais afficher des images en miniature à partir de ma base de donnée grâce aux références des produits (précision :les images sont en GRANDE TAILLE donc il faut les réduire dès le début avec CSS peut être).
Quand les miniature sont affichées , je veux que quand on les survole ,l'image équivalente en grande taille s'affiche à coté.
Vous pouvez m'aidez svp ?
merci
j'ai un soucis ,je voudrais afficher des images en miniature à partir de ma base de donnée grâce aux références des produits (précision :les images sont en GRANDE TAILLE donc il faut les réduire dès le début avec CSS peut être).
Quand les miniature sont affichées , je veux que quand on les survole ,l'image équivalente en grande taille s'affiche à coté.
Vous pouvez m'aidez svp ?
merci
A voir également:
- Affciher image miniature ensuite grande taill
- Reduire taille image - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
- Image gratuite - Guide
4 réponses
ça c'est typiquement du javascript.
Pour les miniatures soit tu les génères avec un script , soit tu les crées avant.
Pour ce qui est du survol go editeur de javascript il y a plein de truc tout faits pour ça.
Pour les miniatures soit tu les génères avec un script , soit tu les crées avant.
Pour ce qui est du survol go editeur de javascript il y a plein de truc tout faits pour ça.
Merci ,tu sais je début vraiment et je dois dire que je suis loin d'être quelque de fainéant ,mais je suis pressé par le temps donc si tu as quelque chose qui est déjà prêt ça m'aiderait.
Encore merci
Encore merci
Ce que tu peux faire :
dans une division de ton site web, tu met toutes les miniatures que tu veux agrandir (par contre je ne sais pas comment auto-générer des miniatures)
puis tu crée une autre division (cachée : style="display:none;") sur cette même page à laquelle tu donnes une id. et onMouseOver sur chaque miniature, tu appelle une fonction javascript (que tu peux coder dans le head entre des balises <script></script>)
Cette fonction va rendre visible la division cachée et lui affecter un contenu : par exemple ici une image en grande taille. il suffira que tu passe en paramètre le nom de l'image par exemple...
Erf j'ai pas envie de te spoiler la réponse ... Jespère que je t'ai mis sur la voie
dans une division de ton site web, tu met toutes les miniatures que tu veux agrandir (par contre je ne sais pas comment auto-générer des miniatures)
puis tu crée une autre division (cachée : style="display:none;") sur cette même page à laquelle tu donnes une id. et onMouseOver sur chaque miniature, tu appelle une fonction javascript (que tu peux coder dans le head entre des balises <script></script>)
Cette fonction va rendre visible la division cachée et lui affecter un contenu : par exemple ici une image en grande taille. il suffira que tu passe en paramètre le nom de l'image par exemple...
Erf j'ai pas envie de te spoiler la réponse ... Jespère que je t'ai mis sur la voie
Bonjour ,
j'ai trouvé ce code qui pourrais à peu près faire l'affaire.
============C O D E ===========
echo'<div class="thumb">';
echo'<a href="#">';
echo'<div id="PETIT"><img src="http://localhost/website/images/images_page_produit/produits/images_gf/['.$Ref.']MINI.jpg" alt="miniature Polyommatus-icarus" style="width:98px; height:120px" rel="thumbnail"/> </div>';
echo'<img src="http://localhost/website/images/images_page_produit/produits/images_gf/['.$Ref.']MINI.jpg" alt="Inachis-io" class="grand" />';
echo'</a>';
echo'</div>';
============C O D E ===========
précision:$Ref est la référence des produits correspondant à l'image.
=========C S S ================
<style>body {
background-color:white;
color:white;
height:1000px;
}
.img {
border:1px solid black;
}
.thumb {
float:right;
width:686px;
top:0;
left:0;
}
.thumb a {
margin:0;
text-decoration:none;
}
.thumb a:hover {
background-color:black;
}
.thumb a .grand {
float:left;
width:0;
}
.thumb a:hover .grand {
float:left;
top:122px;
left:0;
width:300px;
height:400px;
}
#PETIT{
float:right;
width:98px;
height:120px}
</style>
=========C S S ================
çA marche bien quand il y a une seul image ,mais quand il ya plus ça part dans tous les sens ,à cause des divs je crois.
Moi je veux que un maximum de dix miniature s'affichent à droite, en deux colonnes et en passant avec la souris sur chaque miniature elle m'affiche l'image grande à gauche des miniature.Je veux aussi que on puisse afficher l'image de grande taille même en cliquant sur la miniature.
Tous ça se passera dans un onglet qui a 600 px de width.
Vous pouvez m'aider ?
Merci
j'ai trouvé ce code qui pourrais à peu près faire l'affaire.
============C O D E ===========
echo'<div class="thumb">';
echo'<a href="#">';
echo'<div id="PETIT"><img src="http://localhost/website/images/images_page_produit/produits/images_gf/['.$Ref.']MINI.jpg" alt="miniature Polyommatus-icarus" style="width:98px; height:120px" rel="thumbnail"/> </div>';
echo'<img src="http://localhost/website/images/images_page_produit/produits/images_gf/['.$Ref.']MINI.jpg" alt="Inachis-io" class="grand" />';
echo'</a>';
echo'</div>';
============C O D E ===========
précision:$Ref est la référence des produits correspondant à l'image.
=========C S S ================
<style>body {
background-color:white;
color:white;
height:1000px;
}
.img {
border:1px solid black;
}
.thumb {
float:right;
width:686px;
top:0;
left:0;
}
.thumb a {
margin:0;
text-decoration:none;
}
.thumb a:hover {
background-color:black;
}
.thumb a .grand {
float:left;
width:0;
}
.thumb a:hover .grand {
float:left;
top:122px;
left:0;
width:300px;
height:400px;
}
#PETIT{
float:right;
width:98px;
height:120px}
</style>
=========C S S ================
çA marche bien quand il y a une seul image ,mais quand il ya plus ça part dans tous les sens ,à cause des divs je crois.
Moi je veux que un maximum de dix miniature s'affichent à droite, en deux colonnes et en passant avec la souris sur chaque miniature elle m'affiche l'image grande à gauche des miniature.Je veux aussi que on puisse afficher l'image de grande taille même en cliquant sur la miniature.
Tous ça se passera dans un onglet qui a 600 px de width.
Vous pouvez m'aider ?
Merci