galerie: ( JOLI!)zoom d'une image au survol sans déranger le reste?..

**cueva** · 20/09/2009, 12h02

Bonjour,

je suis en train de refaire mon site ( galerie de sculptures) et je souhaite présenter un tableau (5sur5) de vignettes.

jusque là... pas de pb.

Je veux qu'au passage de la souris, la vignette 100/100 se transforme en 200/200 pour une prévisualisation avec possibilité de cliquer pour rejoindre la page galerie dédiée à cette sculpture en particulier...
là encore ..simple...
<div align="center"><img src=arbredevie.gif" onmouseover="this.src='arbredevie2.jpg';" onmouseout="this.src='.arbredevie.gif';"> plus le lien fastoch

....mais c'est très laid!!!...si si !

Je souhaite, que ma prévisualisation "glisse" comme un zoom progressif en passant devant le reste du tableau...je ne sais pas si je suis bien clair

un peu comme une impression d'élévation... un peu comme l'événement au survol des images de tiltviewer: voir là: http://www.simpleviewer.net/tiltviewer/app/

merci de vos conseils....je n'aime pas faire des choses qui ne soient pas belles..NA!

**kilou_style** · 20/09/2009, 13h01

hmm je sais pas si c'est exactement ce que tu veux faire, mais tu peux faire que onmouseover et onmouseout ne renvoient pas une image, mais redirige vers une fonction récursive qui va faire agrandir progressivement l'image :
quelque chose comme ca :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
<head>
<script type="text/javascript">
 
function changer_de_taille() {
	if(document.getElementById("mon_image").style.width=="100px"){
		agrandir(100);
	}else{
		retrecir(200);
	}
}
function agrandir(taille){
if(taille<=200){
	document.getElementById("mon_image").style.width = taille+"px"
	nouvelle_taille=taille+10
	setTimeout("agrandir(nouvelle_taille)",50);
}
}
function retrecir(taille){
if(taille>=100){
	document.getElementById("mon_image").style.width = taille+"px"
	nouvelle_taille=taille-10
	setTimeout("retrecir(nouvelle_taille)",50);
}
}
 
</script>
</head>
<body>
<img id="mon_image" src="image.jpg" alt="" onmouseover="changer_taille()"/>
 
</body>
</html>

PS: je me suis inspiré du cours sur lti.epfl.ch

galerie: ( JOLI!)zoom d'une image au survol sans déranger le reste?..

JavaScript

Vue hybride

Discussions similaires

Partager

Partager