Du Javascript sur du CSS

Version imprimable

30/10/2006, 11h43
brazilia28

Du Javascript sur du CSS

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
30/10/2006, 11h47
SpaceFrog

mhhhh pas simple ton truc ...

je verrais bien un truc du genre un div au dessus de l'image et faire varier son opacité ...
30/10/2006, 11h50
Bisûnûrs

Il te faut :

:arrow: soit deux images différentes et tu changes la source sur un onmouseover et un onmouseout
:arrow: 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.
30/10/2006, 11h53
SpaceFrog

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 ...
30/10/2006, 11h58
Bisûnûrs

@SpaceFrog :

Citation:

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.
30/10/2006, 12h02
denisC

Citation:

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 .... :aie: )
30/10/2006, 12h25
brazilia28

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
30/10/2006, 12h28
denisC

Citation:

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).
30/10/2006, 12h30
brazilia28

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

Et voila le travail :

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

04/11/2006, 14h48
brazilia28
j'ai suivi ton conseil denisC, mais ça ne fonctionne pas.
Voici mon code, pouvez-vous me dire ce qui ne vas pas ??

Code:

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

dans une feuille CSS :
Code:

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
04/11/2006, 14h49
brazilia28

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
04/11/2006, 14h56
Bisûnûrs

Code:

<div id="images1" onmouseover="this.style.backgroundImage='url(upload/images1_2.jpg)'" onmouseout="this.style.backgroundImage='url(upload/images1.jpg)'"></div>
05/11/2006, 02h22
brazilia28

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

A bientôt

Bonne continuation