Javascript id pour function mouseOver

Résolu
kelukelu Messages postés 19 Statut Membre -  
kelukelu Messages postés 19 Statut Membre -
Bonjour,

J'aimerai identifié les fonctions mouseOver et mouseOut par un id, ainsi je pourrai utiliser ces fonctions plusieurs fois pour des id différents.

je pensais que cette méthode fonctionnerait :

>javascript
function mouseOver(logo)
{
document.getElementById("fvb").style.backgroundColor = "#fff"
}
function mouseOut(logo)
{
document.getElementById("fvb").style.backgroundColor = "#000"
}

function mouseOver(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
function mouseOut(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}

>html
<a id="logo" onmouseover="mouseOver(this.logo)" onmouseout="mouseOut(this.logo)"></a>
<a id="bloc" onmouseover="mouseOver(this.bloc)" onmouseout="mouseOut(this.bloc)"></a>

Je pensais qu'ainsi id="logo" interagirait avec id="fvb" et id="bloc" interagirait avec id="title"
mais en fait, les 2 onmouseover interagissent que sur l'id "title"

Merci d'avance
A voir également:

4 réponses

kelukelu Messages postés 19 Statut Membre 1
 
merci beaucoup mais ça marche pas avec ce que je veux faire.
mon problème c'est que j'ai mis beaucoup de style par fonction et pour différents id. Je met mon ancien code qui est codé n'importe comment :

> Javascript
function mouseOver(logo, fvb, baseline_fvb)
{
document.getElementById("fvb").style.backgroundColor = "#b2b7cc";
document.getElementById("fvb").style.color = "#fff";
document.getElementById("baseline_fvb").style.backgroundColor = "#a7aab7";
document.getElementById("baseline_fvb").style.color = "#fff";
}
function mouseOut(logo, fvb, baseline_fvb)
{
document.getElementById("fvb").style.backgroundColor = "#fff";
document.getElementById("fvb").style.color = "#848eae";
document.getElementById("baseline_fvb").style.backgroundColor = "#fff";
document.getElementById("baseline_fvb").style.color = "#dcdcdc";
}

function mouseOver(bloc_img_yse, bloc_title_yse, bloc_category_yse)
{
document.getElementById("bloc_title_yse").style.backgroundColor = "#a7aab7";
document.getElementById("bloc_title_yse").style.color = "#fff";
document.getElementById("bloc_category_yse").style.backgroundColor = "#a7aab7";
document.getElementById("bloc_category_yse").style.color = "#fff";
document.getElementById("bloc_img_yse").style.background = "url(img/btn/btn_yse02.jpg)";
}
function mouseOut(bloc_img_yse, bloc_title_yse, bloc_category_yse)
{
document.getElementById("bloc_title_yse").style.backgroundColor = "#e4e5e9";
document.getElementById("bloc_title_yse").style.color = "#a7aab7";
document.getElementById("bloc_category_yse").style.backgroundColor = "#e4e5e9";
document.getElementById("bloc_category_yse").style.color = "#a7aab7";
document.getElementById("bloc_img_yse").style.background = "url(img/btn/btn_yse01.jpg)";
}

>HTML
<div>
<a id="logo" onmouseover="mouseOver(this.logo)" onmouseout="mouseOut(this.logo)"></a>
<div class="header_title">
<a id="fvb" onmouseover="mouseOver(this.fvb)" onmouseout="mouseOut(this.fvb)" href="#">fvb</a>
<a id="baseline_fvb" onmouseover="mouseOver(this.baseline_fvb)" onmouseout="mouseOut(this.baseline_fvb)" href="#">Lorem Ipsum</a>
</div>
</div>
<div class="bloc_portfolio_first">
<a id="bloc_img_yse" onmouseover="mouseOver(this.bloc_img_yse)" onmouseout="mouseOut(this.bloc_img_yse)" href="#"></a>
<div class="bloc_content">
<a id="bloc_title_yse" onmouseover="mouseOver(this.bloc_title_yse)" onmouseout="mouseOut(this.bloc_title_yse)" href="#">yse</a>
<a id="bloc_category_yse" onmouseover="mouseOver(this.bloc_category_yse)" onmouseout="mouseOut(this.bloc_category_yse)" href="#">bijoux</a>
</div>


J'aimerai que "logo", "fvb" et "baseline_fvb" interagissent entre eux au survol de l'un des 3 .
Et que "bloc_img_yse", "bloc_title_yse" et "bloc_category_yse" interagissent entre eux.

Merci beaucoup
1
Defouille Messages postés 404 Statut Membre 54
 
Bonjour,

tu as un petit soucis dans tes fonctions javascript, tu les redefinis.

>javascript

function mouse_over(id)
{
    document.getElementById(id).style.backgroundColor = "#fff"
}
function mouse_out(bloc)
{
    document.getElementById(id).style.backgroundColor = "#fff"
}


>html

<a id="logo" onmouseover="mouse_over('fvb')" onmouseout="mouse_out('fvb')"></a>
<a id="bloc" onmouseover="mouse_over('title')" onmouseout="mouse_out('title')"></a> 


Ca devrait mieux marcher :)
0
Defouille Messages postés 404 Statut Membre 54
 
