Javascript id pour function mouseOver [Résolu/Fermé]

Question

Javascript id pour function mouseOver [Résolu/Fermé]

Signaler

kelukelu

Messages postés: 15
Date d'inscription: mardi 14 avril 2009
Statut: Membre
Dernière intervention: 1 février 2011

- 8 févr. 2010 à 14:16
kelukelu

Messages postés: 15
Date d'inscription: mardi 14 avril 2009
Statut: Membre
Dernière intervention: 1 février 2011

- 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

A voir également:

Javascript id pour function mouseOver
Javascript id pour function mouseOver ✓ - Forum - Javascript
Javascript, entre 2 'function' ✓ - Forum - Javascript
[JAVASCRIPT] window.onload=function() ✓ - Forum - Windows
Javascript function is not defined onclick ✓ - Forum - Javascript
Javascript - Chercher des éléments par IDs - Conseils pratiques - Javascript

4 réponses

Réponse 2 / 4

Defouille

Messages postés: 388
Date d'inscription: mercredi 13 janvier 2010
Statut: Membre
Dernière intervention: 15 novembre 2011

52
8 févr. 2010 à 15:30

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 :)

Réponse 3 / 4

Defouille

Messages postés: 388
Date d'inscription: mercredi 13 janvier 2010
Statut: Membre
Dernière intervention: 15 novembre 2011

52
9 févr. 2010 à 08:14

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 :)

Réponse 4 / 4

kelukelu

Messages postés: 15
Date d'inscription: mardi 14 avril 2009
Statut: Membre
Dernière intervention: 1 février 2011

1
9 févr. 2010 à 13:09

C'est exactement ce que je voulais faire! ça marche nikel!
UN GRAND MERCI!!!

Posez votre question

kelukelu · Accepted Answer · 2010-02-08T16:58:46+0100

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

Javascript id pour function mouseOver [Résolu/Fermé]

4 réponses

Votre réponse

Newsletter