probleme fonction mouseover

Version imprimable

Bonjour a tous,

J'ai crée un menu, avec 2 images: 1 etat normal, et une qui s'affiche lorsqu' il y a mouseover et lorsqu'il y a selection.

Mon problème est que les boutons restes sur l'etat mouseover meme si je clique sur une autre sous catégorie

voici les differente partie de code:

generation du menu:

Code:

1
2
3
4
5
6
7
8
9
10
 
function showbureauSubmenu($lSub) 
    { 
        if($lSub == 0) 
        { 
            $lSub = 1;     
        } 
 
        $sub = '<table width="576" border="0" cellspacing="0" cellpadding="0" height="27" style="margin-bottom:10px"> 
                    <tr height="27" style="background-image:url(./media/imgs/nav/bureau_back.jpg)">';

sous menu1:

Code:

1
2
3
4
5
6
7
 
$sub .= '<td width="78" height="27"> 
<td class="submenu" ' . ($lSub  != 1 ?'style="background-image:url 
(./media/imgs/nav/bureau_back_rol.jpg); text- 
align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'"  
onmouseout="this.style.background=this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . '  
onclick="document.location=\'bureaux\'" ><nobr>1-BUREAUX</nobr></td>

sous menu2:

Code:

1
2
3
4
5
6
7
 
<td width="82" height="27"><td class="submenu" ' . ($lSub  != 
 2 ?'style="background-image:url(./media/imgs/nav/bureau_back_rol.jpg); text-align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'"  
onmouseout="this.style.background=this.style.background=\'url 
(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . '  
onclick="document.location=\'caissons_pour_bureau\'" ><nobr>1- 
CAISSONS</nobr></td>

merci pour vos réponses

12/02/2007, 15h41
E.Bzz

Bonjour,

Code:

onmouseout="this.style.background=this.style.background=\'url

Y a bégaiement, là, non ?

A+
12/02/2007, 15h47
maximew

en effet lol...

c'est corrigé...mais ca ne marche toujours pas...

en fait quand je clique sous la sous categorie

la sous categorie1 s'affiche sur l'etat normal, et les autres s'affiche direct sur l'etat mouseover

et si je clique sur la sous categorie 2, la sous categorie 1 ne revient pas a l'etat normal
12/02/2007, 16h17
E.Bzz

Visiblement, c'est que sous IE, parce que avec Firefox, ça donne ce que tu veux ...
Le menu "Manutention" a l'aire de fonctionner correctement : pourquoi tu reportes pas le code pour les autres ?

A+
12/02/2007, 16h20
maximew

En fait je suis en train de le reprog, car manutention par exemple n'est pas optimisé pour l'url rewriting, et donc je dois changer ma source

et j'ai verifié la catégorie bureau ne marche pas non plus sur firefox....
12/02/2007, 16h33
E.Bzz

Citation:

Envoyé par maximew

et j'ai verifié la catégorie bureau ne marche pas non plus sur firefox....

Je maintiens :)
Quand j'arrive sur l'url ci-dessus, sous Firefox, le roll-over fonctionne mais uniquement sur "1-Bureaux".

Code:

onmouseover="this.style.background='url(./media/imgs/nav/bureau_back_rol.jpg)'" onmouseout="this.style.background='url(./media/imgs/nav/bureau_back.jpg)'"

Normal : les onmouseover/onmouseout ne sont pas gérés sur les autres lignes ...

A+
12/02/2007, 16h39
maximew

On avance lol...

en effet il y avait un problème sur l'affichage, reste encore un problème

si je clique sur l'une des sous catégorie toutes passe en mouseover et n'en change plus....

je vous redonne le code telqu'il est actuellement:

Code:

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
function showbureauSubmenu($lSub)
    {
    	if($lSub == 0)
        {
            $lSub = 1;	
        }
 
    	$sub = '<table width="576" border="0" cellspacing="0" 
cellpadding="0" height="27" style="margin-bottom:10px">
                    <tr height="27" style="background-image:url
(./media/imgs/nav/bureau_back.jpg)">
 
					<td width="78" 
height="27"><td class="submenu" ' . ($lSub  != 1 ?'style="background-image:url(./media/imgs/nav/bureau_back_rol.jpg); text-
align:center"' : 'onmouseover="this.style.background=\'url
(./media/imgs/nav/bureau_back_rol.jpg)\'" 
onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)
\'" style="text-align:center"' ) . ' onclick="document.location=\'bureaux\'" ><nobr>1-BUREAUX</nobr></td>
 
                        <td style="width:1px; font-size:1px; 
background:#ffffff">&nbsp;</td>
 
 
                        <td width="82" height="27"><td class="submenu" ' . 
