Confrontation Javascript XHTML CSS

**Athane** · 26/01/2009, 13h03

Bonjour,
dans le cadre de mes études, j'ai du créer mon CV en ligne en y ajoutant (selon les demandes des profs) quelques fonctions Javascript. Jusque là, je n'avais pas de souci, mais depuis hier je me prends la tête (sûrement pour quelque chose de bête mais, étant tellement plongé dans le code que je ne trouve pas la raison du bogue).

J'ai repris une fonction qui me permet de changer la couleur du bg de la page web. Jusque là ça fonctionne. Le hic, c'est que j'ai rajouté une fonction supplémentaire qui permet en fonction de la position du curseur d'afficher un petit message. Exemple tout bête : la souris passe sur l'image qui va changer la couleur de fond en bleu, le petit texte "changer la couleur de fond en bleu" apparaît. Seulement il apparaît disons, à la mauvaise place ...

Pour voir en image mon souci, cliquez ici

J'ai fait attention et revérifier mais je n'arrive pas à trouver la raison... J'ai tenté de refaire le fichier à part et là, le bogue ne se produit pas. Cela vient donc d'un souci de confrontation de code que je n'arrive pas à trouver...

Ci-dessous le code de ma page idx.html

Code XHTML :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jonathan MAROIS - Accueil</title>
 
<link rel="stylesheet" href="css/layout.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
</head>
<body>
<a name="top"></a>
    <div id="accessibilite">
      <!--      <a href="#" onClick="document.a+.src='img/a+over.png'" onmouseout="document.a+.src='img/a+.png'">
    <img src="img/a+.png" border="0" name="a+" alt="Augmenter la taille du texte" title="Augmenter la taille du texte" /></a>
        <a href="#" onClick="document.a-.src='img/a-over.png'" onmouseout="document.a-.src='img/a-.png'">
    <img src="img/a-.png" border="0" name="a-" alt="Diminuer la taille du texte" title="Diminuer la taille du texte" /></a>
      <a href="#top" onClick="document.top.src='img/topover.png'" onmouseout="document.top.src='img/top.png'">
    <img src="img/top.png" border="0" name="top" alt="Retour en haut de page" title="Retour en haut de page" /></a>-->
    </div>
