Code mouseover ne fonctionne pas

**valgreg** · 21/11/2015, 12h25

Bonjour à tous, et déjà je commence par vous remercier de vous arrêter ici ^^

donc j'explique mon problème, j'ai une image centrale auquel j'applique en alternance un masque en damier

sur le côté droit, j'ai un menu que je met en surbrillance au passage de la souris, et qui applique un autre masque et cache mon masque en damier

mais mieux que des mots, je vous met un lien du site en question, et bien évidement tout les codes

si quelqu'un sait comment arranger mon problème, ou m'aiguiller ça serait super sympa.

autre chose bizarre, aux lignes html 38, 43, 59, 64 si je ferme ma balise <div ">" elle ne marche pas

mes soucis que j'ai :

- quand je passe ma souris au dessus de ma deuxième ligne de menu : la première se met aussi en surbrillance alors qu'elle devrait pas
- quand je passe ma souris au dessus de l'image principale, le masque damier s’arrête, et il ne devrait pas non plus

http://angel.darkness.free.fr

Code html :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Ambiance Artchitecture</title>
        <link rel="icon" href="./img/favicon.ico" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="./sc/steelsheet.css"/>
        <script type="text/javascript" src="./sc/main.js"> </script>
    </head> 
    <body>
        <div id="l">
            <div id="l1">
                <img src="./img/l1.png" onload="hide('l1')"/>
            </div>
            <div id="l2">
                <img src="./img/l2.png" onload="hide('l2')"/>
            </div>
            <div id="l3">
                <img src="./img/l3.png" onload="hide('l3')"/>
            </div>
            <div id="l4">
                <img src="./img/l4.png" onload="hide('l4')"/>
            </div>
        </div>  
 
    <!-- debut des paramatres du menu -->
        <!-- imageries commerciales -->    
             <!-- on affiche le bouton au passage de la souris dessus -->
            <div    id="pos_ic"
                    onMouseOver="show('ic')"
                    onMouseOut="hide('ic')"
            </div>
             <!-- on masque le damier au passage de la souris sur une ligne de menu -->
            <div    id="pos_ic"
                    onMouseOver="hide('calc')"
                    onMouseOut="show('calc')"                
            </div>
             <!-- on affiche le masque pour laisser que la ligne -->
            <div    id="pos_ic"
                    onMouseOver="show('l1')"
                    onMouseOut="hide('l1')">
            </div>        
            <!-- on masque le bouton à son chargement -->
            <img    id="ic"
                    src="./img/ic.jpg"
                    onload="hide('ic')" />
 
        <!-- permis de construire -->    
             <!-- on affiche le bouton au passage de la souris dessus -->
            <div    id="pos_pdc"
                    onMouseOver="show('pdc')"
                    onMouseOut="hide('pdc')"
            </div>
             <!-- on masque le damier au passage de la souris sur une ligne de menu -->
            <div    id="pos_pdc"
                    onMouseOver="hide('calc')"
                    onMouseOut="show('calc')"               
            </div>
             <!-- on affiche le masque pour laisser que la ligne -->
            <div    id="pos_pdc"
                    onMouseOver="show('l2')"
                    onMouseOut="hide('l2')">
            </div>        
            <!-- on masque le bouton à son chargement -->
            <img    id="pdc"
                    src="./img/pdc.jpg"
                    onload="hide('pdc')" />    
 
        <!-- afficahge du calque damier -->
        <img src="" id="calc" />   
 
        <!-- afficahge des miniatures -->
        <div id="line">                    
            <img src="./img/demo.jpg" id="ima" />   
        </div>
    </body>
</html>

Code javascript :

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
 
// affichage aléatoire des images
// un trop petit nombre d'images augmente le risque de doublon
// si 4 images = *3+1
 /*
function randomImg(){
    document.getElementById('ima').src="./img/ic/img_"+Math.round(Math.random()*3+1)+".jpg";
    document.getElementById('ima2').src="./img/ic/img_"+Math.round(Math.random()*3+1)+".jpg";
    document.getElementById('ima3').src="./img/ic/img_"+Math.round(Math.random()*3+1)+".jpg";}
*/
var altmasq = 0;
altmasq = setInterval(function altern(){
    var urls=new Array();
    urls[0]="http://angel.darkness.free.fr/img/c1.png";
    urls[1]="http://angel.darkness.free.fr/img/c2.png";
 
    var img=document.getElementById("calc");
 
    if(img.src==urls[0]){img.src=urls[1]}
    else{img.src=urls[0]}},
1500);
 
function show(id) { 
document.getElementById(id).style.visibility = "visible"; 
} 
function hide(id) { 
document.getElementById(id).style.visibility = "hidden"; 
}

Code css :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 18 nov. 2015, 19:13:52
    Author     : Valgreg
*/
body {
    position: fixed;
    background-repeat: no-repeat;
    background-color: #4f4f4f;
    background-image: url(../img/bg.jpg);
}
#line{
    left: 0px;
    top: 88px;    
    position: fixed;
    }