Si j'ai bien compris ce que tu veux faire, tu peux adapter le code que je t'ai donné pour ajouter des éléments :

> Javascript
function mouse_over(logo, fvb, baseline_fvb)
{
    if(logo){
        document.getElementById("logo").style.backgroundColor = "#b2b7cc";
        document.getElementById("logo").style.color = "#fff";
    }
    if(fvb){
        document.getElementById("fvb").style.backgroundColor = "#b2b7cc";
        document.getElementById("fvb").style.color = "#fff";
    }
    if(baseline_fvb){
        document.getElementById("baseline_fvb").style.backgroundColor = "#a7aab7";
        document.getElementById("baseline_fvb").style.color = "#fff";
    }
}
function mouse_out(logo, fvb, baseline_fvb)
{
    if(logo){
        document.getElementById("logo").style.backgroundColor = "#fff";
        document.getElementById("logo").style.color = "#848eae";
    }
    if(fvb){
        document.getElementById("fvb").style.backgroundColor = "#fff";
        document.getElementById("fvb").style.color = "#848eae";
    }
    if(baseline_fvb){
        document.getElementById("baseline_fvb").style.backgroundColor = "#fff";
        document.getElementById("baseline_fvb").style.color = "#dcdcdc";
    }
}

function mouse_over2(bloc_img_yse, bloc_title_yse, bloc_category_yse)
{
    if(bloc_img_yse){
        document.getElementById("bloc_title_yse").style.backgroundColor = "#a7aab7";
        document.getElementById("bloc_title_yse").style.color = "#fff";
    }
    if(bloc_title_yse){
        document.getElementById("bloc_category_yse").style.backgroundColor = "#a7aab7";
        document.getElementById("bloc_category_yse").style.color = "#fff";
    }
    if(bloc_category_yse){
        document.getElementById("bloc_img_yse").style.background = "url(img/btn/btn_yse02.jpg)";
    }    
}
function mouseOut(bloc_img_yse, bloc_title_yse, bloc_category_yse)
{
    if(bloc_img_yse){
        document.getElementById("bloc_title_yse").style.backgroundColor = "#e4e5e9";
    document.getElementById("bloc_title_yse").style.color = "#a7aab7";
    }
    if(bloc_title_yse){
        document.getElementById("bloc_category_yse").style.backgroundColor = "#e4e5e9";
    document.getElementById("bloc_category_yse").style.color = "#a7aab7";
    }
    if(bloc_category_yse){
        document.getElementById("bloc_img_yse").style.background = "url(img/btn/btn_yse01.jpg)";
    }    
} 



>HTML

<div>
    <a id="logo" onmouseover="mouse_over(false, true, true)" onmouseout="mouse_out(false, true, true)"></a>
    <div class="header_title">
        <a id="fvb" onmouseover="mouse_over(true, false, true)" onmouseout="mouse_out(true, false, true)" href="#">fvb</a>
        <a id="baseline_fvb" onmouseover="mouse_over(true, true, false)" onmouseout="mouse_out(true, true, false)" href="#">Lorem Ipsum</a>
    </div>
</div>
<div class="bloc_portfolio_first">
    <a id="bloc_img_yse" onmouseover="mouse_over2(false, true, true)" onmouseout="mouse_out2(false, true, true)" href="#"></a>
    <div class="bloc_content">
        <a id="bloc_title_yse" onmouseover="mouse_over2(true, false, true)" onmouseout="mouse_out2(true, false, true)" href="#">yse</a>
        <a id="bloc_category_yse" onmouseover="mouse_over2(true, true, false)" onmouseout="mouse_out2(true, true, false)" href="#">bijoux</a>
    </div>
</div> 


De cette facon, les 2 groupes de 3 liens interagissent avec leur groupe, et tu peux personnaliser le style de chaque lien.

En espérant que ca soit ca que tu veuilles :)
0
kelukelu Messages postés 19 Statut Membre 1
 
C'est exactement ce que je voulais faire! ça marche nikel!
UN GRAND MERCI!!!
0