Communauté Informatique NDFR.net

Communauté Informatique NDFR.net (http://www.ndfr.net/forums/index.php)
-   Programmation Web (HTML, PHP, ASP, Java, XML, etc.) (http://www.ndfr.net/forums/forumdisplay.php?f=65)
-   -   Problème "OnClick" et "class". (http://www.ndfr.net/forums/showthread.php?t=5349)

bargio 03-11-2004 19:16

Problème "OnClick" et "class".
 
Salut à tous,

Je suis en train de faire un site. J'ai un menu. Le boss veut qu'il y ait des boutons et que les boutons soient "cliquables" (ie : qu'ils changent de tronche lorsqu'on passe ou clique dessus). J'ai d'abord commencé par faire un rollover mais il faut que le bouton soit enfoncé lorsque l'on est dans la rubrique qui correspond au bouton cliqué (suis je clair ???)... Comme ça ne marchait pas terriblement bien (il faut passer la souris sur tous les boutons avant pour pré-charger les images, sinon ça ne marche pas), j'ai changé de méthode. J'ai mis ceci dans ma feuille css et en dessous, il y a ce que j'ai mis dans mon code pour un des boutons du menu...

css :

<!--
.clair { filter:alpha(opacity=40) }
.opac { filter: alpha(opacity=100)}
-->

et le code pour un bouton :

<A href=index.php?page=accueil><img src=boutons/accueil_off.gif border=0 onmouseover="this.className='clair';" onmouseout="this.className='opac';" OnClick="this.className='clair';" class="opac" ></a>

Les petits génies que vous êtes auront certainement déjà trouvé pourquoi ça ne marche pas, mais n'étant pas un as, j'ai beau chercher, je ne sais pas... Le onmouseover et onmouseout marchent très bien, mais rien à faire pour le onclick (ou onmouseclick), je n'arrive pas à obtenir la classe "clair"...

Si quelqu'un a une idée, ou encore mieux une solution...

Merci d'avance.

Seb

Daweb 03-11-2004 20:04

Heu j'ai un doute...
filter:aplha ne serait pas reservé à Internet Explorer ?

Peut être que je me trompe, mais c'est à vérifier.
Et si c'est le cas, de toute façon tu peux laisser tomber ta méthode, elle n'est pas valable dans ce cas.

bargio 03-11-2004 20:07

Quote:

Originally Posted by Daweb
Heu j'ai un doute...
filter:aplha ne serait pas reservé à Internet Explorer ?

Peut être que je me trompe, mais c'est à vérifier.
Et si c'est le cas, de toute façon tu peux laisser tomber ta méthode, elle n'est pas valable dans ce cas.

Tu as parfaitement raison, ce n'est valable que pour IE. Mais c'est pas grave dans le cas qui m'intéresse... Cela dit, si vous avez une solution viable, pas compliquée et qui fonctionne partout, je suis pour !

Seb

SantX 03-11-2004 20:07

C'est bien le cas, tous les attributs filter sont des attributs spéciaux à IE, qui n'ont pas d'équivalants sous Mozilla.

EDIT : Il a fallut qu'on poste au même moment :confused: !
EDIT 2 : Tu peux tester un onFocus, je pense que ça marche sur les boutons et que tu devrais avoir l'effet désiré.

cameleon69 04-11-2004 10:05

1 Attachment(s)
Bonjour

je ne sais pas si cela va vraiment répondre à ta question mais tu trouveras dans le fichier zip ci-joint un exemple de page html avec des exemples de styles qui fonctionnent.
Pour cela j'ai utilisé une image transparente sur laquelle j'applique des styles.
Code:

.bleu { background-color:#000099; }
.rouge { background-color:#990000; }
.vert { background-color:#009933; }
.out { background-image: url(bouton.gif);}
.over { background-image: url(bouton_over.gif); }
.down { background-image: url(bouton_out.gif);}

Certains avec une couleur de fond d'autres avec une image.
Puis j'ai utilisé le même code que toi pour la balise image, cela fonctionne.
Par contre si j'utilise les styles avec filter, je ne vois pas ce que tu veux obtenir, car de toute façon cela ne restera pas dans le style cliqué étant donné que après avoir cliqué tu sors de l'image donc il applique le onmouse out.
Pour cela tu vas devoir coder un peu ou trouver une fonction javascript pour détecter sur quel élément tu clique et lui appliqué un style enfoncé par exemple.
En espérant avoir répondu à ta question.

bargio 04-11-2004 14:42

Tout d'abord merci pour ta réponse. Effectivement ton exemple marche bien, sauf qu'il lui manque quelque chose pour me satisfaire totalement. Si une fois l'image cliquée, on garde effectivement bien le style voulu, on ne le garde que lorsque la souris est sur le bouton, des qu'on sort, le onmouseout s'applique de nouveau. Du coup, je ne comprends pas trop la différence en le "onmouseover" et le "onmousedown".

Est ce que quelqu'un sait comment fonctionne la fonction "active" dans le css ? Est ce que c'est l'équivalent de onmousedown ou pas ?

Merci encore.

Seb

Benjy 04-11-2004 18:08

"active" bug sous IE, par contre Firefox le gère très bien :)

bargio 04-11-2004 18:13

Merci Benjy pour ta réponse. Mais de toutes façons, c'était apparemment pas ce qu'il me fallait.

Du coup, voilà ce que j'ai fait : j'ai utilisé les css de Cameleon69 pour gérer mon changement d'image. Ça marche nickel. En parrallèle, pour que mon bouton reste enfoncé selon la page où je suis, j'ai tout simplement utilisé du php : si je suis sur cette page j'affiche le bouton enfoncé, si je n'y suis pas j'affiche le bouton pas enfoncé sauf lorsque je passe dessus avec la souris. C'est impéccable.

Merci à tous, en particulier à fonji par MSN et Cameleon69 !!

Seb

cameleon69 04-11-2004 19:57

bonjour,
avec dreamweaver tu peux le faire à l'aide d'une fonction javascript.
le problème c'est que si tu changes de page le bouton sera remis à l'état initial.
Après tu peux peut être initialiser l'état de ce bouton en fonction de la page, c'est dans une page html ou php ou autre ?

Désolé j'avais pas vu ta réponse mais c'était la seule piste que je voyais.

bargio 04-11-2004 19:59

C'est bon mon problème est résolu, comme je l'ai expliqué dans un message plus haut. Et je n'ai pas dreamweaver, je fais tout au bloc note :) (si si)

Seb


All times are GMT +2. The time now is 11:17.

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.