<div id="conteneur">
 
    <div id="arabesques"> <img src="img/arabesqueG.gif" alt="" class="floatGauche" /><img src="img/arabesqueD.gif" alt="" class="floatDroite" />
      <div id="menu" class="alignCentre">
        <ul>
          <li><a href="idx.html" class="active">Mon CV</a></li>
          <!--      <li><a href="#">Mes réalisations</a></li>
          <li><a href="#">Mon blog</a></li>-->
          <li><a href="contact.php">Me contacter</a></li>
        </ul>
      </div>
    </div>
 
    <div id="info"></div>
 
    <div id="boite1" class="boites" onmousemove="move();" onmouseover="afficher('Changer la couleur de fond en blanc');" onmouseout="cacher();" onclick="changer('white');"></div>
 
    <div id="boite2" class="boites" onmousemove="move();" onmouseover="afficher('Changer la couleur de fond en noir');" onmouseout="cacher();" onclick="changer('black');"></div>
 
    <div id="boite3" class="boites" onmousemove="move();" onmouseover="afficher('Changer la couleur de fond en bleu');" onmouseout="cacher();" onclick="changer('blue');"></div>
 
    <div id="boite4" class="boites" onmousemove="move();" onmouseover="afficher('Changer la couleur de fond en rouge');" onmouseout="cacher();" onclick="changer('red');"></div>
 
    <div id="boite5" class="boites" onmousemove="move();" onmouseover="afficher('Changer la couleur de fond en vert');" onmouseout="cacher();" onclick="changer('green');"></div>
 
    <div id="contenu" class="clear">
 
    <span id="identite" class="floatGauche alignGauche">Jonathan MAROIS<br />
    22 ans<br />
    Titulaire du permis B
    </span>
 
    <span id="contact" class="floatDroite alignDroite">
    <img src="img/Jonathan-MAROIS.jpg" alt="Ma photo" width="106" height="114" /><br />
    <a href="contact.php">jonathan(pt)marois(at)gmail(pt)com</a></span><br /><br />
    <div class="clear"></div>
    <br />
    <a href="img/image-1.jpg" rel="lightbox" title="legende"><img src="img/image-1.jpg" alt="image-1" width="10%" /></a>
 
    <a href="img/image-1.jpg" rel="lightbox[roadtrip]" title="legende 1">image #1</a>
    <a href="img/image-2.jpg" rel="lightbox[roadtrip]" title="legende 2">image #2</a>
    <a href="img/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
 
 
    <p>PARCOURS<br />
    2008-2009 Master Pro Créations &amp; Editions Numériques (CEN) Université
    PARIS 8, Saint Denis<br />
    2007-2008 Licence Information et Communication, mention assez bien Université
    PARIS 13, Villetaneuse<br />
    2005-2007 DUT Services et Réseaux de Communication (SRC), option Communication
    IUT de Bobigny, Université PARIS 13, Bobigny<br />
    2004-2005 Année de Sciences et Techniques des Activités Physiques et
    Sportives (STAPS) Université PARIS 13, Bobigny<br />
    2003-2004 Baccalauréat Scientifique (S), option Sciences de la Vie et
    de la Terre Lycée polyvalent Maurice Utrillo, Stains</p>
    <p>&nbsp;</p>
    <p><br />
    EXPERIENCES PROFESSIONNELLES<br />
    Aout – Décembre 2008 Adonis Groupe : webmaster, refonte du site pour
    optimisation référencement et ajout de contenus<br />
    <br />
    Juillet 2008 Hôpital de gériatrie Joffre/Dupuytren : Aide soignant<br />
    Mai – Juin 2008 Oxalis / de Decker : Stage graphisme, webdesign, animation,
    refonte du site « de Decker - Expertise et Audit »<br />
    2008 Agence Elephorm : bêta testeur<br />
    2007 – 2008 PSD Magazine (magazine de graphisme N°1 au monde) : bêta
    testeur + représentant exclusif lors de l’Apple Expo 2008<br />
    Août 2005 – Avril 2008 Poste de Paris 19ème<br />
    : Facteur<br />
    Avril – Juillet 2007 ENR Diffusion : Stage webmaster, graphiste, communication<br />
    Juin 2006 IUT de Bobigny : Stage réalisateur, cadreur et monteur<br />
    Mai – Août 2005 S.A.R.L ACCESS : Ouvrier électricien<br />
    <p>&nbsp;</p>
 
    <p>COMPETENCES<br />
    Logiciels graphiques Photoshop, Illustrator, notions InDesign (CS2 et
    CS3)<br />
    Multimedia Flash (CS2 et CS3), Final Cut Express, Director Notions PHP/MySQL
    et intégration CMS<br />
    Bureautique Word, Excel, Powerpoint, suite Open Office<br />
    Missions Création de logos et de ses déclinaisons ainsi que de plusieurs
    animations pour la société Oxalis<br />
    Création d’un site Internet pour la société ENR Diffusion en 2007<br />
    Réalisation et montage d’un mini clip promotionnel pour l’IUT de Bobigny<br />
    Journaliste pour le site Wikideche créé lors d'un projet de communication<br />
    Documentaire vidéo autour de l’événement de la coupe du monde de rugby
    2007<br /></p>
    <p>&nbsp;</p>
 
    <p>LANGUES<br />
    Anglais Lu, écrit, parlé (niveau scolaire)<br />
    Espagnol Lu, écrit, parlé<br />
    <p>&nbsp;</p>
 
 
    <p>CENTRES D’INTERETS ET ACTIVITES EXTRA-SCOLAIRES<br />
    Intéressé par le web marketing, les nouvelles technologies et la culture
    du web<br />
    Pratique courante du basket, de la marche et des échecs</p>
  </div>
 
    <div id="footer" class="alignCentre">
    Copyright
    </div> 
 