($lSub  != 1 ?'style="background-image:url
(./media/imgs/nav/bureau_back_rol.jpg); text-align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'" onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . ' 
onclick="document.location=\'caissons_pour_bureau\'" ><nobr>2-CAISSONS</nobr></td>

12/02/2007, 16h59
E.Bzz

Citation:

Envoyé par maximew

si je clique sur l'une des sous catégorie toutes passe en mouseover et n'en change plus....

Hum ....
Ben là, tu changes de page :mrgreen:
Et dans la page "Bureau", y a pas de onmouseover/onmouseout pour les roll-over du menu !
:sm:
:mouarf2:

A+

:( c'est bien ce que je pensé....

tu as une idée du code a rajouter pour que ca fonctionne?

si ca peut aider voila le code pour les page manutention et autre en dynamique:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function generateCatalogSubMenu($sPage, $sSub)
    {
        $aItems = CATALOG :: getCategorysList(DISPLAY :: getCatalog($sPage));
 
        if((int)Display :: getCatalog($sPage) > 0)
        {
            $sub = '<table width="576" border="0" cellspacing="0" cellpadding="0" height="27" style="margin-bottom:10px">
                    <tr height="27" style="background-image:url(./media/imgs/nav/'. $sPage .'_back.jpg)">';
 
            $lI = 0; 
            if($aItems)
            foreach($aItems as $aCategory)
            {
                $lI++;
                $sub .= '<td class="submenu" ' . (($sSub == $aCategory['id'] || ($lI == 1 && $sSub == 0) ) ? 'style="background-image:url(./media/imgs/nav/'. $sPage .'_back_rol.jpg); text-align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/'. $sPage .'_back_rol.jpg)\'" onmouseout="this.style.background=this.style.background=\'url(./media/imgs/nav/'. $sPage .'_back.jpg)\'" style="text-align:center"' ) . ' onclick="document.location=\'index.php?page=' . $sPage . '&amp;sub=' . $aCategory['id'] . '\'" ><nobr>' . $aCategory['name'] . '</nobr></td>
                         <td style="width:1px; font-size:1px; background:#ffffff">&nbsp;</td>';

12/02/2007, 17h18
E.Bzz

Citation:

Envoyé par maximew

tu as une idée du code a rajouter pour que ca fonctionne?

A priori, tu peux refaire le même copié/collé que tu viens de faire à partir de "1-Bureau" sur les autres lignes : le pb est strictement le même.
Mais tu devrais peut-être trouver un moyen de réutiliser le même menu dans toutes tes pages (via un include, par ex), plutôt que de te retapper tout ton site à chaque modif ;)

A+
12/02/2007, 17h24
maximew

Normalement ca ne changera plus trop par la suite, et c'est plus evidant comme ca pour l'url rewriting,

par contre la je bloque...car j'ai remis le meme code sur bureau, caisson...mais ca reste toujours bloqué sur le mouseover....:cry:
12/02/2007, 17h35
E.Bzz

Sur la page sur laquel on arrive (Mobilier Bureau) :

Code:

<td width="78" height="27"><td class="submenu" onmouseover="this.style.background='url(./media/imgs/nav/bureau_back_rol.jpg)'" onmouseout="this.style.background='url(./media/imgs/nav/bureau_back.jpg)'" style="text-align:center" onclick="document.location='bureaux'" ><nobr>1-BUREAUX</nobr></td>

Sur la page "Caissons" :

Code:

<td width="78" height="27"><td class="submenu" style="background-image:url(./media/imgs/nav/bureau_back_rol.jpg); text-align:center" onclick="document.location='bureaux'" ><nobr>1-BUREAUX</nobr></td>

1) Pas de onmouseover/onmouseout => pas de rollover
2) ton image de départ est celle du roll-over (bureau_back_rol.jpg)

C'est que du copié/collé ==> au taff' ;)

A+

la je pense que j'y suis presque...

mais c'est pas encore ca

pour mobilier j'ai mis ce code:

Code:

1
2
3
4
5
6
7
<td width="78" height="27"><td class="submenu" ' . ($lSub  != 
1 ?'onmouseover="this.style.background=\'url
(./media/imgs/nav/bureau_back_rol.jpg)\'" 
onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg);
 text-align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'" 
onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . ' onclick="document.location=\'bureaux\'" 
><nobr>1-BUREAUX</nobr></td>

12/02/2007, 17h50
E.Bzz

Sur la génération, je peux pas t'aider, mais visiblement tu traites différemment le 1° sous-menu dans les différents cas (ex : manutention, vestiaires etc.), à part pour Mobilier ...
Ca semble être le dernier pb à corriger :P

A+

en fait ca marche pas ca genere un bug....

je te redonne une derniere fois le code complet, en tout cas merci pour ce que tu as deja fait...

