En passant sur la petite image comment agrandir ?

**Georges974** · 23/01/2013, 13h57

Bonjour,

Débutant html+css.
J'ai regardé chez google , mais je ne sais pas quoi prendre!

Comme j'ai une 15 images à montrer d'une location je voudrais mettre les images en médaillon et lorsqu'on "clique" ou "passe" par-dessus la même image devrait alors s'agrandir (15x). en relâchant la souris le processus s'arrête.
Existe-t-il un tuto ?
Merci de votre compréhension.

**thelvin** · 23/01/2013, 14h54

C'est plus une histoire de HTML+JavaScript que de HTML+CSS.

Cherche JavaScript thumbnail ou jquery thumbnail pour une foultitude d'exemples sur Google.

**NoSmoking** · 23/01/2013, 19h00

Bonjour,
c'est jouable en CSS pur, ce qui m'interpelle c'est le x15. Sur base d'une image de 100px au départ cela va faire du lourd à l'arrivée.

Dans ce cas je penses également que l'utilisation d'une lightBox t'aiderait, c'est du javascript.

[EDIT]
je savais que cela me disait quelque chose

Une galerie d'images CSS3 avec effet de zoom

**DezMax** · 23/01/2013, 20h42

En JavaScript c'est possible si interéssé par le script je peut le faire .

**unapologetic** · 31/01/2013, 23h19

J'ai une solution en CSS3, le seul problème de cette solution c'est que sous IE les transitions ne se réaliseront pas.
http://www.css3create.com/Galerie-ph...transition-CSS

Voila tout, j'espère que ça t'aidera

**laurentSc** · 01/02/2013, 16h25

Je trouve ça un poil plus simple en javascript qu'en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="---.jpg"
 onmouseover="this.width=15*this.width"
 onmouseout="this.width=this.width/15"  />

**NoSmoking** · 01/02/2013, 16h31

Envoyé par laurentSc

Je trouve ça un poil plus simple en javascript qu'en CSS :

et pourtant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
img{
  width:109px;
}
img:hover{
  width:auto;
}
</style>
</head>
<body>
<img src="http://www.developpez.net/template/images/logo.png">
</body>
</html>

**laurentSc** · 01/02/2013, 16h59

Là, tu triches ; je pensais à l'article que tu avais montré : http://inserthtmldeveloppez.com/tutoriels/css/galerie-images-css3-avec-effet-zoom/...

**NoSmoking** · 01/02/2013, 17h05

Là, tu triches

le code que j'ai mis en fait autant que celui que tu nous as proposer, maintenant si il faut faire l'effet de zoom, c'est du CSS3 ou du javascript mais en plus d'une ligne

**laurentSc** · 01/02/2013, 17h20

OK, mais c'est quoi par définition l'effet de zoom, si ce n'est pas ce que je proposais ?

**NoSmoking** · 01/02/2013, 18h42

Dans l'effet de Zoom on passe d'une taille d'image à une autre en douceur, l'image prend successivement plusieurs tailles intermédiaire, dans ce que l'on a mis comme code c'est juste un Zoom sans transition aucune.

En passant sur la petite image comment agrandir ?

HTML

Discussions similaires

Partager

Partager