</div>
 
<!--On appelle les scripts--> 
<script type="text/javascript" src="js/preloader.js"></script>
<script type="text/javascript" src="js/change_couleurBg.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</body>
</html>

Voici le code Javascript qui gère les événements

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
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
 
/* on affecte par défaut une couleur au Bg */
document.body.bgColor = "#d96704";
 
var m_x;
var m_y;
 
document.onmousemove = mouse_monitor;					// attacher un evenement au document entier
 
function mouse_monitor(event) {							// le mouse moniteur donne la position du curseur en permanence
 
	if(window.event) {									// chemin IE							
		m_x = window.event.clientX;
		m_y = window.event.clientY;
	} else {											// chemin Mozilla
		m_x = event.clientX;
		m_y = event.clientY;
	}
 
	if(window.pageYOffset) {							// corriger la position du curseur selon le scrolling, IE / Autres
		var topoff = window.pageYOffset;
		var topleft = window.pageXOffset;
	} else {
		var topoff = document.body.scrollTop;
		var topleft = document.body.scrollLeft;
	}
 
	m_y = m_y + topoff;
	m_x = m_x + topleft;
 
}
 
<!--
 
function move() {
	document.getElementById("info").style.left = (m_x + 10) + "px";
	document.getElementById("info").style.top = (m_y + 10) + "px";
}
 
function afficher(texte) {
	document.getElementById("info").style.visibility = "visible";
	document.getElementById("info").innerHTML = texte;
/*		document.getElementById("info2").style.visibility = "visible";
	document.getElementById("info2").innerHTML = texte;		
*/	}
 
function cacher() {
	document.getElementById("info").style.visibility = "hidden";
/*		document.getElementById("info2").style.visibility = "hidden";
*/	}
 
function changer(color){		
	document.body.bgColor = color;		
}
//-->

Enfin, je poste au cas où, le CSS qui gère l'affichage de la page idx.html puis celui qui gère le javascript.

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
 
@charset "utf-8";
@import url(styles.css);
@import url(change_couleurBg.css);
/* Cette page va contenir les styles n�cessaires � la pr�sentation du contenu */
 
/* ----- conteneur general ----- */
#conteneur {position:relative; background-color: #1c2a2a; width: 780px; height: auto; margin-left:-390px; left:50%;}
 
/* ----- header ----- */
#arabesques {position: relative; background: url("../img/header.gif"); background-repeat: repeat-x; width: 100%; float: left;}	
.floatGauche {position: relative; margin-left: 0px !important; margin-left: -3px; float:left;}
.floatDroite {position: relative; margin-right: 0px !important;	margin-right: -3px; float:right;}
 
/* ----- menus ----- */
#menu {position: relative; width: auto; padding-top: 20px; margin: auto; font-size: 1em;}
#menu a {color: #fff; text-decoration: none; font-weight: bold;}
#menu a:hover {font-weight: bold; font-size: 1.3em;}
#menu a.active {color: #1c2a2a; font-weight: bold; font-size: 1.3em;}
#menu li {display: inline; margin-left: 25px; margin-right: 25px;}
 
/* ----- outils accessibilité ----- */
/*#accessibilite {position: fixed; right: 0; top: 200px;}*/	
 
/* ----- contenu du site ----- */
#contenu {position: relative; width: 500px; height: auto; margin: auto; margin-bottom: 50px; padding-left: 0px !important; padding-left: 150px;}
#identite {position: relative;}
#contact {position:relative;}
 
/* ----- pied de page ----- */
#footer {position: relative; background-color: #f3a413; width: 100%; height: 20px; bottom: 0; color: #fff; padding-top: 1px; padding-bottom: 1px;}
 