Code:

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
function showbureauSubmenu($lSub)
 
    {
    	if($lSub == 0)
 
        {
            $lSub = 1;	
        }
 
    	$sub = '<table width="576" border="0" cellspacing="0" 
cellpadding="0" height="27" style="margin-bottom:10px">
                    <tr height="27" style="background-image:url(./media/imgs/nav/bureau_back.jpg)">
 
 
					<td width="78" height="27"><td class="submenu" ' . ($lSub  != 1 ?'style="background-image:url(./media/imgs/nav/bureau_back_rol.jpg); text-align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'" onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . ' onclick="document.location=\'bureaux\'" ><nobr>1-BUREAUX</nobr></td>
 
 
                        <td style="width:1px; font-size:1px; 
background:#ffffff">&nbsp;</td>
 
 
                        <td width="82" height="27"><td class="submenu" ' . ($lSub  != 1 ?'style="background-image:url
(./media/imgs/nav/bureau_back_rol.jpg); text-
align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'" 
onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . ' 
onclick="document.location=\'caissons_pour_bureau\'" ><nobr>2-CAISSONS</nobr></td>
 
 
                        <td style="width:1px; font-size:1px; background:#ffffff">&nbsp;</td>
 
                        <td width="85" height="27"><td class="submenu" ' . ($lSub  != 1 ?'style="background-image:url
(./media/imgs/nav/bureau_back_rol.jpg); text-align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'"
 onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . ' onclick="document.location=\'armoires\'" ><nobr>3-ARMOIRES</nobr></td>
 
						<td style="width:1px; font-size:1px; background:#ffffff">&nbsp;</td>
 
 
                        <td width="147" height="27"><td class="submenu" ' . ($lSub  != 1 ?'style="background-image:url(./media/imgs/nav/bureau_back_rol.jpg); text-align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'" onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . ' onclick="document.location=\'fauteuils\'" ><nobr>4-SIEGES ET FAUTEUILS</nobr></td>
 
						<td style="width:1px; font-size:1px; background:#ffffff">&nbsp;</td>
 
 
                        <td width="103" height="27"><td class="submenu" ' . ($lSub  != 1 ?'style="background-image:url(./media/imgs/nav/bureau_back_rol.jpg); text-
align:center"' : 'onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'" onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' ) . ' onclick="document.location=\'accessoires_bureaux\'" ><nobr>5-ACCESSOIRES</nobr></td>
 
                        <td style="width:1px; font-size:1px; 
background:#ffffff">&nbsp;</td> ';
 
 
 
 
        return $sub;

merci

12/02/2007, 18h03
E.Bzz

Citation:

Envoyé par maximew

en fait ca marche pas ca genere un bug....

Ben comment c'est possible que ça fonctionne sur une page et pas les autres ?
Alors que la structure est la même ?

Bon courage, en tous cas ...

A+
13/02/2007, 09h42
maximew

Il parait que la nuit porte conseille et c'est vrai!!!!

j'ai reussi ca marche enfin!!!!!:king: :king: :king: :king: :king: :king:
13/02/2007, 09h59
E.Bzz

C'est rassurant :mrgreen:
Mais ce qui aurait été intéressant, c'est de savoir pourquoi ça ne marchait pas hier ...

A+

en fait, il fallait doubler la fonction mouseover, pour que quant on arrive sur la sous categorie elle fonctionne encore, donc voila l'ancien et le vieux code pour 1 seule sous catégorie ( ca suffit pour comprendre je pense)

ancien code:

Code:

1
2
3
4
5
6
7
<td height="27"><td class="submenu" ' . ($lSub  != 
1 ?'style="background-image:url(./media/imgs/nav/bureau_back_rol.jpg); text-
align:center"' : 'onmouseover="this.style.background=\'url
(./media/imgs/nav/bureau_back_rol.jpg)\'" 
onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)
\'" style="text-align:center"' ) . ' onclick="document.location=\'bureaux\'" 
><nobr>1-BUREAUX</nobr></td>

nouveau code:

Code:

1
2
3
4
5
6
7
8
<td height="27"><td class="submenu" ' . ($lSub  != 
1 ?'style="background-image:url(./media/imgs/nav/bureau_back.jpg)" 
onmouseover="this.style.background=\'url(./media/imgs/nav/bureau_back_rol.jpg)\'" 
onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)\'" style="text-align:center"' : 'onmouseover="this.style.background=\'url
(./media/imgs/nav/bureau_back_rol.jpg)\'" 
onmouseout="this.style.background=\'url(./media/imgs/nav/bureau_back.jpg)
\'" style="text-align:center"' ) . ' onclick="document.location=\'bureaux\'" 
><nobr>1-BUREAUX</nobr></td>

et voilou!!!