Interactivité d'un bouton sans javascript

[Plantaquatix]

Bonjour,

Je voudrais insérer des boutkns sur mon site, mais qu'ils soient interactifs, cad qu'il se produit quelquechose quand on passe dessus, comme par exemple les rollover. Le probleme des rollover, c'est qu'il utilise du javascript, et ça, Internet Explorer n'aime pas ca et fait afficher la petite barre jaune en haut, rédibitoire pour les visiteurs.

Donc ma question est : existe t il d'autre méthode pour rendre interactif des boutons sans javascript svp ?

Merci d'avance !

[Ferguss0N]

Salut,

Pour ce genre d'interaction tu peux utiliser le CSS et les pseudo classes.

Plusieurs sites fournissent des tuto pour le faire. C'est très pratique et ça évite d'utiliser du JS à outrance.

[Plantaquatix]

ok, sauf que je ne suis pas webdesigner : les classes je connais pas et les CSS je débute ^^

tu n'aurais pas des sites de tutos pour ca ? j'apprendrais plus vite en regardant comment c'est bidouiller ? ^^

[Shtong]

Ma technique préférée pour ça est la "technique tiroir" (a.k.a. "sliding doors" en VO). c'est un peu contraignant puisqu'il faut bien préparer tes images spécialement, mais c'est la meilleure technique sans javascript à mon avis.

[Plantaquatix]

Impeccable, j'ai survolé mais je pense que c'est ça, je vais me pencher plus dessus masi si d'autres ont des propositions ^^

Merci !

[Plantaquatix]

Bon, ca y est, j'y ais mis le temps, mais j'ai réussit a me remettre a ca. j'ai réussit avec ta méthode, en utlisant ce petit tuto, mieux fait car reprends pas à pas ,et comme je ne fais que commencer le CSS, c'etait bcp mieux ^^ TUTO ICI.

Par ctre, comme je suis vraiment un blaireau avec tout ca, j'ai réussit impeccablement a faire mes onglets de menu, mais ils sont tous alignés verticalement, et mon menu est bien sur ... horizontal ! donc comment faire pour l'horizontaliser svp ?

merci !!

EDIT :

mon code :

<div>

<a href="accueil.html" id="accueil">accueil</a>

<a href="informatique.html" id="informatique">informatique</a>

<a href="contact.html" id="contact">contact</a>

<a href="liens.html" id="liens">liens</a>

</div>

[Plantaquatix]

C'est aussi compliqué ? pertsonne n'a d'idée ?? Pas étonnant que j'ai du mal

[beuhbeuh]

essaye de faire plutôt :

<ul class="MainMenu">
 <li><span><a href="accueil.html" id="accueil">accueil</a></span></li>
 <li><span><a href="informatique.html" id="informatique">informatique</a></span></li>
 <li><span><a href="contact.html" id="contact">contact</a></span></li>
 <li><span><a href="liens.html" id="liens">liens</a></span></li>
</ul>

et ensuite il faut créer le style correct pour la classe .MainMenu pour que l'affichage soit horizontal, essaye un truc comme ça :

.MainMenu li a {
float: left;
}

.MainMenu li {
display: inline;
}

je pense que tu trouveras des exemples sur n'importe quel site web

[Shtong]

Oui c'est plus correct sémantiquement de faire ton menu avec un structure liste même si je n'aurais pas mis les <span> mais c'est un détail.

Pour afficher ton menu horizontalement, il suffit en effet de changer l'attribut display des li pour le mettre à inline. Par défaut il est à block donc un seul élément par ligne. En inline ils s'alignent comme les mots d'un texte.

[Plantaquatix]

Ok, merci je vais voir ca, j'ai réussit a trouver quelquechose qui a l'air de marcher, mais bon, j'ai encore quelques détails a régler ^^

merci

