Les Allergies
Alimentaires
Posez votre question Signaler

Javascript id pour function mouseOver [Résolu]

kelukelu 19Messages postés 14 avril 2009Date d'inscription 1 février 2011Dernière intervention - Dernière réponse le 9 févr. 2010 à 13:09
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
Lire la suite 

Javascript id pour function mouseOver »

4 réponses
Réponse
+0
moins plus
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 :)
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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 :)
Ajouter un commentaire
Réponse
+0
moins plus
C'est exactement ce que je voulais faire! ça marche nikel!
UN GRAND MERCI!!!
Ajouter un commentaire
Ce document intitulé « javascript id pour function mouseOver » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?