Menu animé dans un fichier css[RESOLU]

bonjour à tous,
je voudrai savoir comment faire appel à un code javascript dans un .css
en fait j'ai fait un menu animé en javascript au début des titres il ya des billes et quand le curseur passe dessus, c'est un fleche qui s'affiche sur ce titre mais pour les autres c'est la bille
merci d'avance
Modifié par elodie (17 Mar 2005 - 15:21)

En fait ta bille se transforme en fleche au survol ?

C'est très simple en css et pas besoin de script :


a {
background-image: url(bille_10px_de_large.gif);
padding-left: 11px;
}

a:hover {
background-image: url(fleche_10px_de_large.gif);
padding-left: 11px;
}

elodie a écrit :
merci pour ton aide mais moi je ne veux pas une image de fond mais plutot qu'elle s'affiche à gauche du titre du sous menu
merci encore

La solution de Sébastien le permet avec le padding-left qu'il indique

Pour etre precis voici le code complet :

a {
background-image: url(bille_10px_de_large.gif);
background-position: left;
background-repeat: no-repeat;
padding-left: 11px;
}

a:hover {
background-image: url(fleche_10px_de_large.gif);
background-position: left;
background-repeat: no-repeat;
padding-left: 11px;
}

Le principe est de mettre ton image en background, sans repetition, alignée à gauche et de decaler ton texte vers la droite de la largeur de ton image. Visuellement ca donne une puce graphique.
Et en changeant le background du a:hover ca fait une puce qui change au survol

voila

@Sebastien,
Merci d'utiliser [ code][ /code] pour présenter du code, c'est plus lisible

@Élodie,
Je te conseille le tutoriel d'Olivier Un roll over en CSS avec une seule image.

merci infiniment, maintenant ça ne le repete plus sauf que l'affichage n'est pas toujours normal, j'ai essayé de redimensionner avec width mais ça n'a pas changé

elodie a écrit :
merci infiniment, maintenant ça ne le repete plus sauf que l'affichage n'est pas toujours normal, j'ai essayé de redimensionner avec width mais ça n'a pas changé

Tu verras dans le tuto d'Oliver qu'il est possible de dimensionner les "li a" pour que l'affichage soit impeccable .

merci Igor mais moi je ne veux pas une image d'arriere plan, voici ce que je veux: http://www.firstpointcom.com/->Menus->liens animés

elodie a écrit :
merci Igor mais moi je ne veux pas une image d'arriere plan, voici ce que je veux: http://www.firstpointcom.com/ ->Menus->liens animés

C'est pourtant exactement ce que nous te proposons avec Sébastien et sans javascript ... avec une image d'arrière plan et toute en css.

vous ne pensez pas que je devrais plutot ajouter quelque chose du genre style="width: 12 px"? parce que la bille s'affiche trop grand donc on a l'impression que c'est une image de fond
merci encore pour tout

elodie a écrit :
vous ne pensez pas que je devrais plutot ajouter quelque chose du genre style="width: 12 px"? parce que la bille s'affiche trop grand donc on a l'impression que c'est une image de fond
merci encore pour tout

Tout dépend de la taille de l'image originale.
Petite question qu'est-ce qui te chagine tant avec les images en background ?

rien c'était juste pour faire un peu plus joli mes menus, mais je pense que je vais laisser tomber et passer à autre chos du genre:
j'ai la meme présentation que celle présentée à cette page
http://www.alsacreations.com/articles/modeles/g_d_haut_fluide.htm
mais je n'arrive pas à faire afficher le contenu de menu1 du menu gauche dans la partie centrale. avec les frames par exemples je mettais :target="nom_du_cadre" mais comment le spécifier en css
merci vraiment pour toutes vos aides

rebonjour à tous,
je veux créer deux pages: page1.php et page2.php qui ont toutes les deux la meme présentation: meme menu haut, droit et gauche seule la partie centrale change puisque ce ne sont pas les memes informations. pour mes présentations j'utilise le meme code css, dans ce cas alors quand je suis sur la page1 et que je clique sur le lien page2 comment devrai je faire l'appel?*
dois je charger toute la page?
dois je mettre le meme code pour les 2 pages en changement seulement la partie div centrale? ou alors comment indiquer la page ou elle doit s'afficher
si quelqu'un connait la solution,merci de répondre svp

utilise des include php :

<?php
  include('haut.php');
  include('menu.php');
?>
  <div id="corps">
      blablablabla
      blablablabla
      blablablabla
      blablablabla
  </div>
<?php
  include('gauche.php');
  include('bas.php');
?>

c'est ce que certain appel des "pseudo-frames"
Modifié par nemohp (17 Mar 2005 - 09:56)

ok, je vais essayer
en tout cas merci

merci memohp, je n'ai pas vraiment compris car je n'ai pas de page qui s'appelle haut.php, droit.php, bas.php, ni gauche.php
voici mon code style.css, si possible donne moi un exemple stp et merci encore

/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
height: 100%;
}
#header {/*partie haut*/
height: 90px;
background-color: #FFFFFF;
}
#haut {/*partie du menu*/
height: 40px;
background-color:#CCCCFF;
margin-left: 40px;


}
#conteneur {/*la page*/
position: absolute;
width: 100%;
height: 100%;
background-color:#CCCCFF;

}
#centre {/*partie centrale*/
background-color:#FFFFFF;
margin-left: 160px;
margin-right: 160px;
height: 100%;
}
#gauche {
position: absolute;
left:0;
width: 150px;
margin-left: 10px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}

.menuhaut {
list-style-type: none;
margin: 20;
padding:0;
}
.menuhaut li {
display: inline;
}
.menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: none;

}
.menuhaut a:hover {
text-decoration: blink;
color: #FFFFFF;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 12px;
color: #000000;
text-decoration:none;

}


.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;
}

.menudroit li {
margin-bottom: 5px;
}

.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}

c'est un truc de base en php !!! cherche sur google

sinon un debut d'exemple simple ici :L'instruction PHP INCLUDE par Raphael

http://www.alsacreations.com/articles/include/article01b.gif

EDIT : voila un autre lien qui explique bien au débutant : ici
Modifié par nemohp (17 Mar 2005 - 12:25)

merci pour le lien, je ne comprend pas comment j'ai pu me passer de formidable totoriels de Raphael

Là tu devrais peut-être mettre un résolu sur ce sujet et en ouvrir un autre au besoin, car on dévie du sujet initial du post.