Par contre, est-il possible que, lorsque l'on clique sur un des boutons, et que l'on arrive sur la page donnée, que le dit bouton reste sur la position "survolée", pour indiquer justement que c'est sur telle ou telle page que l'on se trouve (et donc éviter d'etre perdu dans la navigation) ?

[Shtong]

Par contre, est-il possible que, lorsque l'on clique sur un des boutons, et que l'on arrive sur la page donnée, que le dit bouton reste sur la position "survolée", pour indiquer justement que c'est sur telle ou telle page que l'on se trouve (et donc éviter d'etre perdu dans la navigation) ?

Ah ben non ça il faudra plutôt le faire coté serveur (donner une URL d'image différente s'il s'agit du lien de la page en cours de chargement).

[beuhbeuh]

Ok, merci je vais voir ca, j'ai réussit a trouver quelquechose qui a l'air de marcher, mais bon, j'ai encore quelques détails a régler ^^

merci

Par contre, est-il possible que, lorsque l'on clique sur un des boutons, et que l'on arrive sur la page donnée, que le dit bouton reste sur la position "survolée", pour indiquer justement que c'est sur telle ou telle page que l'on se trouve (et donc éviter d'etre perdu dans la navigation) ?

Il faut pour cela créer une classe CSS .selected par exemple qui a les propriétés qui vont bien (si tu veux conserver le même style que pour les boutons survolés, tu n'as qu'à dupliquer les propriétés du hover) et ensuite, 2 cas se présentent :

1) Si tu utilises un langage serveur (php, asp.net, ...) il faut appliquer la classe CSS .selected dynamiquement

2) Si tu utilises un langage statique (HTML) la seule solution est de setter cette classe CSS en javascript (il faut récupérer l'url courante, trouver l'id de l'onglet qui correspond et appliquer la classe .selected à la balise trouvée)

[Plantaquatix]

euh ... ouai ... onva dire que c'est pas possible quoi

Une petite derniere pour la route, j'ai réussit avec ce type de code :

la question est de savoir si ce "bloc" peut etre centré sur ma page ??

En fait j'utilise des frames et ca, c'est mon menu qui est dans la frame de haut, donc je voidrais que cela soit centré et nonh positionnée par rapport à en haut/gauche (10px)

is it possibeule ??

Merci pour votre aide en tout cas !

[Ferguss0N]

#menu{
width:LatailleEnPx;
margin:auto;
}

pour centrer ton menu

[Plantaquatix]

dsl, je suis un peu neuneu avec tout ca, donc, question bete : c'est pour le css ou le html ? et je le mets où ?

[Ferguss0N]

C'est pour le CSS, tu peux créer un fichier css ou tu vas déclarer toutes propriétés CSS de type : style.css

Dans ta page HTML tu va indiquer l'endroit où aller chercher le fichier CSS avec ce code

Tu insères :

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

entre <head> et </head>

href="" désigne le chemin pour aller chercher la feuille de style CSS

Ensuite tu vas éditer ton fichier style.css

J'ai repris ton code CSS et je l'ai mis au clair car il y avait plusieurs erreurs, tu devrais repartir de ce que je te propose et de l'améliorer en fonction de tes besoins.

body
{ 
background-color:#6d9cff; 
font-family:verdana,arial,tahoma,sans-serif; /*Déclare la famille de polices utilisée*/
font-size:11px;
}

#menu
{
width:850px;   /*La largeur de ton menu*/
height:50px; /*La hauteur de ton menu*/
margin:auto;   /*Pour centrer le menu dans la page*/
background-image:url("../images/fond.jpg");   /*Chemin de l'image de fond pour ton menu*/
background-repeat:no-repeat;   /*Si tu ne veux pas répéter le fond*/
background-position:center;   /*Position de l'image de fond au centre*/
background-color:#F2F2F2; /*Si tu préfère mettre une couleur de fond*/
border:1px dashed black; /*Les bordures de la div #menu*/
}

#menu ul
{
list-style-type:none;   /*Enlève les puces à coté des listes*/
text-align:center;
margin:15px 0 0 0;
padding:0;
}

#menu li
{
display:inline;  /*Mise sur une seule ligne de ta liste*/
margin:0 0 0 25px;
}

#menu a{
color:#999;
text-decoration:none;
}

#menu a:hover{
text-decoration:underline;
}

Puis dans ta page HTML tu n'as plus qu'a mettre sous cette forme ton menu horizontal :

<div id="menu">
 <ul>
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  <li><a href="#">Menu4</a></li>
  <li><a href="#">Menu5</a></li>
 </ul>
</div>

Je te mets un exemple en ligne : http://www.ronanguerin.net/tutorials/menu.html

Voilà, j'espère que ça t'aide

A plus,

Ronan.

[Plantaquatix]

Super ! MErci pour ton aide !!

Bon, par contre, ca ne marche pas chez moi ... va comprendre ...

voila ce que j'obtiens quand je fais un copié collé selon ta feuille :

