Estompage d'images survolées.

Version imprimable

30/07/2007, 15h34
steveroselmac

Estompage d'images survolées.

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
30/07/2007, 15h40
titfab

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

1 2 <img src="tutu.jpg" onmouseover="estompeAutres()" onmouseout="modeNormal()"/>
...
30/07/2007, 17h28
steveroselmac

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

Exemple

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

Exemple :

Code:

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

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

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

31/07/2007, 16h15
SpaceFrog

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

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

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

01/08/2007, 10h17
SpaceFrog

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