[Webmstring] Une belle galerie

Résolu
ckvtdn Messages postés 756 Date d'inscription   Statut Membre Dernière intervention   -  
Navid_92 Messages postés 711 Date d'inscription   Statut Membre Dernière intervention   -
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 1714 Date d'inscription   Statut Membre Dernière intervention   355
 
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   Statut Membre Dernière intervention   141
 
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   Statut Membre Dernière intervention   7
 
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   Statut Membre Dernière intervention   141
 
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   Statut Membre Dernière intervention   7
 
Il faut du javascript pour cela il me semble :) je ne saurais dire plus
0
ckvtdn Messages postés 756 Date d'inscription   Statut Membre Dernière intervention   141
 
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 1714 Date d'inscription   Statut Membre Dernière intervention   355
 
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   Statut Membre Dernière intervention   87
 
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