Tutorial Roll Over (bis) [Résolu confusion entre id et class]

Bonjour,

Je trouve l'idée excellente et j'aurais souhaité l'appliquer, cependant je rencontre un problème. Chaque élément de mon menu a une image différente. Cela implique-t-il que je vais devoir faire une "classe" css pour chaque élément du menu pour pouvoir appliquer l'astuce ? Si c'est le cas ça va être laborieux
J'espère que ma question est compréhensible.

En vous remerciant d'avance pour votre aide

Hello,

à mon avis oui, c'est nécessaire car si le browser n'a pas d'info sur l'image à charger... il peut pas le deviner tout seul ?
Y a justement un javascript qui permet de faire le roll over, mais à priori, il n'est pas conforme au standards donc je pense justement refaire mon menu totalement en css et simplement conserver la partie "préchargement des images du js"

bon courage

En effet, il faut identifier les différents menus pour gérer l'image plus finement, mais ce n'est pas une class que tu utiliseras mais un id, ton élément de menu étant unique.

Donc pour récapituler :

<ul id="menu">
<li id="accueil"><a href="home.html">Accueil</a></li>
<li id="forum"><a href="forum.html">Forum</a></li>
<li id="contact"><a href="contact.html">Contact</a></li>
</ul>

ul#menu li a
{
background: url(blabla.png) no-repeat;
}

li#accueil a { background-position: XXpx YYpx; }
li#forum a { background-position: XXpx YYpx; }
li#contact a { background-position: XXpx YYpx; }

li#accueil a:hover a { background-position: Xpx Ypx; }
li#forum a:hover a { background-position: Xpx Ypx; }
li#contact a:hover a { background-position: Xpx Ypx; }

En gros.
Si tu veux plus de détail par rapport à ton exemple, demande, il est difficile d'en faire plus avec les éléments que nous avons

@aiglobulles > le JavaScript n'a rien de non conforme aux standards, puisque la méthode d'appel d'un script JavaScript est tout à fait valable

Ce type de chose est tout à fait faisable avec JavaScript puisque la désactivation du JavaScript n'empêche pas l'accès au contenu.
Ce qui est déconseillé (et plus même) avec JavaScript, c'est la génération de contenu, les scripts obligatoire pour la consultation d'une partie d'un site etc. Tout ce qui est joyeuseté supplémentaires est tout à fait faisaible en JS.

Mais ici, autant utiliser les CSS qui sont moins souvent désactivés, qui offrent autant voire plus de souplesse.

Olivier,

en fait pour le Javascript, je suis allé voir le lien que m'a conseillé Laurent Denis...

Voici comment se présente le script.
D'abord, il fait un préchargement des images. Afin que le script ne soit pas mal interpreté par la validateur, je l'ai placé dans un fichier externe, comme conseillé dans le lien, ce qui donne (dans le fichier externe:

if(document.images)
{
i1 = new Image;
i1 = "IMG/graphs/on_home.gif";
i2 = new Image;
i2 = "IMG/graphs/on_amicale.gif";
i3 = new Image;
i3 = "IMG/graphs/on_agenda.gif";
i4 = new Image;
i4 = "IMG/graphs/on_forum.gif";
i5 = new Image;
i5 = "IMG/graphs/on_trucs.gif";
i6 = new Image;
i6 = "IMG/graphs/on_liens.gif";
i7 = new Image;
i7 = "IMG/graphs/on_livre.gif";
i8 = new Image;
i8 = "IMG/graphs/on_contact.gif";
}

Donc, jusqu'ici, aucun problème. Par contre, ensuite, je crée mon menu avec du code html ce qui donne:

<a href="rubrique.php3?id_rubrique=2" 
onMouseOver="i2.src='IMG/graphs/on_amicale.gif'"  
onMouseOut="i2.src='IMG/graphs/off_amicale.gif'" class="nav">
<img src="IMG/graphs/off_amicale.gif" border="0" name="i2" alt="L'Amicale" />
</a>

Ci dessus est un exemple de l'un des boutons, mais le validateur n'autorise pas

- onMouseOver
- onMouseOut

à priori, ce ne sont pas des attributs reconnus par le validateur... enfin, si j'ai bien compris... Alors y a peut-être moyen de faire plus simple, mais les CSS me semblent une solution plus intéressante, en effet

Plusieurs choses aiglobulles :

* ne pas détourner le topic d'un autre, je te faisais juste une remarque par rapport à ton intervention, si tu veux aller plus loin sur le sujet, tu peux ouvrir un autre topic
* le code javascript doit être extrait de la source HTML autant que possible et ici ça ne poserait aucun soucis
* les attributs doivent être en minuscule pour être validant en xHTML
* ton code de préchargement n'est pas bon, ouvre un topic sur le sujet dans le salon JS
* les préchargement d'image pour un menu ne sont pas vraiment utile surtout si on utilise les roll over avec image unique
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

Eucalyptus > tu nous dis hein si t'as un soucis avec mes explications
Modifié par Olivier (30 Jul 2005 - 12:22)

Bonjour

Merci beaucoup pour la réponse ! Il se trouve juste que j'ai fait la chasse à un problème d'affichage sous IE jusqu'à 8 heures du matin... Donc le réveil était un peu tardif

En fait si j'ai compris ta solution, on a une "grande" image, et pour chaque élément du menu on définit une position. Je n'y avait pas pensé !

Etant sur la lancée hier, j'ai implémenté une solution moins élégante qui consiste en fait a créer un a.nomElement pour chaque élément du menu comme ceci :

a.core {
	background:  url("nano/images/menu/core.gif") no-repeat 0 0;
}
ul.menu li a.core:hover {
	background: url("nano/images/menu/core.gif") no-repeat 0 -19px;
}

et le html comme vous l'avez deviné :

 <li><a class="core" href="#">&nbsp;</a></li> 

Je sais que le &nbsp n'est pas très propre, puisque quelcun qui ne peut pas afficher le CSS, ne peut pas naviguer. Je vais donc mettre un text sur les boutons mais le décaler hors de la fenêtre. C'est envisageable ?

En tout cas je tiens à vous remercier pour vos réponses ! En parcourant le forum j'ai été impressionné par la gentillesse des modérateurs et les utilisateurs qui prennent le temps de lire les question, et surtout de donner des solutions détaillées ! Bravo et merci encore !

Donc, pour ce que tu as utilisé à base de class, ce n'est pas très adapté d'utiliser une class ici, comme je te l'expliquais plus haut (enfin je crois (sifflote)).

Mais tu as compris le principe.

Un exemple plus explicatif (mais en anglais) :
http://www.nundroo.com/nav_matrix/welcome2.html
Avec les explications :
http://superfluousbanter.org/archives/2004/05/navigation_matr_1.php

Pour la technique générale expliquée en français :
http://tutoriels.olivier-patry.net/index.php/roll-over-en-css
(c'est le même tuto (à peu près, j'ai remis à jour sur cette version quelques trucs) que celui que je te montrais avant sur Alsa, faudra que je corrige la version sur alsa.)