et normalement (cad avec ma feuille, mais où mon menu n'est pas centré, comme on peux le constater ci-après) :

D'ou vient le bug ??

De plus, a quoi correspond le "media="screen"" que tu me fais rajouter sur ma feuille html ? (oui, je suis curieux ).

[Shtong]

media=screen signifie que la feuille doit être appliquée à l'écran (mais pas à l'impression par exemple)

L'exemple de Ferguss0n est correct... il faudrait que tu nous montre le code de ton menu (avec images et tout) ou même idéalement que tu nous une URL de la page que tu as fait.

[Ferguss0N]

Super ! MErci pour ton aide !!

Bon, par contre, ca ne marche pas chez moi ... va comprendre ...

voila ce que j'obtiens quand je fais un copié collé selon ta feuille :

et normalement (cad avec ma feuille, mais où mon menu n'est pas centré, comme on peux le constater ci-après) :

D'ou vient le bug ??

De plus, a quoi correspond le "media="screen"" que tu me fais rajouter sur ma feuille html ? (oui, je suis curieux ).

Déjà regarde la taille de ton fichier de fond, il fait un peu plus de 1300px de large et dans le code j'ai déclarer 850px (c'était pour l'exemple) donc tu dois réadaper la taille de la div #menu en fonction de la taille de ton bandeau.

Pour les points, vérifie bien que tu as mis list-style-type:none; dans ton code CSS pour les propriétés ul.

Hop, si tu pouvais nous montrer un exemple en ligne ça serait plus simple

[Plantaquatix]

l'url, je peux pas parceque il n'est pas encore en ligne

^^

[Shtong]

Et coté HTML ?

[Plantaquatix]

côté html :

[code[/code]

Déjà regarde la taille de ton fichier de fond, il fait un peu plus de 1300px de large et dans le code j'ai déclarer 850px (c'était pour l'exemple) donc tu dois réadaper la taille de la div #menu en fonction de la taille de ton bandeau.

Pour les points, vérifie bien que tu as mis list-style-type:none; dans ton code CSS pour les propriétés ul.

Hop, si tu pouvais nous montrer un exemple en ligne ça serait plus simple

j'avais pas vu ton post ... dsl

Pour la taille, la taille que tu vois c'est celle de mon screen, pas du menu, il fait bien 850 donc le pb n'est pas la.

Oui, j'ai fait un copié collé de ton code, donc je n'ai pas oublié d'éviter le style des puces ...

L'exemple en ligne, ben il est au dessus mainteannt

une idée ?

[Shtong]

Attention, tu n'as pas bien appliqué l'exemple pour la partie HTML ! Tu dois attribuer l'id menu à l'élément ul pour que le css #menu lui soit appliqué ! Ou alors il faut que tu mette le ul dans un truc ayant cet identifiant comme dans l'exemple de Ferguss0n

<ul id="menu">
<li><a id="menu1" title="menu1" href="#"></a></li>
<li><a id="menu2" title="menu2" href="#"></a></li>
<li><a id="menu3" title="menu3" href="#"></a></li>
<li><a id="menu4" title="menu4" href="#"></a></li>
<li><a id="menu5" title="menu5" href="#"></a></li>
<li><a id="menu6" title="menu6" href="#"></a></li>
<li><a id="menu7" title="menu7" href="#"></a></li>
<li><a id="menu8" title="menu8" href="#"></a></li>
<li><a id="menu9" title="menu9" href="#"></a></li>
<li><a id="menu10" title="menu10" href="#"></a></li>
</ul>

[Plantaquatix]

y a une amélioration !!!

l'image apparait mais il y a aucune interactivité

[Ferguss0N]

Tes background-position sont étranges..

Je ne vais pas tout marquer non plus, je crois que je t'ai bien aiguiller : pseudo classe

En faisant une petite recherche sur google tu devrais t'en sortir

Bon je t'aide encore un peu

On prend un exemple :

fond1.jpg qui est l'image de base et fond2.jpg qui doit s'afficher au survol.

on prend notre liens

HTML

<a class="leSuperLienQuiBrille" href="#">Mon super liens qui brille</a>

CSS

.leSuperLienQuiBrille{
background-image:url("../images/fond1.jpg");
background-repeat:no-repeat;

.leSuperLienQuiBrille:hover{
background-image:url("../images/fond2.jpg");
background-repeat:no-repeat;
}