Estompage d'images survolées.

**steveroselmac** · 30/07/2007, 15h34

Bonjour à tous,

Etant vraiment débutant extreme en utilisation en Java je me tourne vers vous pour connaitre la faisabilité de mon souhait.

Je desire afficher une galerie d'image dans un tableau (Jusque là un peu de html et de php je gère)

Je voudrais que lorsque que je passe la souris sur une des images les autres images s'estompent et qu'un commentaire vienne se placer près de l'image survolée.

Merci pour votre aide et pour vos conseils.

Cordialement

Steve

**titfab** · 30/07/2007, 15h40

Tu peux utiliser les propriétés onmouseover et onmouseout du tag contenant ton image;ces propriétés prennent comme valeur l'appel d'une fonction Javascript qui effectuerait l'action que tu souhaite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="tutu.jpg" onmouseover="estompeAutres()" onmouseout="modeNormal()"/>

...

**steveroselmac** · 30/07/2007, 17h28

Merci pour ta reponse,

malheureusement mon niveau en java est proche quasi inexistant, existe t'il un morceau de script a inserer dans le tag d'une image qui effectue ce genre de fonctionnalité ?

merci

**titfab** · 31/07/2007, 16h06

Pour le commentaire à côté de l'image, tu peux utiliser l'info bulle avec l'attibut "alt"

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="www.developpez.net" alt="C'est un super site!">developpez</a>

Pour l'histoire d'estomper, voici un exemple maison :

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
<html>
<head>
<script language="javascript">
/** Liste des images en mode Normal **/
var listeImgNormal={"image1.jpg","image2.jpg","image3.jpg","image4.jpg"};
/** Liste des images en mode Estompée **/
var listeImgEstompe=={"image1bis.jpg","image2bis.jpg","image3bis.jpg","image4bis.jpg"};
function modeNormal(){
  for (i=1;i<5;i++){
    document.getElementById("image"+i).src=listeImgNormal[i];
  }
}
function estomper(numImg){
  for (i=1;i<5;i++){
    document.getElementById("image"+i).src=listeImgEstompe[i];
  }
  document.getElementById("image"+numImg).src=listeImgNormal[i];
}
</script>
</head>
<body>
<table>
  <tr>
    <td>
       <img id="image1" src="image1.jpg"  onmouseover="estomper(1);" onmouseout="modeNormal()"/>
    </td>
    <td>
       <img id="image2" src="image2.jpg"  onmouseover="estomper(2);" onmouseout="modeNormal()"/>
    </td>
  </tr>
  <tr>
    <td>
       <img id="image3" src="image3.jpg"  onmouseover="estomper(3);" onmouseout="modeNormal()"/>
    </td>
    <td>
       <img id="image4" src="image4.jpg"  onmouseover="estomper(4);" onmouseout="modeNormal()"/>
    </td>
  </tr>
</table>
</body>
</html>

**SpaceFrog** · 31/07/2007, 16h15

oui sinon il y a des librairies toutes faites qui font ça ...
je ne me souviens plus du nom ...

**SpaceFrog** · 31/07/2007, 16h18

un exemple avecune seule image mais que l'on peut adapter

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
57
58
59
60
<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=0; // Opacité de départ (maximum de préférence)
                node.oo.opacityModifier=0; // A laisser à 0 par défaut, taux de modification de l'opacité en [%/cs]
                node.oo.onmouseover=function() {
                    this.opacityModifier=+8; // L'opacité diminue de 1% chaque centième de secconde
                }
                node.oo.onmouseout=function() {
                    this.opacityModifier=-8; // L'opacité se rencorde de 1% chaque centième de secconde
                }
                node.oo.update=function(node) {
                    // Place le div au bon endroit
                    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";
                    // Effectue le changement d'opacité (valeur)
                    this.opacity+=this.opacityModifier; 
                    if (this.opacity>80) {this.opacity=80;} // Opacité maximum
                    if (this.opacity<0) {this.opacity=0;} // Opacité minimum (souvent 0:transparent)
                    // Effectue le changement d'opacité (style)
                    this.style.opacity=(this.opacity/100); // FF
                    this.style.filter="alpha(opacity="+this.opacity+")" // IE
                    // Place le div au dessus de l'image
                    var zi = parseInt(node.style.zIndex);
                    if (zi < 0) { zi = 0 }
                    zi+=1;
                    this.style.zIndex=zi;
                }
                setInterval(function() { node.oo.update(node); }, 10);
                document.body.appendChild(node.oo);
            }
        --></script>
    </head>
    <body>
        <img id="image1" src="Lungs.gif"/>
        <script>addOpacityChangeEffect(document.getElementById("image1"));</script>
    </body>
</html>

**SpaceFrog** · 01/08/2007, 10h17

en voyant un autre post je me suis souvenu du nom de la librairie c'est lightbox ...

Estompage d'images survolées.

JavaScript

Discussions similaires

Partager

Partager