/* ----- formulaire ----- */
input, textarea {border:1px solid black; background-color:#f3a413; width: 350px; font-size: 1em; padding: 5px 5px 5px 5px;}

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
 
@charset "utf-8";
/* CSS Document */
 
#couleurs {background-color:#000; position:relative;}
 
#info {position:relative; width: 250px; height: 20px; left: 10px; top: 20px; background-color: transparent; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #f3a413; visibility: hidden;}
 
.boites {position: relative; width: 30px; height: 30px; float: left; left: 80px;}
 
#boite1 { background:url("../img/pinceauBlanc.gif"); background-repeat:no-repeat}	
#boite2 { background:url("../img/pinceauNoir.gif"); background-repeat:no-repeat}
#boite3 { background:url("../img/pinceauBleu.gif"); background-repeat:no-repeat}
#boite4 { background:url("../img/pinceauRouge.gif"); background-repeat:no-repeat}
#boite5 { background:url("../img/pinceauVert.gif"); background-repeat:no-repeat}

Merci par avance à ceux et celles qui auront pu consacrer leur temps à mon aide.

**le_chomeur** · 26/01/2009, 13h25

simple problème de positionnement ,
ta méthode qui positionne ta bulle d'info ne tient pas compte du positionnement de tes éléments parent il te faut donc la positionner par rapport a la div que tu survol :

<div onmouseover="alert(findPos(div))">...<div>

voici la méthode pour trouver la bonne position

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function findPos(obj) {
	//position x / y de l'objet
    var x = obj.offsetLeft || 0;
    var y = obj.offsetTop || 0;
	//tant qu'il y a un parent, on ajoute la position de son parent
    while (obj = obj.offsetParent) {
        x += obj.offsetLeft
        y += obj.offsetTop
    }
	//Ici on retour x ou y ( ou les deux dans un tableau ou un hash)
    return new Array(x,y);
}

tu peux adapter le code pour positionner la div contenant le message :

Code :

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

1
2
3
<div onmouseover="voirInfoBulle(this)">rouge<div>
<div onmouseover="voirInfoBulle(this)">vert<div>
<div onmouseover="voirInfoBulle(this)">jaune<div>

la div contenant ton info bulle

Code :

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

<div id="mabulle"></div>

Code :

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

1
2
3
4
5
function voirInfoBulle(maDiv){
var MesCoord = findPos(maDiv);
document.getElementById('mabulle').style.left = MesCoord[0] + "px";
document.getElementById('mabulle').style.top= MesCoord[1] + "px";
}

voila

**RomainVALERI** · 26/01/2009, 13h27

Dans ta CSS, passe la position de ton #info en "absolute", et donne-lui un margin-left de -200px pour éviter qu'il ne se ballade trop loin à droite.
Tu peux aussi ajouter "z-index: 100;" dans le même sélecteur CSS, histoire d'éviter que le div de survol ne passe "sous" tes éléments...

C'est probablement de la bidouille

mais ça marche... ^^

ps : ça fait des trucs chouettes, scriptaculous, hein ?

ps n°2, pour LeChomeur : Arg tu m'as devancé de deux minutes, et en plus avec une vraie solution... je vais me cacher quelque part, loin

**le_chomeur** · 26/01/2009, 13h39

lol mais non mais non reviens , j'ai donné un exemple , pour le parfaire , il faut effectivement que la div : mabulle soit en position absolute , l'afficher au mouseover et la masquer au mouseout ;-)

**Athane** · 26/01/2009, 14h20

Merci pour vos deux réponses.
La première solution a l'air bien "complexe" pour mon niveau mais je vais m'y intéresser de près car je pense qu'une fois que j'aurais pu l'intégrer ça marchera à merveille.

PS @ RomainVALERI : ta solution reste simple mais c'est celle que je privilégie en premier car plus facile à mettre en place avant de reprendre celle de le_chomeur

Quoi qu'il en soit, merci à vous deux pour vos aides et conseils.

Cordialement Athane

Confrontation Javascript XHTML CSS

JavaScript

Discussions similaires

Partager

Partager