Bonjour à tous,
Je rencontre un problème avec un code javascript qui me permet d'ouvrir une petite fenêtre en guise de sous menu.
Je m'explique:
J'ai crée ma page xhtml et tout se passait très bien à l'affichage sur IE et Firefox mais lorsque j'ai rajouté les méta-tags pour terminer cette page,mon code javascript (pour le sous menu) ne fonctionnait plus sous Firefox alors qu'avant tout était parfait.
Je ne comprends pas d'où peut venir cette erreur ,alors si une âme charitable pouvait m'aider,ce serait sympa car je m'y perd d'autant que je n'y comprends rien en Javascript.
Je ne sais pas si le problème provient des méta-tags que j'ai rajouté car c'est le seul élément que j'ai modifié avant de voir ce problème surgir !
voici l'adresse de la page:
http://nickelback.freezee.org/site.htm
voici la page xhtml:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Accueil</title>
<META NAME="description" CONTENT="Tout savoir sur le groupe rock canadien Nickelback.C'est un quatuor composé de Chad Kroeger (chant,guitare),Mike Kroeger (basse),Ryan Peake (guitare,chant) et Ryan Vikedal (batterie).">
<META NAME="keywords" CONTENT="Nickelback,nickelback,chad kroeger,mike kroeger,ryan peake,ryan vikedal,daniel adair,biographie,photos,wallpapers,avatars,vidéos,audios,paroles,traductions,partitions,carte de fans,fanlisting,forum,tournée,discographie,the long road,silver side up,the state,curb,hesher,someday,hero,how you remind me,leader of men,breathe,never again,date de concerts">
<META NAME="dc.keywords" CONTENT="Nickelback,nickelback,chad kroeger,mike kroeger,ryan peake,ryan vikedal,daniel adair,biographie,photos,wallpapers,avatars,vidéos,audios,paroles,traductions,partitions,carte de fans,fanlisting,forum,tournée,discographie,the long road,silver side up,the state,curb,hesher,someday,hero,how you remind me,leader of men,breathe,never again,date de concerts">
<META NAME="subject" CONTENT="Site consacré au groupe canadien Nickelback">
<META NAME="author" CONTENT="Silversky">
<META NAME="copyright" CONTENT="©Silversky">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="identifier-url" CONTENT="http://nickelback.freezee.org">
<META NAME="reply-to" CONTENT="silversky_1@msn.com">
<META NAME="Robots" CONTENT="index, follow">
<META NAME="Rating" CONTENT="General">
<META NAME="Category" CONTENT="Musique rock">
<META NAME="Page-topic" CONTENT="Homepage">
<META NAME="Generator" CONTENT="notepad">
<META http-equiv="Content-Language" CONTENT="fr">
<META http-equiv="Content-type" CONTENT="text/html;charset=iso-8859-1">
<META NAME="location" CONTENT="France, FRANCE">
<META NAME="expires" CONTENT="never">
<META NAME="Date-Creation-yyyymmdd" CONTENT="20050510">
<META NAME="date-revision-yyyymmdd" CONTENT="20050510">
<META NAME="Distribution" CONTENT="Global">
<META NAME="Audience" CONTENT="General">
<META http-equiv="Content-Script-Type" CONTENT="text/javascript">
<META http-equiv="Content-Style-Type" CONTENT="text/ccs">
<link rel="stylesheet"media="screen"type="text/css"title="Accueil"href="site.css">
<meta http-equiv="Page-Exit" content="revealTrans(duration=2,transition=14)">
<!-- DEBUT DU SCRIPT -->
<!-- Script provenant de http://www.toulouse-renaissance.net -->
<style type="text/css">
.navtext {
width:235px;
font-size:8pt;
font-family:verdana;
border-width:2px;
border-style:outset;
border-color:white;
layer-background-color:black;
background-image:url("images/blue.jpg");
color:black;
}
</style>
<!-- FIN DU SCRIPT -->
<script src="alttxt.js" type="text/javascript"></script>
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<div id="en_tete2">
</div>
<div id="en_tete3">
<p class="liens_haut">
<a href="siteangl.htm"><img src="images/english.jpg"alt="english"title="English Version"class="english"/></a>
<a href="site.htm">Accueil ~</a>
<a href="News.htm">News ~</a>
<a href="Contact.htm">Contact ~</a>
<a href="Liens.htm">Liens ~</a>
<a href="http://www.maxiservices.net/livre/livre-17433-0.html">Guestbook ~</a>
<a href="http://nickelback-belgium.forumactif.com">Forum</a>
<a href="site.htm"><img src="images/french.jpg"alt="french"title="French Version"class="french"/></a>
</p>
</div>
<div id="en_tete4">
</div>
<!-- Les menus -->
<!--ds le code java pour le menu des membres,le nom des pages html doit être en un seul morceau ChadKroeger.htm et non Chad Kroeger.htm-->
<div id="menu">
<div class="element_menu">
<ul>
<li><a
onmouseover="writetxt('<a href=ChadKroeger.htm>Chad Kroeger</a><br><a href=MikeKroeger.htm>Mike Kroeger</a><br><a href=RyanPeake.htm>Ryan Peake</a><br><a href=RyanVikedal.htm>Ryan Vikedal</a><br><a href=DanielAdair.htm>Daniel Adair (New)</a>');"
onmouseout="writetxt(0)" href="javascript:void(0)">Les membres</a>
</li>
<li><a href="Biographie.htm">Biographie</a></li>
<li><a href="Albums.htm">Albums</a></li>
<li><a href="Singles.htm">Singles</a></li>
<li><a href="Partitions.htm">Partitions</a></li>
<li><a href="DVD.htm">DVD</a></li>
<li><a href="Autres.htm">Autres</a></li>
<li><a
onmouseover="writetxt('<a href=albums/index.html>Photos diverses</a><br><a href=Wallpapers/index.html>Wallpapers divers</a><br><a href=Wallpaperssilversky.htm>Wallpapers personnels</a><br><a href=Avatars/index.html>Avatars</a><br><a href=Maison.htm>La maison de Chad</a>');"
onmouseout="writetxt(0)" href="javascript:void(0)">Galerie</a></li>
<li><a href="Tour.htm">Tour</a></li>
<li><a href="Audios.htm">Audios et vidéos</a></li>
<li><a
onmouseover="writetxt('<a href=Articles.htm>Articles de presse</a><br><a href=Interview.htm>Interviews</a><br>');"
onmouseout="writetxt(0)" href="javascript:void(0)">Média</a></li>
<li><a
onmouseover="writetxt('<a href=Carteindex.htm>Carte de fans</a><br><a href=Sondage.htm>Sondage</a><br><a href=Quizz.htm>Quizz</a><br><a href=Puzzle.htm>Puzzles</a><br><a href=Banniere.htm>Bannières</a><br><a href=Bouton.htm>Boutons</a><br><a href=http://www.ecarteweb.com/carte/selection.php?n=7750&nc=AFbvaoZrK05M6>E-card</a><br><');"
onmouseout="writetxt(0)" href="javascript:void(0)">Fanzone</a></li>
</ul>
<img src="images/guitare3.jpg"alt="guitare"title="guitare"class="guitare"/>
</div>
</div>
<!-- Le corps -->
<div id="corps">
<object
type="application/x-shockwave-flash" data="Movie1.swf"
class="flash">
<param name="movie" value="Movie1.swf"/>
</object>
<br/><br/><br/>
</div>
<!-- Le pied de page -->
<div id="pied_de_page">
</div>
<div id="pied_de_page2">
<p class="fin">Tous les documents du site sont la propriété exclusive de Nickelback ou de leurs créateurs .
</p>
</div>
<!-- DEBUT DU SCRIPT -->
<div id="navtxt" class="navtext" style="visibility:hidden; position:absolute; top:0px; left:-400px; z-index:10000; padding:10px"></div>
<!-- FIN DU SCRIPT -->
</body>
</html>
Ma page css:
body
{
width:760px;
margin:auto;
background-color:black;
}
/* L'en-tête */
#en_tete
{
width:760px;
height:169px;
background-image:url("images/header.jpg");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}
#en_tete2
{
width:760px;
height:92px;
background-image:url("images/milieu.jpg");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}
#en_tete3
{
width:760px;
height:34px;
background-image:url("images/menuhaut.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
}
#en_tete4
{
width:760px;
height:17px;
background-image:url("images/haut.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}
.lien
{
margin:0px;
padding:0px;
padding-left:220px;
padding-top:5px;
}
/* Le menu */
#menu
{
float:left;
width:120px;
margin:0px;
padding:0px;
}
.element_menu
{
background-image:url("images/fondmenu.gif");
width:154px;
height:768px;
margin:0px;
padding:0px;
}
.liens_haut
{
text-align:center;
margin:0px;
padding:0px;
padding-top:5px;
}
.guitare
{
margin:0px;
padding:0px;
margin-top:30px;
margin-left:30px;
}
/* Quelques effets sur les menus */
a
{
text-decoration:none;
color:white;
font-family:verdana,"Arial Black",Arial,"Comic Sans MS","Trebuchet MS",Serif;
font-size:11px;
}
a:hover
{
text-decoration:none;
color:#6666CC;
font-family:verdana,"Arial Black",Arial,"Comic Sans MS","Trebuchet MS",Serif;
font-size:11px;
}
.element_menu ul
{
list-style-type:none;
padding:10px;
padding-left:40px;
margin:0px;
}
/* Le corps de la page */
#corps
{
margin-left:154px;
color:white;
background-image:url("images/fondsite.gif");
background-repeat:repeat-y;
font-size:14px;
font-family:"Comic Sans Ms",Arial, "Arial Black", "Times New Roman", Times, serif;
}
.flash
{
margin-left:10px;
margin-top:30px;
width:551px;
height:700px;
}
#corps h4
{
color:#6666CC;
text-decoration:underline;
margin:0px;
padding-top:10px;
text-align:center;
font-family:"Comic Sans Ms",Arial, "Arial Black", "Times New Roman", Times, serif;
}
.
#corps p
{
padding-left:30px;
padding-right:50px;
text-align:justify;
}
.lettre:first-letter
{
font-weight:bold;
font-size:1.5em;
}
#pied_de_page
{
width:760px;
height:30px;
background-image:url("images/tampon.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}
#pied_de_page2
{
width:760px;
height:50px;
background-image:url("images/footer.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
}
.english
{
position:absolute;
top:269px;
left:150px;
border:none;
}
.french
{
position:absolute;
top:269px;
left:745px;
border:none;
}
.fin
{
margin:0px;
padding:0px;
padding-left:80px;
padding-top:15px;
margin:0px;
color:white;
font-family:verdana,"Arial Black",Arial,"Comic Sans MS","Trebuchet MS",Serif;
font-size:12px;
}
Le fameux code javascript:
<!-- DEBUT DU SCRIPT -->
<!-- Script provenant de http://www.toulouse-renaissance.net -->
/**************************************
ALTTXT V1.6
BY: BRIAN GOSSELIN OF SCRIPTASYLUM.COM
***************************************/
var dofade=true; // COMMUTATION DE L'EFFET DE FONDU (POUR IE4+ AND NS6 SEULEMENT)
var centertext=false; // CENTRE LE TEXTE DANS LA BOITE. NE PAS LE MODIFIER DANS "STYLE" A CAUSE DE NS4.
// AUTREMENT LE TEXTE EST JUSTIFIE A GAUCHE.
var xoffset=-250; // NOMBRE DE PIXELS HORIZONTAUX A PARTIR DU CURSEUR
var yoffset=20; // NOMBRE DE PIXELS VERTICAUX A PARTIR DU CURSEUR
var mousefollow=false; // PERMET A LA BOITE DE SUIVRE LE CURSEUR SI " true "SET TO false TO
// METTRE " false " POUR BLOQUER LA BOITE LA OU ELLE APPARAIT INITIALEMENT.
var hideDelay=2000; // DELAIS EN MILLISECONDES ( 1 SECONDE = 1000 MILLISECONDES) ENTRE LE MOMENT OU LE CURSEUR DE LA SOURIS QUITTE LE LIEN
// ET LE MOMENT OU LA BOITE DISPARAIT, SEULEMENT LORSQUE "mousefollow" EST COMMUTE SUR "false".
// CE QUI DONNE LE TEMPS A L'UTILISATEUR DE CLIQUER SUR UN LIEN DANS LA BOITE.
////////////////////////////// NE RIEN EDITER EN DESSOUS DE CETTE LIGNE /////////////////////////////
function altProps(){
this.w3c=(document.getElementById)?true:false;
this.ns4=(document.layers)?true:false;
this.ie4=(document.all && !this.w3c)?true:false;
this.ie5=(document.all && this.w3c)?true:false;
this.ns6=(this.w3c && navigator.appName.indexOf("Netscape")>=0 )?true:false;
this.w_y=0;
this.w_x=0;
this.navtxt=null;
this.boxheight=0;
this.boxwidth=0;
this.ishover=false;
this.ieop=0;
this.op_id=0;
this.oktomove=false;
this.dy=0;
}
var AT=new altProps();
function toggle_centertext(){
centertext=!centertext;
}
function toggle_mousefollow(){
mousefollow=!mousefollow;
}
function toggle_dofade(){
dofade=!dofade;
if(!dofade)AT.ieop=100;
}
function getwindowdims(){
AT.w_y=(AT.ie5||AT.ie4)?document.body.clientHeight:window.innerHeight;
AT.w_x=(AT.ie5||AT.ie4)?document.body.clientWidth:window.innerWidth;
}
function getboxwidth(){
if(AT.ns4)AT.boxwidth=(AT.navtxt.document.width)? AT.navtxt.document.width : AT.navtxt.clip.width;
else if(AT.ie4)AT.boxwidth=(AT.navtxt.style.pixelWidth)? AT.navtxt.style.pixelWidth : AT.navtxt.offsetWidth;
else AT.boxwidth=(AT.navtxt.style.width)? parseInt(AT.navtxt.style.width) : parseInt(AT.navtxt.offsetWidth);
}
function getboxheight(){
if(AT.ns4)AT.boxheight=(AT.navtxt.document.height)? AT.navtxt.document.height : AT.navtxt.clip.height;
else if(AT.ie4)AT.boxheight=(AT.navtxt.style.pixelHeight)? AT.navtxt.style.pixelHeight : AT.navtxt.offsetHeight;
else AT.boxheight=parseInt(AT.navtxt.offsetHeight);
}
function movenavtxt(x,y){
if(AT.ns4)AT.navtxt.moveTo(x,y);
else{
AT.navtxt.style.left=x+'px';
AT.navtxt.style.top=y+'px';
}}
function getpagescrolly(){
if(AT.ie5||AT.ie4)return document.body.scrollTop;
else return window.pageYOffset;
}
function getpagescrollx(){
if(AT.ie5||AT.ie4)return document.body.scrollLeft;
else return window.pageXOffset;
}
function writeindiv(text){
if(AT.ns4){
AT.navtxt.document.open();
AT.navtxt.document.write(text);
AT.navtxt.document.close();
}
else AT.navtxt.innerHTML=text;
}
function writetxt(text){
if(dofade && (AT.ie4||AT.w3c))clearInterval(AT.op_id);
if(text!=0){
if(!mousefollow)clearTimeout(AT.dy);
AT.oktomove=true;
AT.ishover=true;
if(AT.ns4)text='<div class="navtext">'+((centertext)?'<center>':'')+text+((centertext)?'</center>':'')+'</div>';
if(AT.w3c||AT.ie4)AT.navtxt.style.textAlign=(centertext)?"center":"left";
writeindiv(text);
if(AT.ns4)AT.navtxt.visibility="show";
else{
AT.navtxt.style.visibility="visible";
AT.navtxt.style.display="block";
}
getboxheight();
if((AT.w3c||AT.ie4) && dofade){
if(AT.ie4||AT.ie5)AT.navtxt.style.filter="alpha(opacity=0)";
if(AT.ns6)AT.navtxt.style.MozOpacity=0;
AT.ieop=0;
AT.op_id=setInterval('incropacity()',50);
}}else{
if(mousefollow)hideAlttxt();
else AT.dy=setTimeout('hideAlttxt()',hideDelay);
}}
function hideAlttxt(){
if(AT.ns4)AT.navtxt.visibility="hide";
else{
AT.navtxt.style.display="none";
AT.navtxt.style.visibility="hidden";
}
movenavtxt(-AT.boxwidth-10,0);
writeindiv('');
}
function incropacity(){
if(AT.ieop<=100){
AT.ieop+=7;
if(AT.ie4||AT.ie5)AT.navtxt.style.filter="alpha(opacity="+AT.ieop+")";
if(AT.ns6)AT.navtxt.style.MozOpacity=AT.ieop/100;
}else clearInterval(AT.op_id);
}
function moveobj(evt){
mx=(AT.ie5||AT.ie4)?event.clientX:evt.pageX;
my=(AT.ie5||AT.ie4)?event.clientY:evt.pageY;
if(AT.ishover && AT.oktomove){
margin=(AT.ie4||AT.ie5)?5:25;
if(AT.ns6)if(document.height+27-window.innerHeight<0)margin=15;
if(AT.ns4)if(document.height-window.innerHeight<0)margin=10;
if(AT.ns4||AT.ns6)mx-=getpagescrollx();
if(AT.ns4)my-=getpagescrolly();
xoff=mx+xoffset;
yoff=(my+AT.boxheight+yoffset-((AT.ns6)?getpagescrolly():0)>=AT.w_y)? -5-AT.boxheight-yoffset: yoffset;
movenavtxt( Math.min(AT.w_x-AT.boxwidth-margin , Math.max(2,xoff))+getpagescrollx(), my+yoff+((!AT.ns6)?getpagescrolly():0));
if(!mousefollow)AT.oktomove=false;
}}
window.onload=function(){
AT.navtxt=(AT.ns4)?document.layers['navtxt']AT.ie4)?document.all['navtxt']AT.w3c)?document.getElementById('navtxt'):null;
getboxwidth();
getboxheight();
getwindowdims();
if(AT.ie4||AT.ie5&&dofade)AT.navtxt.style.filter="alpha(opacity=100)";
AT.navtxt.onmouseover=function(){
if(!mousefollow)clearTimeout(AT.dy);
}
AT.navtxt.onmouseout=function(){
if(!mousefollow)AT.dy=setTimeout('hideAlttxt()',hideDelay);
}
if(AT.ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moveobj;
window.onresize=getwindowdims;
}<!-- FIN DU SCRIPT -->
Merci pour votre aide
Partager