En passant sur la petite image comment agrandir ?

Version imprimable

23/01/2013, 12h57
Georges974

En passant sur la petite image comment agrandir ?

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.
23/01/2013, 13h54
thelvin

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.
23/01/2013, 18h00
NoSmoking

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 :D
Une galerie d'images CSS3 avec effet de zoom
23/01/2013, 19h42
DezMax

En JavaScript c'est possible si interéssé par le script je peut le faire .
31/01/2013, 22h19
unapologetic

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 ;)

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

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

Citation:

Envoyé par laurentSc

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

et pourtant

Code:

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>

01/02/2013, 15h59
laurentSc

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

Citation:

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 ;)
01/02/2013, 16h20
laurentSc

OK, mais c'est quoi par définition l'effet de zoom, si ce n'est pas ce que je proposais ?
01/02/2013, 17h42
NoSmoking

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.