Du Javascript sur du CSS

**brazilia28** · 30/10/2006, 11h43

Bonjour � tous,

J'affiche dans une page HTML, des images (<div id="nomId"></div>) � l'aide d'un fichier CSS. Je souhaiterais inclure du code Javascript pour que par d�faut, toutes mes images soient sombre et qu'elles deviennent plus claires au passage de la souris.
Pouvez-vous m'aider et me dire quel code et o� je dois le mettre (page HTML ou CSS) ?
Je vous remercie.

A bient�t

**SpaceFrog** · 30/10/2006, 11h47

mhhhh pas simple ton truc ...

je verrais bien un truc du genre un div au dessus de l'image et faire varier son opacit� ...

**Bis�n�rs** · 30/10/2006, 11h50

Il te faut :

soit deux images diff�rentes et tu changes la source sur un onmouseover et un onmouseout

soit un claque noir sur chaque image en g�rant l'opacit� en CSS (filter:alpha(opacity=100); -moz-opacity:1) avec un hover sur l'�l�ment div, mais ce n'est pas standard et �a ne fonctionne pas avec IE.

**SpaceFrog** · 30/10/2006, 11h53

Bisounours... il faudra a mon avis plus de deux images ...

et pour la seconde solution, un setInterval d�claench� sur le onmousover et stopp� sur le onmouseout peut tout � fait faire l'affaire pour emuler le hover ...

**Bis�n�rs** · 30/10/2006, 11h58

@SpaceFrog :

Envoy� par brazilia28

que par d�faut, toutes mes images soient sombre et qu'elles deviennent plus claires au passage de la souris.

Il n'a pas parl� de changement progressif.

Si c'est le cas, en effet 2 images ne seront pas assez, en revanche si deux images, une sombre et une claire, lui suffisent le premier point est la meilleure solution.

**denisC** · 30/10/2006, 12h02

Envoy� par BisounoursJos

Si c'est le cas, en effet 2 images ne seront pas assez, en revanche si deux images, une sombre et une claire, lui suffisent le premier point est la meilleure solution.

Surtout de lon la plus simple. Une question de rentablit� du developpement. Est-ce r�ellement essentiellement d'avoir un joli fondu des images?

Ceci dit, si tu nous fait un script, SF, il ira s'ajouter aux Sources

(enfin, si t'as pas de la traduction � faire ....

)

**brazilia28** · 30/10/2006, 12h25

Bien, tout d'abord, merci pour toutes ces r�ponses.

�a m'a l'air un peu compliqu� au premier abord, car je ne maitrise pas trop le javascript.
Je vais vous expliquer ce que je veux faire.

Une simple gallerie photo, avec seulement des images sombres. Et lorsque la souris passe sur une image, elle s'affiche avec ses couleurs normales. �a, vous l'avez d�j� compris. Mais par contre, je ne veux que deux nuances de couleurs, pas de d�grad�s entre l'image sombre et l'image finale.

J'importe les images avec du CSS pour pouvoir les placer o� je veux sur ma page et aussi pour ne pas utiliser de tableaux dans ma page html (<table><tr>.....)
Peut-�tre avez-vous une meilleure solution que d'utiliser du CSS et qui conviendrait mieu � agir sur les images avec du Javascript ?

Je vais toutefois essayer les solutions que vous m'avez propos�es !!

Merci

**denisC** · 30/10/2006, 12h28

Envoy� par brazilia28

J'importe les images avec du CSS pour pouvoir les placer o� je veux sur ma page et aussi pour ne pas utiliser de tableaux dans ma page html (<table><tr>.....)
Peut-�tre avez-vous une meilleure solution que d'utiliser du CSS et qui conviendrait mieu � agir sur les images avec du Javascript ?

Si tu ne veux que deux images, la meilleure solution est de les g�nerer (enfin, la sombre � partir de la claire) avec ton logiciel de retouche d'image pr�f�r� (Gimp si tu n'en as pas).
A partir de l�, tu mets un onmouseover javascript, qui change l'image affich�, un onmouseout qui remets tout en place.

Le fait d'utiliser CSS n'interfere en rien (c'est m�me une tr�s bonne id�e).

**brazilia28** · 30/10/2006, 12h30

Ok, d'accord, merci.
Je vais faire �a et je vous tiens au courant du r�sultat.

**FremyCompany** · 30/10/2006, 13h11

Et voila le travail :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
    <head>
        <title>Opacity modifier</title>
        <script><!--
            getLocation=function(node) {
                var loc = {"width":node.offsetWidth,"height":node.offsetHeight };
            	var left=node.offsetLeft;
            	var top =node.offsetTop;
            	while(node.offsetParent) {
            		node=node.offsetParent;
            		left+=node.offsetLeft;
            		top +=node.offsetTop;
            	}
                loc.left=left;
                loc.top=top;
            	return loc;
            }
 
            addOpacityChangeEffect=function(node) {
                node.oo = document.createElement("div");
                node.oo.style.backgroundColor="black";
                node.oo.style.position="absolute";
                node.oo.opacity=25;
                node.oo.opacityModifier=0;
                node.oo.onmouseover=function() {
                    this.opacityModifier=-1;
                }
                node.oo.onmouseout=function() {
                    this.opacityModifier=1;
                }
                node.oo.update=function(node) {
                    var loc=getLocation(node);
                    this.style.left=loc.left+"px";
                    this.style.width=loc.width+"px";
                    this.style.top=loc.top+"px";
                    this.style.height=loc.height+"px";
                    this.opacity+=this.opacityModifier;
                    if (this.opacity>25) {this.opacity=25;}
                    if (this.opacity<0) {this.opacity=0;}
                    this.style.opacity=(this.opacity/100);
                    this.style.filter="alpha(opacity="+this.opacity+")"
                    var zi = parseInt(node.style.zIndex);
                    if (zi < 0) { zi = 0 }
                    zi+=1;
                    this.style.zIndex=zi;
                }
                setInterval(function() { node.oo.update(node); }, 1);
                document.body.appendChild(node.oo);
            }
        --></script>
    </head>
    <body>
        <img id="image1" src="fremycompany.jpg"/>
        <script>addOpacityChangeEffect(document.getElementById("image1"));</script>
    </body>
</html>

**brazilia28** · 04/11/2006, 14h48

j'ai suivi ton conseil denisC, mais �a ne fonctionne pas.
Voici mon code, pouvez-vous me dire ce qui ne vas pas ??

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id="images1" onMouseOver="/upload/images1_2.jpg"></div>

dans une feuille CSS :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
#images1
{
background-image:url(upload/images1.jpg);
background-repeat:no-repeat;
position:absolute;
left:300px;
top:220px;
width:160px;
height:155px;
border:1px solid #000;
}

les images sont stock�es dans le r�pertoire upload de mon site.

Merci

**brazilia28** · 04/11/2006, 14h49

petite pr�cision:

L'image affich�e par d�faut est l'image sombre (images1.jpg) et l'image que je souhaite afficher au passage de la souris et l'image claire (images1_2.jpg).
Elles sont toutes les deux stock�es dans le r�pertoire upload

merci

**Bis�n�rs** · 04/11/2006, 14h56

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id="images1" onmouseover="this.style.backgroundImage='url(upload/images1_2.jpg)'" onmouseout="this.style.backgroundImage='url(upload/images1.jpg)'"></div>

**brazilia28** · 05/11/2006, 02h22

Merci Bis�n�rs, �a fonctionne parfaitement comme je le voulais.

A bient�t

Bonne continuation

Du Javascript sur du CSS

JavaScript

Discussions similaires

Partager

Partager