Affciher image miniature ensuite grande taill
Fermé
davidoviche
Messages postés
6
Date d'inscription
mardi 21 juillet 2009
Statut
Membre
Dernière intervention
20 août 2009
-
21 juil. 2009 à 12:41
davidoviche Messages postés 6 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 20 août 2009 - 22 juil. 2009 à 12:26
davidoviche Messages postés 6 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 20 août 2009 - 22 juil. 2009 à 12:26
A voir également:
- Affciher image miniature ensuite grande taill
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Google recherche par image - Guide
- Image - 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.
davidoviche
Messages postés
6
Date d'inscription
mardi 21 juillet 2009
Statut
Membre
Dernière intervention
20 août 2009
21 juil. 2009 à 12:53
21 juil. 2009 à 12:53
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
davidoviche
Messages postés
6
Date d'inscription
mardi 21 juillet 2009
Statut
Membre
Dernière intervention
20 août 2009
22 juil. 2009 à 12:26
22 juil. 2009 à 12:26
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
