Javascript id pour function mouseOver

Résolu

kelukelu Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
kelukelu Messages postés 15 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Javascript id pour function mouseOver
Id telephone - Guide
Telecharger javascript - Télécharger - Langages
Document id lycamobile - Forum LG
Gate first id ✓ - Forum Navigateur
Id reseau tv - Forum TNT / Satellite / Réception

4 réponses

Réponse 1 / 4

kelukelu Messages postés 15 Date d'inscription Statut Membre Dernière intervention 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

Réponse 2 / 4

Defouille Messages postés 388 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 1

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

Discussions similaires

c est quoi un ID

Activation d'une carte SIM

Activer ma carte SIM lycamobile

Comment définir ma nouvelle PS4 comme PS4 principale ?

java script error in the main process

Votre réponse

Discussions similaires