#l1{
    top: 88px;
    left: 0px;
    z-index: 3;    
    position: fixed;
    }
#l2{
    top: 88px;
    left: 0px;
    z-index: 3;    
    position: fixed;
    }
#l3{
    top: 88px;
    left: 0px;
    z-index: 3;    
    position: fixed;
    }
#l4{
    top: 88px;
    left: 0px;
    z-index: 3;    
    position: fixed;
    }
#pos_ic{
    left: 909px;
    top: 390px;
    width: 261px;
    height: 15px;
    position: fixed;
    }
#pos_pdc{
    left: 909px;
    top: 415px;
    width: 261px;
    height: 15px;
    position: fixed;
    }
#pos_pe{
    left: 909px;
    top: 430px;
    width: 261px;
    height: 15px;
    position: fixed;
    }
#pos_rda{
    left: 909px;
    top: 445px;
    width: 261px;
    height: 15px;
    position: fixed;
    }    
#calc{
    top: 88px;
    left: 0px;
    z-index: 2;
    position: fixed;
    }
#ima{
    z-index: 1;
    position: fixed;
    }

**valgreg** · 21/11/2015, 14h49

j'ai trouvé, j'ai imbriqué mes div par lignes de menu
avant :

Code html :

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
 
    <!-- debut des paramatres du menu -->
        <!-- imageries commerciales -->    
             <!-- on affiche le bouton au passage de la souris dessus -->
            <div    id="pos_ic"
                    onMouseOver="show('ic')"
                    onMouseOut="hide('ic')"
            </div>
             <!-- on masque le damier au passage de la souris sur une ligne de menu -->
            <div    id="pos_ic"
                    onMouseOver="hide('calc')"
                    onMouseOut="show('calc')"                
            </div>
             <!-- on affiche le masque pour laisser que la ligne -->
            <div    id="pos_ic"
                    onMouseOver="show('l1')"
                    onMouseOut="hide('l1')">
            </div>        
            <!-- on masque le bouton à son chargement -->
            <img    id="ic"
                    src="./img/ic.jpg"
                    onload="hide('ic')" />

apres :

Code html :

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
 
    <!-- imageries commerciales -->    
        <!-- on affiche le bouton au passage de la souris dessus -->
        <div    id="pos_ic"
                onMouseOver="show('ic')"
                onMouseOut="hide('ic')" >
        <!-- on masque le damier au passage de la souris sur une ligne de menu -->
            <div    id="pos_ic"
                    onMouseOver="hide('calc')"
                    onMouseOut="show('calc')" >
        <!-- on affiche le masque pour laisser que la ligne -->
                <div    id="pos_ic"
                        onMouseOver="show('l1')"
                        onMouseOut="hide('l1')" >
        <!-- on masque le bouton à son chargement -->
                    <img    id="ic"
                            src="./img/ic.jpg"
                            onload="hide('ic')" />
                </div>
            </div>
        </div>

**NoSmoking** · 21/11/2015, 15h29

Bonjour,
attention <div id="pos_ic" une ID doit être UNIQUE et ne doit pas commencer par un chiffre !

► http://www.w3.org/TR/html401/struct/global.html#adef-id

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

► http://www.w3.org/TR/html401/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Dernier point, pourquoi ne pas utiliser une liste pour ton menu ?

**valgreg** · 21/11/2015, 15h41

Envoyé par NoSmoking

attention <div id="pos_ic" une ID doit être UNIQUE et ne doit pas commencer par un chiffre !

aucune "id" ne commence par un chiffre dans mon code/
si j'ai mis plusieur imbrication de <div id="pos_ic", c'est que j'ai pas réussi à mettre plusieurs fois un onMouseOver dans le même div, et vu que le passage de la souris dessus doit faire plusieurs action, je repris le même id, pour n'avoir qu'a le positionner qu'une seule fois dans mon css

Envoyé par NoSmoking

Dernier point, pourquoi ne pas utiliser une liste pour ton menu ?

tout simplement parce que je n'y ai pas pensé, et que je vois pas comment faire, je suis débutant

et ensuite une fois que l'utilisateur clic sur une ligne de menu, ça doit ouvrir soit une galerie de photo à la place de l'image principale, soit le texte de présentation, ou la page de contact

**NoSmoking** · 21/11/2015, 16h05

Je me suis laissé abuser les yeux par un l1

j'ai pas réussi à mettre plusieurs fois un onMouseOver dans le même div,

tu peux déjà gérer le changement d'aspect, couleur, en CSS avec la pseudo-classes :hover.

**valgreg** · 21/11/2015, 16h11

Envoyé par NoSmoking

tu peux déjà gérer le changement d'aspect, couleur, en CSS avec la pseudo-classes :hover.

j'ai eu la flemme, la personne qui me demande ce site, veut une police de caractère bien spécifique, donc une capture d'écran et affichage des images suffit (je pense) et mon menu ne contient que 6 lignes

Code mouseover ne fonctionne pas

Conception Web

Vue hybride

Discussions similaires

Partager

Partager