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

**NoSmoking** · 21/11/2015, 17h48

...donc une capture d'écran et affichage des images suffit (je pense)...

tu te retrouves donc avec une page sans contenu ou presque, qui plus est aucune de tes images ne possède d'attribut alt

**valgreg** · 21/11/2015, 18h03

Envoyé par NoSmoking

tu te retrouves donc avec une page sans contenu ou presque

c'est ce que me demande la personne, juste un site de présentation pour sa boite

Envoyé par NoSmoking

aucune de tes images ne possède d'attribut alt

oui, je ne connaissais pas l'attribut alt"" je viens de me renseigner, et ça me sera certainement très utile

pour ceux qui lisent et qui ne savent pas

l'attribut alt dans les images

**NoSmoking** · 21/11/2015, 18h24

c'est ce que me demande la personne, juste un site de présentation pour sa boite

cela n'est pas une excuse, si je lis cette page sur un lecteur d'écran, par exemple, je n'aurais aucune information sur le site.

**valgreg** · 21/11/2015, 18h29

qu'entends tu par : aucune informations sur le site ?

je pense que tu parles de ça

j'ai suivi tes conseils, j'ai revu mes div et mes alt dans mes images

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
 
<!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>
<!-- afficahge du calque damier -->
        <img src="" id="calc" alt=""/>   
 
<!-- afficahge des miniatures -->
        <div id="line" >                    
            <img src="./img/demo.jpg" id="ima" alt=""/>   
        </div>
 
<!-- on cache les masques des lignes -->
        <div id="l">
            <div id="l1">
                <img src="./img/l1.png" onload="hide('l1')" alt=""/>
            </div>
            <div id="l2">
                <img src="./img/l2.png" onload="hide('l2')" alt=""/>
            </div>
            <div id="l3">
                <img src="./img/l3.png" onload="hide('l3')" alt=""/>
            </div>
            <div id="l4">
                <img src="./img/l4.png" onload="hide('l4')" alt=""/>
            </div>
        </div>  
 
<!-- debut des paramatres du menu -->
    <!-- imageries commerciales -->    
        <!-- on affiche le bouton au passage de la souris dessus -->
        <div    id="pos_ic" >
            <div    onMouseOver="show('ic')"
                    onMouseOut="hide('ic')" >
        <!-- on masque le damier au passage de la souris sur une ligne de menu -->
            <div    onMouseOver="hide('calc')"
                    onMouseOut="show('calc')" >
        <!-- on affiche le masque pour laisser que la ligne -->
            <div    onMouseOver="show('l1')"
                    onMouseOut="hide('l1')" >
        <!-- on masque le bouton à son chargement -->
                    <img id="ic" src="./img/ic.jpg" onload="hide('ic')" alt=""/>
            </div>
            </div>
            </div>
        </div>
 
    <!-- permis de construire -->    
        <!-- on affiche le bouton au passage de la souris dessus -->
        <div    id="pos_pdc" >
            <div    onMouseOver="show('pdc')"
                    onMouseOut="hide('pdc')" >
        <!-- on masque le damier au passage de la souris sur une ligne de menu -->
            <div    onMouseOver="hide('calc')"
                    onMouseOut="show('calc')" >
        <!-- on affiche le masque pour laisser que la ligne -->
            <div    onMouseOver="show('l2')"
                    onMouseOut="hide('l2')" >
        <!-- on masque le bouton à son chargement -->
                    <img id="pdc" src="./img/pdc.jpg" onload="hide('pdc')" alt=""/>
            </div>     
            </div>
            </div>
        </div>    
    </body>
</html>

**NoSmoking** · 22/11/2015, 15h14

qu'entends tu par : aucune informations sur le site ?

voilà ce que contient ta page

titre document : Ambiance Artchitecture
image : ""                texte de substitution : aucun
image : "./img/demo.jpg"  texte de substitution : aucun
image : "./img/l1.png"    texte de substitution : aucun
image : "./img/l2.png"    texte de substitution : aucun
image : "./img/l3.png"    texte de substitution : aucun
image : "./img/l4.png"    texte de substitution : aucun
image : "./img/ic.jpg"    texte de substitution : aucun
image : "./img/pdc.jpg"   texte de substitution : aucun

donc on est assez proche de rien !

**valgreg** · 24/11/2015, 10h38

Merci pour ton aide, je vais reprendre tout mes alt=""

Code mouseover ne fonctionne pas

Conception Web

Discussions similaires

Partager

Partager