Discussion :

[frutix]

Bonjour,
Tout d'abord, je ne savais pas dans quels topics mettre ma question, déplacez-la si il le faut!!!

J'ai un petit soucis avec un test en Prog Web... je vous explique...

J'aimerais qu'une image s'aggrandis quand la souris passe sur elle....

J'ai une image dans un dossier: test.jpg

sur ma page web je l'affiche comme suit:

Code :

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

1
2
 
	<img src="test.jpg" height="600" width="500">

J'aimerais quand la souris passe sur l'image, qu'elle s'agrandisse comme suit:

Code :

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

1
2
 
	<img src="test.jpg" height="120" width="100">

Comment faire pour que cela se produise, merci...

[KiLVaiDeN]

Tu peux faire ceci ( en ayant le nom de ton image )

Code :

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

1
2
3
4
5
6
7
function changeImageSize(image,xSize,ySize) {
  document.images[image].width=xSize;
  document.images[image].height=ySize;
}
 
//Utilisation de la fonction, à mettre dans un onClick par exemple
changeImageSize('mon_image',500,600);

Tu peux aussi utiliser un document.getElementById('id_image') si tu précise l'id de l'image <img id="un_id" src="trucmuch.jpg">

[frutix]

Tu peux faire ceci ( en ayant le nom de ton image )

Code :

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

1
2
3
4
5
6
7
function changeImageSize(image,xSize,ySize) {
  document.images[image].width=xSize;
  document.images[image].height=ySize;
}
 
//Utilisation de la fonction, à mettre dans un onClick par exemple
changeImageSize('mon_image',500,600);

Tu peux aussi utiliser un document.getElementById('id_image') si tu précise l'id de l'image <img id="un_id" src="trucmuch.jpg">

C'est du JavaScript???

[KiLVaiDeN]

Vi, allergique ?

[frutix]

Non pas du tout, mais j'ai encore du mal à l'implementer... c'est pour ceci...


comme pour le moment ça fonctionne pas...

Code :

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

1
2
3
4
5
6
7
<script language="javascript">
	function changeImageSize(image,xSize,ySize) {
  		document.images[image].width=xSize;
  		document.images[image].height=ySize;
} 
</script>
<img src="affiche/test.jpg" height="120" width="100" onMouseOver="changeImageSize('affiche/test.jpg',500,600)">

Voilà ce que j'ai fait... ça fonctionne pas pourquoi`?

Doit-je mettre la fonction dans la partie "HEAD" que je n'ai pas (je travaille avec des boîtes css)... sinon est-ce que je dois le mettre sous autre chose que mon img

[KiLVaiDeN]

Code :

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

1
2
3
4
5
6
7
8
 
<script language="javascript"> 
   function changeImageSize(image,xSize,ySize) { 
        document.images[image].width=xSize; 
        document.images[image].height=ySize; 
} 
</script>
<img name="mon_image" src="affiche/test.jpg" height="120" width="100" onMouseOver="changeImageSize('mon_image',500,600)">

Ca devrait marcher, cependant je crois que le onMouseOver ne marche pas à tous les coups sur un element img, peut-être faut-il utiliser un lien et gérer l'evenement du lien plutot :

Code :

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

<a href="javascript:;" onMouseOver="icilafonction();"><img name="mon_image" src=".."></a>

[frutix]

désolé de te déranger, mais ça ne fonctionne pas non plus...

[KiLVaiDeN]

J'ai déjà fait ça, et j'ai recopié un bout de code qui marchait, donc ça marche forcément ( testé sous opera/firefox/ie )

Peux-tu poster ton code final qui ne marche pas ?

[SpaceFrog]

style.height

[XtoX]

Je crois que le problème se situe au niveau de l'accès au DOM... Essaye ceci

Code :

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

<img id="monImage" src="affiche/test.jpg" height="120" width="100" onMouseOver="changeImageSize('monImage',500,600)">

Code :

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

1
2
3
4
5
6
7
<script language="javascript"> 
   function changeImageSize(id_image,xSize,ySize) 
   { 
      document.getElementById(id_image).width=xSize; 
      document.getElementById(id_image).height=ySize; 
   } 
</script>

[KiLVaiDeN]