Tu n'as pas besoin de répéter le chemin de l'image dans la partie :hover, il suffit de modifier le background-position (il faut avoir précisé des valeur par défaut dans le background de l'état normal)


Pour masquer le texte, il me semble qu'il y a ça dans la FAQ.

Pour la gentillesse des modos, ça dépend
Si tu es correct, que tu respectes les règles, poli etc, oui, nous sommes des anges, sinon, on devient méchant
Modifié par Olivier (30 Jul 2005 - 17:56)

Petite question relative à ta remarque sur les classes. Y'a-t-il une grande différence entre class et id, selon si l'on utilise l'un plutôt que l'autre ?
Je suis un débutant en CSS, 3 jours derrière moi

En lisant la doc, il ne m'a pas semblé y avoir une grande différence. Mais ça a dû m'échapper, je serais donc heureux de la connaître ! (un lien suffira, je ne voudrait pas abuser )

P.S. Je ferais de mon mieux pour avoir affaire à des anges

[Edit] J'ai re-relu la doc, sur w3schools.com, en effet il semblerait que . et class sont pour appliquer différents styles à un même élément, alors que # et id seraient pour appliquer un même style à différents éléments. Mais en utilisant

.exemple {....}
<div class="exemple">......</div>
<p class="exemple">.......</p>

je peux l'appliquer à différent éléments et ça revient au même que # et id ? Quelque chose doit encore m'échapper

[Edit 2] Il y'avait une erreur sur w3schools !
J'ai enfin trouvé la réponse sur le FAQ du site Alsa : http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id
Autant pour moi
Modifié par Eucalyptus (30 Jul 2005 - 20:55)

Voilà, tu as trouvé le lien que j'allais t'indiquer

Le principe de fonctionnement est le même pour class et id au niveau des CSS.

La différence entre un id et une class c'est que comme le tuto te l'explique, l'id fait référence à un unique élément obligatoire alors que class fait référence à plusieurs (ou un seul).

Donc, si tu es certain d'identifier de façon unique un élément, utilise un id même si class marcherait.

Ca compte aussi dans la cascade CSS, un id ayant plus de poids qu'une class.

Par ailleurs, il faut savoir que id/class ne servent pas qu'aux CSS

JavaScript gerera très bien un id, alors qu'une class il faudrait relever les manches pour faire un truc.

Toujours utiliser les choses qui sont faites pour ce que tu veux

Si ton problème est résolu, merci de l'indiquer en tant que tel
http://forum.alsacreations.com/faq/#item22
Modifié par Olivier (30 Jul 2005 - 21:45)

Merci pour l'input !

J'ai en effet vu qu'il falait mettre un Résolu si notre problème était résolu. Je n'en ai pas mis car je pensais que mon topic était juste une question

Mais je peux en mettre un, sans problème !

Là je m'arrache les cheveux avec des blocs qui ne se positionnent pas comme je veux Si dans les 4 heures qui suivent je n'arrive toujours pas, peut être que je créerais un autre topic...

Merci encore et bonne soirée !
Modifié par Eucalyptus (30 Jul 2005 - 21:53)

Eucalyptus a écrit :
Merci pour l'input !

J'ai en effet vu qu'il falait mettre un Résolu si notre problème était résolu. Je n'en ai pas mis car je pensais que mon topic était juste une question

Mais je peux en mettre un, sans problème !

Là je m'arrache les cheveux avec des blocs qui ne se positionnent pas comme je veux Si dans les 4 heures qui suivent je n'arrive toujours pas, peut être que je créerais un autre topic...

Merci encore et bonne soirée !

A partir du moment où tu poses une question et que tu trouves réponse à cette question, le topic est considéré comme résolu, l'indiquer permet de donner une information supplémentaire lors des recherches par exemple, un titre du genre "Comment faire une menu" avec [résolu] avec indiquera à la personne qui cherche une méthode à coup sûr pour faire une menu

Sinon, pour ton problème, n'hésite pas si tu n'y arrives pas, c'est peut être pas obligatoire d'attendre 4 heures

Pas de quoi pour le reste