Partage

[DHTML] Le script javascript ne fais aucun effet

Je pense à cause du nombre important d'imbrications...

27 juin 2006 à 22:17:03

Bonsoir tout les zér0s !

Me voici confronté à un nouveau problème mais pour un fois en DHTML... Un de mes script Javascript pour un menu style "Mac Dock" ne veut pas fonctionner (enfin ce n'est pas le mien) je pense à cause du nombre important d'imbrications dans la structuration de mon codage.

Voilà les codes:

xHTML + JS :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>
Nuty Services - Accueil
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="utils/css/start.css" rel="stylesheet" title="Nuty Design" type="text/css" media="screen, print" />
<meta name="title" content="Nuty Services" />
<meta name="description" content=
"Services web online, tutoriaux, scripts, applications serveur pour webmasters. Créations et solutions pour webmasters." />
<meta http-equiv="content-language" content="fr" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="7 days" />

<script language="JavaScript">
 plus d'icons qui réagissent

A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
IE = document.all ? 1 : 0 ;
img_tags = new Array();

function ouEstMaSouris(e)
{
var dock = document.getElementById('dock') ; // div qui contient la barre de menu.

var x = 0;
if (IE) x = e.clientX ; // coordonnées x de la souris sur IE 5.5
else x = e.pageX ; // coordonnées x de la souris sur Mozilla ou Netscape 7

x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.

img_tags = dock.getElementsByTagName('img') ; // les images contenus dans le div

for(i=0 ; i<img_tags.length ; i++) // pour chaque images
{
millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
delta = millieu - x ;

if (delta < 0) delta *= -1 ;

coef = A * delta + MAX ;

if (coef < MIN) coef = MIN ;
else if (coef > MAX) coef = MAX ;

img_tags[i].style.width=coef;
img_tags[i].style.height=coef;
}
}

//-->
</script>
</head>
<body>
<div id="back_start">
<div id="header">
<div id="header_gauche">
<p>
<a href="#">
<img src="images/banniere.gif" alt="" title="Retour à l'accueil" />
</a>
</p>
</div>
<div id="header_droite"></div>
</div>
</div>
<div id="back_speed">
<div id="speedbar">
<div id="speedbar_gauche"></div>
<div id="speedbar_droite"></div>
<p class="texte_speed_gauche">
Dimanche 25 Juin 2006 - 03:49
</p>
<p class="texte_speed_droite">
Vous pouvez vous connecter ou vous inscrire
</p>
</div>
</div>
<div id="corps">
<div id="corps_gauche">
<div id="corps_droite">
<div id="corps_contenu">
<div id="menu">
<p class="menu_haut">
<img src="images/menu_haut.png" alt="" />
</p>
<div class="block_menu_haut">
<h3>
Nuty Services <img src="images/fleche_titre_menu.png" alt="" class="fleche" />
</h3>
</div>
<div class="block_menu_contenu">
<ul>
<li>» <a href="#">Accueil</a></li>
<li>» <a href="#">Le projet</a></li>
</ul>
</div>
<div class="block_menu_bas"></div>
<div class="espace_menu"></div>
<div class="block_menu_haut">
<h3>
Deuxième menu <img src="images/fleche_titre_menu.png" alt="" class="fleche" />
</h3>
</div>
<div class="block_menu_contenu">
<ul>
<li>» <a href="#">Lien 1</a></li>
<li>» <a href="#">Lien 2</a></li>
</ul>
</div>
<div class="block_menu_bas"></div>
<p class="menu_bas">
<img src="images/menu_bas.png" />
</p>
</div>
<div id="page">
<div id="dockbarre">
<table cellpadding="0" cellspacing="0" border="0" style="padding: 0px; margin: 0px; height: 90px; margin: auto;">
<tr>
<td style="width: 13px; background-image: url('images/dockbarre_gauche.png');">
</td>
<td style="background-image: url('images/dockbarre_centre.png'); vertical-align: top;">
<div id="dock">
<img style="width: 40px; height: 40px;" src="../accueil.png" alt="" title="Aller à l'accueil" />  
<img style="width: 40px; height: 40px;" src="../services.png" alt="" title="Nos services" />  
<img style="width: 40px; height: 40px;" src="../projet.png" alt="" title="Le projet" />
</div>
</td>
<td style="width: 13px; background-image: url('images/dockbarre_droite.png');">
</td>
</tr>
</table>
</div>
<div id="titre_page">
<h2>
Accueil >> Bienvenue sur Nuty-Project !

<br />
Deuxième ligne si nécessaire.
</h2>
</div>
<p class="texte_page">
<span style="color: #C10606;">Lorem ipsum dolor sit amet consectetuer ipsum vestibulum In ac Ut. Egestas massa quis massa Quisque nulla eget ut sit leo hendrerit. Semper Duis Maecenas nunc sed ac Curabitur venenatis felis massa metus. Id lobortis convallis pede Vestibulum sem nascetur laoreet eu magna pretium. Ipsum felis Ut dolor magna Vestibulum felis.</span>
<br /><br />
<span style="color: #E90E94;">In orci leo tortor ac In dolor justo accumsan id condimentum. Facilisi leo porttitor sollicitudin Maecenas at nec Nullam Nam Curabitur nibh. Pellentesque Aenean Curabitur rutrum nibh nulla Quisque feugiat hendrerit wisi elit. Consequat at Vestibulum ante quis sit tortor neque congue non auctor. Sed id eget sed Nam pede purus ac justo in Duis. Fringilla Curabitur enim mus ligula orci at ipsum vitae.</span>
<br /><br />
<span style="color: #19962B;">Enim adipiscing urna eget a sit Cras Vestibulum magna et adipiscing. Interdum mi libero pellentesque eget Nam Curabitur magnis enim laoreet ut. Et nec et sed ac mattis Integer laoreet id adipiscing fringilla. Eget ut pede consequat quis justo sem sit neque nulla ante. Mauris accumsan tempus Nulla Nulla Aliquam in nibh.</span>
<br /><br />
<span style="color: #F4BF08;">Augue condimentum semper Curabitur lobortis tincidunt Nunc Curabitur convallis pretium tortor. Tempor Curabitur montes lobortis est Aliquam nec odio Phasellus ante Sed. Habitasse accumsan In eu aliquam dui id Vestibulum et ipsum tristique. Orci sodales Nam elit enim ultrices justo vitae pretium cursus felis. Sagittis habitant Ut Cras sagittis dictumst Curabitur ipsum pretium Lorem hac. Consequat.</span>
<br /><br />
<span style="color: #404040;">Lorem ipsum dolor sit amet consectetuer ipsum vestibulum In ac Ut. Egestas massa quis massa Quisque nulla eget ut sit leo hendrerit. Semper Duis Maecenas nunc sed ac Curabitur venenatis felis massa metus. Id lobortis convallis pede Vestibulum sem nascetur laoreet eu magna pretium. Ipsum felis Ut dolor magna Vestibulum felis.</span>
<br /><br />
<span style="color: #5881B3;">In orci leo tortor ac In dolor justo accumsan id condimentum. Facilisi leo porttitor sollicitudin Maecenas at nec Nullam Nam Curabitur nibh. Pellentesque Aenean Curabitur rutrum nibh nulla Quisque feugiat hendrerit wisi elit. Consequat at Vestibulum ante quis sit tortor neque congue non auctor. Sed id eget sed Nam pede purus ac justo in Duis. Fringilla Curabitur enim mus ligula orci at ipsum vitae.</span>
<br /><br />
<span style="color: #195196;">Et voici la belle page avec plein de Lorem qui se termine ! Eh oui déjà !<br />
Mais bon, on s’en tape c’est juste pour faire joli !

</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="speedbas">
<div id="speedbas_gauche"></div>
<div id="speedbas_droite"></div>
<div id="texte_speedbas_gauche">
<p>
<img src="images/logo_etat.png" alt="Etat" title="Etat du serveur" class="imgcentre" /> Etat serveur : <span class="etat_moyen">Inconnu</span>
</p>
</div>
<div id="texte_speedbas_droite">
<p>
<a href="#back_start">En haut</a> <img src="images/logo_haut.png" alt="Vers le haut" title="Retourner en début de page" class="imgcentre" />
</p>
</div>
</div>
<div id="footer">
<div id="footer_gauche"></div>
<div id="footer_droite"></div>
<p>
1 connectés dont 127.0.0.1 - Page éxécutée en 0.159572 secondes - 0 requête
<br /><br />
XHTLM 1.0 - CSS 2.0 - Fil RSS - PHP - MySQL - Hébergé chez Easygiga.ch - Design & codage par Baba0076<br />
Politique d'accésibilité - Mentions légales - Contact - Règlement - FAQ
<br /><br />
Copyright - Nuty Services 2006 - Site à la propriété de Baba0076 - Déclaré à la CNIL sous le n°1XXXXXX<br />
Toute reproduction du site même partielle est entièrement interdite sauf autorisation officielle du Webmaster.
<br /><br />
Site apparenant au réseau Easy Web en co-relation avec Pro-Grammeur et Nuty Services.
</p>
</div>
</body>
</html>

Comment faire pour que le script soit effectif ?
Pour mieux vous expliquer: quand je passe la souris sur les images contenues dans la <div aillant pour id "dock" elles doivent grossir comme la Barre dock de Mac OS... Mais là il ne se passe rien...

shuss

28 juin 2006 à 10:43:18

Euh ... c'est bien beau d'avoir une fonction JavaScript ... mais je n'est pas vu où est-ce que tu déclenches cette fonction o_O

Peut-être que j'ai mal regardé !

baba0076

28 juin 2006 à 13:14:20

Ah oui !

Attends, merci j'essai !

Bah ça ne marche toujours pas :
http://dark-eyed-dreams.com/Nuty%20Services/?design=ndbyg

...

Mais sur http://dark-eyed-dreams.com/Nuty%20Services/test.html ça fonctionne !

Anonyme

28 juin 2006 à 13:41:50

Citation : baba0076

Ah oui !
Attends, merci j'essai !

Bah ça ne marche toujours pas :
http://dark-eyed-dreams.com/Nuty%20Services/?design=ndbyg

...

Mais sur http://dark-eyed-dreams.com/Nuty%20Services/test.html ça fonctionne !

salut,

http://dark-eyed-dreams.com/NutyServices/?design=ndbyg

je vois parfaitement sous le navigateur ou je suis mais, http://dark-eyed-dreams.com/Nuty%20Services/?design=ndbyg Erreur 404
Peut etre un probleme de navigateur ? ...
++

baba0076

28 juin 2006 à 14:00:20

Non, tu dis n'importe quoi Tyrex11...
Sinon on a qu'a essayer quelque chose !
Je vous passe ma page sans la dock barre installée et la page du script que j'ai téléchargée et vous essayez de l'adapter ?

Voici les codes :

Ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>
Nuty Services - Accueil
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
// CSS by PJP

$design = $_GET['design'];

if($design == ndbyg)
{
$design = 'utils/css/ndbyg/design.css';
$nom = 'Nuty Design Blue Yellow Green';
}
else
{
$design = 'utils/css/ndbib/design.css';
$nom = 'Nuty Design Blue In Blue';
}

?>
<link href="<?php echo $design; ?>" rel="stylesheet" title="<?php echo $nom; ?>" type="text/css" media="screen, print" />
<meta name="title" content="Nuty Services" />
<meta name="description" content=
"Services web online, tutoriaux, scripts, applications serveur pour webmasters. Créations et solutions pour webmasters." />
<meta http-equiv="content-language" content="fr" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="7 days" />

<script language="JavaScript">
 plus d'icons qui réagissent

A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
IE = document.all ? 1 : 0 ;
img_tags = new Array();

function ouEstMaSouris(e)
{
var dock = document.getElementById('dock') ; // div qui contient la barre de menu.

var x = 0;
if (IE) x = e.clientX ; // coordonnées x de la souris sur IE 5.5
else x = e.pageX ; // coordonnées x de la souris sur Mozilla ou Netscape 7

x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.

img_tags = dock.getElementsByTagName('IMG') ; // les images contenus dans le div

for(i=0 ; i<img_tags.length ; i++) // pour chaque images
{
millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
delta = millieu - x ;

if (delta < 0) delta *= -1 ;

coef = A * delta + MAX ;

if (coef < MIN) coef = MIN ;
else if (coef > MAX) coef = MAX ;

img_tags[i].style.width=coef;
img_tags[i].style.height=coef;
}
}

//-->
</script>
</head>
<body>

<div id="back_start">
<div id="header">
<div id="header_gauche">
<p>
<a href="#">
<img src="images/banniere.gif" alt="" title="Retour à l'accueil" />
</a>
</p>
</div>
<div id="header_droite"></div>
</div>
</div>
<div id="back_speed">
<div id="speedbar">
<div id="speedbar_gauche"></div>
<div id="speedbar_droite"></div>
<p class="texte_speed_gauche">
Dimanche 25 Juin 2006 - 03:49
</p>
<p class="texte_speed_droite">
Vous pouvez vous connecter ou vous inscrire
</p>
</div>
</div>
<div id="corps">
<div id="corps_gauche">
<div id="corps_droite">
<div id="corps_contenu">
<div id="menu">
<?php
// CSS by PJP

$design = $_GET['design'];

if($design == ndbyg)
{
$do = '<div style="height: 10px;"></div>';
$do2 = '<div style="height: 11px;"></div>';
$fleche = '<img src="images/ndbyg/fleche_titre_menu.png" alt="" class="fleche" />';
}
else
{
$do = '<p class="menu_haut"><img src="images/menu_haut.png" alt="" /></p>';
$do2 = '<p class="menu_bas"><img src="images/menu_bas.png" alt="" /></p>';
$fleche = '<img src="images/fleche_titre_menu.png" alt="" class="fleche" />';
}

?>
<?php
echo $do;
?>
<div class="block_menu_haut">
<h3>
Nuty Services <?php echo $fleche; ?>
</h3>
</div>
<div class="block_menu_contenu">
<ul>
<li>» <a href="#">Accueil</a></li>
<li>» <a href="#">Nos services</a></li>
<li>» <a href="#">Le projet</a></li>
</ul>
</div>
<div class="block_menu_bas"></div>
<div class="espace_menu"></div>
<div class="block_menu_haut">
<h3>
Deuxième menu <?php echo $fleche; ?>
</h3>
</div>
<div class="block_menu_contenu">
<ul>
<li>» <a href="#">Lien 1</a></li>
<li>» <a href="#">Lien 2</a></li>
</ul>
</div>
<div class="block_menu_bas"></div>
<div class="espace_menu"></div>
<div class="block_menu_haut">
<h3>
Dernier menu <?php echo $fleche; ?>
</h3>
</div>
<div class="block_menu_contenu">
<ul>
<li>» <a href="#">Lien 3</a></li>
<li>» <a href="#">Lien 4</a></li>
</ul>
</div>
<div class="block_menu_bas"></div>
<?php
echo $do2;
?>
</div>
<div id="page">
<div id="dockbarre">
<table cellpadding="0" cellspacing="0" border="0" id="table_dock">
<tr>
<td id="td1_dock">
</td>
<td id="td2_dock">
<div id="dock" style="height: 80px;">
<img src="../accueil.png" alt="" title="Accueil" />  
<img src="../services.png" alt="" title="Services" />  
<img src="../projet.png" alt="" title="Projet" />
</div>
</td>
<td id="td3_dock">
</td>
</tr>
</table>
</div>
<div id="titre_page">
<h2>
Accueil >> Bienvenue sur Nuty-Project !

</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="speedbas">
<?php
// CSS by PHP

$design = $_GET['design'];

if($design=="ndbyg")
{
$do = '';
$do2 = '';
}
else
{
$do = '<img src="images/logo_etat.png" alt="Etat" title="Etat du serveur" class="imgcentre" /> ';
$do2 = ' <img src="images/logo_haut.png" alt="Vers le haut" title="Retourner en début de page" class="imgcentre" />';
}

?>
<div id="speedbas_gauche"></div>
<div id="speedbas_droite"></div>
<div id="texte_speedbas_gauche">
<p>
<?php
echo $do;
?>
Etat serveur : <span class="etat_moyen">Inconnu</span>
</p>
</div>
<div id="texte_speedbas_droite">
<p>
<a href="#back_start">En haut</a>
<?php
echo $do2;
?>
</p>
</div>
</div>
<div id="footer">
<div id="footer_gauche"></div>
<div id="footer_droite"></div>
<p>
1 connectés dont 127.0.0.1 - Page éxécutée en 0.159572 secondes - 0 requête
</p>
<div class="saut_footer"></div>
<p>
XHTLM 1.0 - CSS 2.0 - Fil RSS - PHP - MySQL - Hébergé chez Easygiga.ch - Design & codage par Baba0076<br />
Politique d'accésibilité - Mentions légales - Contact - Règlement - FAQ
</p>
<div class="saut_footer"></div>
<p>
Copyright - Nuty Services 2006 - Site à la propriété de Baba0076 - Déclaré à la CNIL sous le n°1XXXXXX<br />
Toute reproduction du site même partielle est entièrement interdite sauf autorisation officielle du Webmaster.
</p>
<div class="saut_footer"></div>
<p>
Site apparenant au réseau Easy Web en co-relation avec Pro-Grammeur et Nuty Services.
</p>
</div>
</body>
</html>

Page du script :

<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<SCRIPT LANGUAGE="JavaScript">
 plus d'icons qui réagissent

A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
IE = document.all ? 1 : 0 ;
img_tags = new Array();

function ouEstMaSouris(e)
{
var dock = document.getElementById('dock') ; // div qui contient la barre de menu.

var x = 0;
if (IE) x = e.clientX ; // coordonnées x de la souris sur IE 5.5
else x = e.pageX ; // coordonnées x de la souris sur Mozilla ou Netscape 7

x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.

img_tags = dock.getElementsByTagName('img') ; // les images contenus dans le div

for(i=0 ; i<img_tags.length ; i++) // pour chaque images
{
millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
delta = millieu - x ;

if (delta < 0) delta *= -1 ;

coef = A * delta + MAX ;

if (coef < MIN) coef = MIN ;
else if (coef > MAX) coef = MAX ;

img_tags[i].style.width=coef;
img_tags[i].style.height=coef;
}
}

//-->
</SCRIPT>

</HEAD>

<BODY>



<div style="position:fixed;top=10;left:10;" id="dock" onmousemove="ouEstMaSouris(event)">


<A HREF="#" title="Firefox"><IMG SRC="firefox.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Thunderbird"><IMG SRC="thunderbird.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="MySQL Manager"><IMG SRC="mysqlmanager.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Paintshop pro 8"><IMG SRC="psp8.png" style="width:33;height:33;" BORDER="0" align="top"></A>

<A HREF="#" title="Object Media"><IMG SRC="objectmedia.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Settings"><IMG SRC="settings.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Skin studio"><IMG SRC="skinstudio.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Stardock central"><IMG SRC="stardock central.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Theme manager"><IMG SRC="theme manager.png" style="width:33;height:33;" BORDER="0" align="top"></A>

</div>


<BR><BR>
<pre>
e
eeeee

e
e
e
d
f
f
f
f
e
e
e
e
cf
f
gf

g
g
g

s

a

f

g

h
jjj
e
e
d
d
f
f
f
f
e
e
e
e
cf
f
gf

g
g
g

s

a

f

g

h
jjj
e
e
d
d
f
f
f
f
e
e
e
e
cf
f
gf

g
g
g

s

a

f

g

h
jjj
e
e
d
d
f
f
f
f
e
e
e
e
cf
f
gf

g
g
g

s

a

f

g

h
jjj
</pre>
</BODY>
</HTML>

Ne vous occupez pas du PHP ou du codage !

@+ et merci par avance !