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
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
A voir également:
- Javascript id pour function mouseOver
- Telecharger javascript - Télécharger - Langages
- Javascript round ✓ - Forum Javascript
- Document id lycamobile - Forum LG
- Id telephone - Guide
- A javascript error occurred in the main process - Forum Matériel & Système
4 réponses
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
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
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
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
8 févr. 2010 à 15:30
Bonjour,
tu as un petit soucis dans tes fonctions javascript, tu les redefinis.
>javascript
>html
Ca devrait mieux marcher :)
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 :)
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
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
>HTML
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 :)
> 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 :)
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
9 févr. 2010 à 13:09
C'est exactement ce que je voulais faire! ça marche nikel!
UN GRAND MERCI!!!
UN GRAND MERCI!!!