Action sur une image

Version imprimable

20/10/2005, 13h27
frutix

Action sur une image
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:

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:

1 2 <img src="test.jpg" height="120" width="100">
Comment faire pour que cela se produise, merci...

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

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">

Citation:
Envoyé par KiLVaiDeN
Tu peux faire ceci ( en ayant le nom de ton image )
Code:

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???

20/10/2005, 13h56
KiLVaiDeN

Vi, allergique ? :twisted:

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

comme pour le moment ça fonctionne pas...
Code:

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

Code:

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:

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

20/10/2005, 14h08
frutix

désolé de te déranger, mais ça ne fonctionne pas non plus...
20/10/2005, 14h17
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 ?
20/10/2005, 14h47
SpaceFrog

style.height

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

Code:

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

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>

20/10/2005, 14h48
KiLVaiDeN

Ca marche bien pour moi sans l'attribut style :)

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

Citation:

Envoyé par KilVaiDeN

Code:

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

20/10/2005, 14h53
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)
20/10/2005, 16h23
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
20/10/2005, 16h34
XtoX

Pour voir comment il font, je te conseille de faire un clique droit et d'afficher le code source de la page.
20/10/2005, 16h45
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.
20/10/2005, 21h03
frutix

Citation:

Envoyé par XtoX

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

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

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

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:

<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

21/10/2005, 09h00
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

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

Code:

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>

21/10/2005, 10h51
SpaceFrog

je ne vois nulle part de setTimeout pour mytimer ...

alors qu'il y a un clearTimeout dessus ...
21/10/2005, 11h04
frutix

moi non plus je t'assure...

Est-ce que tu peux regarder dans le code source du lien que j'ai donné au dessus. Si tu comprends mieux que moi, tu va peut-être trouver plus facilement.

Merci pour votre aide!!!