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