Effet d'opacité sur des images

Version imprimable

24/05/2008, 11h51
Reality_Check

Effet d'opacité sur des images

Bonjour,

J'ai récupéré un petit effet sympa sur des images:
http://www.dynamicdrive.com/dynamici...adualfader.htm

Sur ce lien donc, les images ont un effet d'opacité et lorsque l'on passe la souris sur une image, celle-ci n'a plus l'effet d'opacité mais s'affiche à 100%.

Or, ce que je veux faire c'est l'effet inverse. C'est à dire qu'au départ, je veux que toutes les images soient affichées à 100% et c'est seulement lorsque l'on passe la souris sur une image que les autres images ont l'effet d'opacité.

J'ai essayé de modifier les valeurs sur le script, mais rien à faire, je n'y arrive pas.

Quelqu'un aurait-il une idée s'il vous plaît de la ligne du code à modifier dans le script?

Voici le script:

http://www.dynamicdrive.com/dynamici...radualfader.js

Merci d'avance, je patauge !
24/05/2008, 13h56
le_chomeur

va voir les contributions ;)
24/05/2008, 14h19
Reality_Check

Excuse moi , mais c'est quoi les contributions ?
24/05/2008, 14h34
le_chomeur

http://www.developpez.net/forums/sho...wpost&t=278036
24/05/2008, 14h48
Reality_Check

Merci de ton aide mais en fait c'est la même chose sur le lien -2ème script sus-mentionné (opacité au départ et image affichée complètement onmouseover).

Chose étrange, personne sur le web n'a fait ce que je veux faire...
24/05/2008, 15h06
le_chomeur

analyse le script ...
tu as juste 2 propriétés a inverser :)
tu part de 100 pour arriver a 50% par exemple et au lieu d'incrémenter , tu décrémente ...
24/05/2008, 17h57
Reality_Check

J 'ai pourtant changé des valeurs quand j'en voyais dans le script mais même avec beaucoup de volonté, je ne comprends pas et n'y arrive pas; d'autant plus que mon niveau en js est plutôt i--
humm, lol

Merci quand même de ton aide !

voila :

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
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fading Pic</title>
</head>
 
<body>
<img id="spaffySpecial" src="lungs.gif" width=116 height=123 style="-moz-opacity:50;filter:alpha(opacity=50)">
<br/>
Opacité : <input type='text' id='result' style="width:40px;text-align:right;" />
<script>
var max = 100;
var min = 50;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("spaffySpecial");
 
function fadePic(){		
				if (opacite<max && up){opacite+=2;}
				if (opacite>min && !up){opacite-=2;}
				if (opacite>=max){up=false;}
				if (opacite<=min){up=true;}
 
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("spaffySpecial").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
</script>
</body>
</html>

l'opacité jouera entre 100 et 50 :)
essaye de comprendre le script :oops:

25/05/2008, 18h05
Reality_Check

Merci c'est gentil de ta part mais depuis j'ai utilisé une autre technique, plutôt barbare, mais au moins ça marche et je comprends !

à +