[Webmstring] Une belle galerie
Résolu
ckvtdn
Messages postés
863
Statut
Membre
-
Navid_92 Messages postés 778 Statut Membre -
Navid_92 Messages postés 778 Statut Membre -
Bonjour,
Sur mon site, je présente des images présentées dans un premier temps en ligne et j'aimerai faire en sorte que, lorsque le visiteur passe la souris sur une de ces images, celle-ci s'agrandisse un poil, histoire d'avoir un aperçu rapide et puis une fois qu'on clique dessus, que tout le reste se fonce un peu et que l'image apparaisse en grand.
Je vois ça sur pas mal de site de vente en ligne notamment et je me dis que ça ne doit pas être si compliqué que ça. Je ne demande pas la solution toute mâchée, simplement une piste à explorer, un mot-clé à taper, quelque chose comme ça, si jamais quelqu'un s'est déjà posé la question.
D'avance, merci.
Sur mon site, je présente des images présentées dans un premier temps en ligne et j'aimerai faire en sorte que, lorsque le visiteur passe la souris sur une de ces images, celle-ci s'agrandisse un poil, histoire d'avoir un aperçu rapide et puis une fois qu'on clique dessus, que tout le reste se fonce un peu et que l'image apparaisse en grand.
Je vois ça sur pas mal de site de vente en ligne notamment et je me dis que ça ne doit pas être si compliqué que ça. Je ne demande pas la solution toute mâchée, simplement une piste à explorer, un mot-clé à taper, quelque chose comme ça, si jamais quelqu'un s'est déjà posé la question.
D'avance, merci.
A voir également:
- [Webmstring] Une belle galerie
- Galerie photo en ligne gratuite - Guide
- Comment masquer une photo dans la galerie - Guide
- Belle rue - Guide
- Galerie photos windows - Télécharger - Albums photo
- Mettre une photo de la galerie en story à la une instagram - Forum Instagram
4 réponses
dans head :
dans body :
J'ai pas testé, et le code peut être améliorer.
Peut-être que ça marche pas sur internet explorer.
___/\_canarder_/\___
Le Renard qui règne sur le WEB : Firefox
<script type="text/javascript">
function taille(dom,x,y) {
dom.setAttribute("width",x+"px");
dom.setAttribute("height",y+"px");
}
</script>
dans body :
<img src="image.png" width="30px" height="20px" onmouseover="taille(this,60,40)" onmouseout="taille(this,30,20)" />
J'ai pas testé, et le code peut être améliorer.
Peut-être que ça marche pas sur internet explorer.
___/\_canarder_/\___
Le Renard qui règne sur le WEB : Firefox
Hum, j'avais effectivement pensé qu'il me faudrait du Javascript, après j'aurai espéré avoir une piste ou deux à explorer, mais merci tout de même Mikmuk d'avoir confirmé ce que je pensais. =)
Il y a un moyen juste en CSS en fait, mais toutes les images doivent avoir la même taille
___/\_canarder_/\___
Le Renard qui règne sur le WEB : Firefox
img.small{
width:30px;
height:20px;
}
img.small:hover{
width:300px;
height:200px;
}
<img src="http://monsite.com/myImg.png" alt="C'est ma super image !" class="small" />
___/\_canarder_/\___
Le Renard qui règne sur le WEB : Firefox
Merci !
donc apparemment il faut bel et bien du javascript moi aussi e te dit merci canarder ca m'aidera :)
A propos, je t'ai envoyé un message privé, check it =)
Merci encore !