[Webmstring] Une belle galerie

Résolu/Fermé
ckvtdn Messages postés 756 Date d'inscription lundi 19 février 2007 Statut Membre Dernière intervention 24 novembre 2020 - 11 mai 2012 à 23:25
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 - 17 mai 2012 à 23:48
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.

4 réponses

canarder Messages postés 1706 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
Modifié par canarder le 13/05/2012 à 11:23
dans head :
<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
1
ckvtdn Messages postés 756 Date d'inscription lundi 19 février 2007 Statut Membre Dernière intervention 24 novembre 2020 141
13 mai 2012 à 11:52
Ok Canard, j'essaie ça dans la journée ou demain et je reviens vers toi au cas ou.

Merci !
0
mikmuk Messages postés 156 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 17 janvier 2013 7
13 mai 2012 à 15:07
ouh là j'ai crût que tu avais marqué ok co**** x)

donc apparemment il faut bel et bien du javascript moi aussi e te dit merci canarder ca m'aidera :)
0
ckvtdn Messages postés 756 Date d'inscription lundi 19 février 2007 Statut Membre Dernière intervention 24 novembre 2020 141
14 mai 2012 à 00:06
Oui, j'ai testé à l'instant, c'est parfait. Merci Canarder.

A propos, je t'ai envoyé un message privé, check it =)

Merci encore !
0
mikmuk Messages postés 156 Date d'inscription dimanche 22 août 2010 Statut Membre Dernière intervention 17 janvier 2013 7
12 mai 2012 à 03:28
Il faut du javascript pour cela il me semble :) je ne saurais dire plus
0
ckvtdn Messages postés 756 Date d'inscription lundi 19 février 2007 Statut Membre Dernière intervention 24 novembre 2020 141
13 mai 2012 à 00:07
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. =)
0
canarder Messages postés 1706 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
Modifié par canarder le 17/05/2012 à 21:40
Il y a un moyen juste en CSS en fait, mais toutes les images doivent avoir la même taille

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
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
17 mai 2012 à 23:48
Avec un système de key-frames en css3, et de transition, tu pourrais faire un zoom et dézoom original.
Je te laisse chercher sur google si cela t'intéresse.
0