Ca marche bien pour moi sans l'attribut style

[Mr N.]

Je viens de tester ceci et ca marche nickel sous Fx :

Code :

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

1
2
3
4
5
6
7
8
 
<script language="javascript">
   function changeImageSize(image,xSize,ySize) {
        document.images[image].width=xSize;
        document.images[image].height=ySize;
}
</script>
<img name="mon_image" src="affiche/test.jpg" height="120" width="100" onMouseOver="changeImageSize('mon_image',500,600)">

[XtoX]

En fait, je viens de tester sous IE 5.5 et ça marche très bien aussi

A noter que mon script fonctionne aussi (comme quoi, il n'y a pas qu'une seule solution à bien des problèmes)

[frutix]

Ok j'ai réussi a faire fonctionner encore merci...


juste une question, est-ce que c'est possible de faire la même chose sauf que l'image s'aggrandi par-dessus la page en cours! Un peu comme un pop-up...

Allez voir sur le site de www.tillate.ch, prenez une soirée au hasard et cliquez pour voir le flyers¨!!! C'est un truc du genre que j'aimerais faire

http://ch.tilllate.com/FR/partydetai...87&setlang=FR#

Allez sur ce liens et cliquez voir le flyers... comment faire ceci

[XtoX]

Pour voir comment il font, je te conseille de faire un clique droit et d'afficher le code source de la page.

[KiLVaiDeN]

En général, ces effets sont produits par un layer(div) mit au premier plan sur la page, et qui possède un "onMouseOut" qui déclence son état hidden.

[frutix]

Pour voir comment il font, je te conseille de faire un clique droit et d'afficher le code source de la page.

Oh non de diou, je suis fatigué... si je suis bête!!!

Merci

[frutix]

OK alors j'ai regardé et comme je mis connais pas en JavaScript, je vous demande un peu d'aide!!!

Voilà, j'ai trouvé ce script là:

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
	<SCRIPT TYPE="text/javascript">
 
	var opcnt=0,step=25,max=100
	var mytimer;
 
	function showflyer() {
 
 
		var l=document.getElementById('flyer');
 
		l.style.visibility='visible';
 
		window.clearTimeout(mytimer)
	}
	function hideflyer() {
		l=document.getElementById('flyer');
		l.style.visibility='hidden';
 
		opcnt=0;
	}
	</SCRIPT>

J'aimerais savoir si quelqu'un peu me mettre des commentaires a ce code.

Ensuite il l'utilise comme suit:

Code :

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

<a href="#" onClick="showflyer()"><img src="affiche/2006-10-19.jpg" border=0></a><br>

Voilà, j'aimerais surtout savoir les deux fonctions qu'est-ce qu'elle font. Merci

[SpaceFrog]

il manque un bout de fonction quelque part ...

ces deux fonctions gèrent la visibilité de l'objet qui a l'id flyer ...

mais en principe tu dois avoir un autre bout de script avec un setTimeout

[frutix]

est-ce que ça pourrait être ceci...

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
35
						<script>
 
var tnflyerfiles=new Array()
var flyerfiles=new Array()
var showing_rueckseite=0
var switchinterval=3000
var wechseltimer
 
function rueckseite_wechsler(forceface)
{
	if (forceface)
	{
	 	showing_rueckseite=forceface-1
	 	window.clearTimeout(wechseltimer)
	} else
	{
		window.setTimeout('rueckseite_wechsler()',switchinterval)
		showing_rueckseite=1-showing_rueckseite	
	}
 
	document.images['tnflyer'].src=tnflyerfiles[showing_rueckseite]
	document.images['flyer'].src=flyerfiles[showing_rueckseite]
 
}
 
function start_rueckseite_wechsler(basepath,flyer_vorderseite_name,flyer_rueckseite_name)
{
	flyerfiles[0]=basepath+'/'+flyer_vorderseite_name
	flyerfiles[1]=basepath+'/'+flyer_rueckseite_name
	tnflyerfiles[0]=basepath+'/tn_'+flyer_vorderseite_name
	tnflyerfiles[1]=basepath+'/tn_'+flyer_rueckseite_name
	wechseltimer=window.setTimeout('rueckseite_wechsler()',switchinterval)
}
 
</script>