Javascript id pour function mouseOver

Résolu/Fermé

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
Telecharger javascript - Télécharger - Langages
Https //id.sonyentertainmentnetwork.com/id/management/ ✓ - Forum Jeux vidéo
Javascript round ✓ - Forum Javascript
Id en ligne stylé - Forum PS3
A javascript error occurred in the main process - Forum Matériel & Système

4 réponses

Réponse 1 / 4

kelukelu Messages postés 15 Date d'inscription mardi 14 avril 2009 Statut Membre Dernière intervention 1 février 2011 1
8 févr. 2010 à 16:58

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 mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
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 54
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!!!

Discussions similaires

Comment définir ma nouvelle PS4 comme PS4 principale ?

c quoi Email ID

Problème authentification

Activation d'une carte SIM

c est quoi un ID

Discussions similaires

Newsletters