Effet d'opacité sur des images

**Reality_Check** · 24/05/2008, 11h51

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 !

**le_chomeur** · 24/05/2008, 13h56

va voir les contributions

**Reality_Check** · 24/05/2008, 14h19

Excuse moi , mais c'est quoi les contributions ?

**le_chomeur** · 24/05/2008, 14h34

http://www.developpez.net/forums/sho...wpost&t=278036

**Reality_Check** · 24/05/2008, 14h48

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

**le_chomeur** · 24/05/2008, 15h06

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

**Reality_Check** · 24/05/2008, 17h57

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 !

**le_chomeur** · 25/05/2008, 16h03

voila :

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

**Reality_Check** · 25/05/2008, 18h05

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 !

à +

Effet d'opacité sur des images

JavaScript

Discussions similaires

Partager

Partager