boutons pour site internet

boutons pour site internet - HTML/CSS - Programmation

Marsh Posté le 14-11-2006 à 17:36:32    

Bonjour,
 
j'ai un site internet et je voudrais faire un menu avec des boutons. Jusque là aucun soucis. Je crée les image en .jpg que j'insère sur ma page.
 
Maintenant je voudrais que qd on met la souris dessus, l'image change, comme si on appuyé sur le bouton en fait. Donc je crée tjr en .jpg d'autres bouton d'une autre couleur.
 
Mon soucis est que je ne connais pas le code html pour changer une image qd on passe la souris dessus.
 
Pouvais vous m'aider svp?

Message cité 1 fois
Reply

Marsh Posté le 14-11-2006 à 17:36:32   

Reply

Marsh Posté le 14-11-2006 à 17:50:21    

zuzulia a écrit :

Bonjour,
 
j'ai un site internet et je voudrais faire un menu avec des boutons. Jusque là aucun soucis. Je crée les image en .jpg que j'insère sur ma page.
 
Maintenant je voudrais que qd on met la souris dessus, l'image change, comme si on appuyé sur le bouton en fait. Donc je crée tjr en .jpg d'autres bouton d'une autre couleur.
 
Mon soucis est que je ne connais pas le code html pour changer une image qd on passe la souris dessus.
 
Pouvais vous m'aider svp?


 
Si ton image est dans une ancre, tu peux utiliser la pseudo class css :hover.
 
(au passage, une seule image que tu mets en position haute ou basse serait mieux)

Reply

Marsh Posté le 14-11-2006 à 18:00:47    

euh... désolé je ne m'y connais pas vraiment en programmation html, est ce que tu pourrais etre plus précis? J'ai un peu de mal à suivre.
 
++

Message cité 1 fois
Reply

Marsh Posté le 14-11-2006 à 18:14:43    

C'est pas de l'html, c'est du CSS...

Reply

Marsh Posté le 14-11-2006 à 18:16:12    

zuzulia a écrit :

euh... désolé je ne m'y connais pas vraiment en programmation html, est ce que tu pourrais etre plus précis? J'ai un peu de mal à suivre.
 
++


 
Eh bien tes "boutons" sont sûrement des liens dans lesquels tu mets des images :

Code :
  1. <a href="http://www.plop.fr" class="bouton">plop</a>


 
en donnant l'image souhaitée en background comme suit dans le css :

Code :
  1. .bouton{
  2.    height:20px; // par exemple
  3.    width:100px;
  4.    background:url(../image_library/plop.jpg) no-repeat;
  5.    background-position:top;
  6. }
  7. .bouton:hover{
  8.    background-position:bottom;
  9. }


 
L'attribut "background" définissant ton image de fond pour ton "bouton" (no-repeat c'est pour lui dire de ne pas se répéter si l'ancre est plus grande que  l'image), et le "background-position" signifiant au navigateur comment placer l'image de fond dans ton ancre (disons que ton image fait 40px de haut avec l'état normal sur les 20 premiers et l'état hover sur les 20 du dessous).
 
C'est mieux comme ça ?

Message cité 1 fois
Reply

Marsh Posté le 14-11-2006 à 20:04:53    

En Javascript, ça s'apelle un rollover --> Google (ou Exalead.fr).

Reply

Marsh Posté le 14-11-2006 à 20:36:01    

C'est un peu plus clair, mais j'ai encore du mal...
 
Voici le code pour mon "bouton" avec le lien :

Code :
  1. <a href="accueil.htm" target="droit"><img src="bouton/btn_accueil.jpg" border="0" width="112" height="20"></a>


 
apres, ben je suis un peu perdu... :??:  désolé...

Message cité 1 fois
Reply

Marsh Posté le 14-11-2006 à 20:39:54    

Oula des frames. Oula pas d'attribut alt sur l'image.

Message cité 1 fois
Reply

Marsh Posté le 15-11-2006 à 12:52:59    

zuzulia a écrit :

C'est un peu plus clair, mais j'ai encore du mal...
 
Voici le code pour mon "bouton" avec le lien :

Code :
  1. <a href="accueil.htm" target="droit"><img src="bouton/btn_accueil.jpg" border="0" width="112" height="20"></a>


 
apres, ben je suis un peu perdu... :??:  désolé...


 
Le code que j'ai donné ne ressemble pourtant pas tout à fait à ça si ?
 

Aghould a écrit :

Code :
  1. <a href="http://www.plop.fr" class="bouton">plop</a>



 
Tu noteras qu'il n'y a pas de balise img dans le code que je t'ai fourni, et ce afin de pouvoir faire bouger l'image de fond, pour obtenir l'effet rollover que tu souhaites.
Pour toi ça donnerait :

Code :
  1. <a href="accueil.htm" target="droit" class="bouton">Accueil</a>


Code :
  1. .bouton{
  2. height:20px;
  3. width:112px;
  4. background:url(bouton/btn_accueil.jpg);
  5. background-position:top;
  6. }
  7. .bouton :hover{
  8. background-position-bottom
  9. }


 
Sachant qu'il faut que tu refasses ton image pour virer le texte et pour rassembler les 2 positions sur la même image.
Par exemple tu auras un rectangle de 112x40 avec la partie haute (les 20 premiers pixels) en rouge et la partie du bas en rose.
 
N'ayant pas accès à mon ftp perso au boulo, je ne peux pas illustrer mon propos.

Reply

Marsh Posté le 15-11-2006 à 18:41:46    

Désole j'ai vraiment du mal à suivre là.
 
Déjà pour mon lien sur la page, ça c'est bon y a pas de soucis.
Par contre le 2ème code cad :

Code :
  1. .bouton{
  2. height:20px;
  3. width:112px;
  4. background:url(bouton/btn_accueil.jpg);
  5. background-position:top;
  6. }
  7. .bouton :hover{
  8. background-position-bottom
  9. }

Je ne sais pas ou je dois le mettre. Si j'ai bien compris ce n'est pas de l'html, mais du css, mais je ne sais pas du tout m'en servir...
 
désolé :sweat:  
vous pouvez essayer de m'expliquer encore un peu svp?

Message cité 1 fois
Reply

Marsh Posté le 15-11-2006 à 18:41:46   

Reply

Marsh Posté le 16-11-2006 à 03:17:32    

FlorentG a écrit :

Oula des frames. Oula pas d'attribut alt sur l'image.


Ca sert à rien l'accessibilité, c'est pas prévu avant le web 3.0 :o

Reply

Marsh Posté le 16-11-2006 à 10:32:50    

zuzulia a écrit :

Désole j'ai vraiment du mal à suivre là.
 
Déjà pour mon lien sur la page, ça c'est bon y a pas de soucis.
Par contre le 2ème code cad :

Code :
  1. .bouton{
  2. height:20px;
  3. width:112px;
  4. background:url(bouton/btn_accueil.jpg);
  5. background-position:top;
  6. }
  7. .bouton :hover{
  8. background-position-bottom
  9. }

Je ne sais pas ou je dois le mettre. Si j'ai bien compris ce n'est pas de l'html, mais du css, mais je ne sais pas du tout m'en servir...
 
désolé :sweat:  
vous pouvez essayer de m'expliquer encore un peu svp?


 
Le CSS permet de mettre en page les informations que tu as codées en HTML. Tu peux le mettre dans un fichier à part ou dans le <head> à l'intérieur des balises <style type="text/css">.
 
Je te conseillerai de te renseigner via google avant de poursuivre plus avant : http://www.google.fr/search?hl=fr& [...] ogle&meta= (1e lien)

Reply

Marsh Posté le 16-11-2006 à 14:10:22    

Merci pour ce lien, je comprends beaucoup mieux là :)
 
Mais c'est pas encore ça.
voici l'adresse ou vous pouvez trouver mes boutons :  
http://3a66.free.fr/site%202007/menu.htm
 
comme vous pouvez le voir ce n'est tres joli...

Message cité 1 fois
Message édité par zuzulia le 16-11-2006 à 14:25:07
Reply

Marsh Posté le 16-11-2006 à 14:54:22    

zuzulia a écrit :

Merci pour ce lien, je comprends beaucoup mieux là :)
 
Mais c'est pas encore ça.
voici l'adresse ou vous pouvez trouver mes boutons :  
http://3a66.free.fr/site%202007/menu.htm
 
comme vous pouvez le voir ce n'est tres joli...


 

Citation :

</head>
 
 
<p>a.bouton:link{ width:112px; height:20px; text-decoration:none;
color:#FFFF00; text-align:center; font-weight:bold;
background-color:#800000;
background-image:url(bouton.jpg)padding:5px} a.bouton:visited{
width:112px; height:20px; text-decoration:none; color:#FFFF00;
text-align:center; font-weight:bold; background-color:#800000;
background-image:url(bouton.jpg) padding:5px} a.bouton:hover{
width:112px; height:20px; text-decoration:none; color:white;
text-align:center; font-weight:bold; background-color:#0000FF;
background-image:url(bouton.jpg); padding:5px}
.bouton{text-align:center;padding:5px;}</style> </p>


 
J'ai envie de te dire de lire plus attentivement les tutoriaux. Quoiqu'il en soit, il te faut remplacer cette portion par :

Code :
  1. .bouton{
  2. width:112px;
  3. height:20px;
  4. text-decoration:none;
  5. color:#FFFF00;
  6. text-align:center;
  7. font-weight:bold;
  8. background-color:#800000;
  9. background-image:url(bouton.jpg);
  10. padding:5px;
  11. }
  12. .bouton :hover{
  13. background-image:url(bouton_hover.jpg); // si tu as la même image pour le coup, ça ne va pas avoir beaucoup d'effet
  14. }
  15. </style>
  16. </head>


 
et dans le corps de ta page :

Code :
  1. <p align="left" class="bouton"><a href="accueil.htm"
  2. target="droit" class="bouton">Accueil</a> </p>


deviendra :  

Code :
  1. <ul><li><a href="accueil.htm" target="droit" class="bouton">Accueil</a></li>


(sachant qu'un menu est souvent considéré comme une liste de liens)

Reply

Marsh Posté le 16-11-2006 à 17:05:22    

Merci, ça fonctionne enfin :)
 
Juste encore un truc...
Sur mozilla le bouton est coupé, il prends juste la taille du texte.
Y a t il un moyen pour que le bouton fasse une taille fixe ?  
 
++

Message cité 1 fois
Reply

Marsh Posté le 16-11-2006 à 17:29:35    

zuzulia a écrit :

Merci, ça fonctionne enfin :)
 
Juste encore un truc...
Sur mozilla le bouton est coupé, il prends juste la taille du texte.
Y a t il un moyen pour que le bouton fasse une taille fixe ?  
 
++


 
Il y a effectivement un moyen : ton lien est considéré par défaut comme un élément "inline" et n'affiche donc que son contenu. Pour pallier à ce "problème", il te suffit de lui donner le type "block".

Code :
  1. .bouton{
  2. display:block;
  3. }

Reply

Marsh Posté le 16-11-2006 à 17:31:55    

Merci beaucoup :D


Message édité par zuzulia le 16-11-2006 à 17:42:20
Reply

Marsh Posté le 16-11-2006 à 17:45:16    

Encore un petit truc, je suis arriver à réduire la taille du texte, mais je ne sais pas comment faire pour le centrer en hauteur sur le bouton...
 
Comment je peux faire svp?
 
++

Reply

Marsh Posté le 17-11-2006 à 02:59:56    

Rajoute

Code :
  1. margin: 0;
  2. padding: 5px;
  3. font: 12px/20px verdana;


voir si le résultat est ce que tu veux :)


Message édité par leflos5 le 17-11-2006 à 03:16:30
Reply

Marsh Posté le 17-11-2006 à 09:45:55    

Merci :)
 
C'est trop bien comme ça maintenant
 
encore merci pour tout.

Reply

Marsh Posté le 28-11-2006 à 23:14:10    

Salut à tous  :)  
 
Juste une petite question  :whistle:  
 
Je n'arrive pas à afficher correctement des boutons (qui sont des images en fait) qui lorsque l'on passe la souris dessus, change d'apparence. En fait j'ai que le bouton 'accueil' qui apparait, donc le 1er, pour les autres, rien n'apparait. Bref, voici le code  :D  :
 
Dans le fichier index :
 

Code :
  1. <a href="index.php?page=accueil" class="image"></a></p>
  2. <a href="index.php?page=modeles" class="image1"></a></p>
  3. <a href="index.php?page=contacts" class="image2"></a></p>


 
Dans mon fichier .css
 

Code :
  1. .image {
  2.      width: 112px;
  3.      height: 38px;
  4.      background: url(boutons/accueil.gif);
  5.      border: 0;
  6. }
  7. .image:hover {
  8.      background: url(boutons/accueil1.gif);
  9. }
  10. .image1 {
  11.      width: 134px;
  12.      height: 36px;
  13.      background: url(boutons/modeles.gif);
  14.      border: 0;
  15. }
  16. .image1:hover {
  17.      background: url(boutons/modeles1.gif);
  18. }
  19. .image2 {
  20.      width: 166px;
  21.      height: 36px;
  22.      background: url(boutons/contacts.gif);
  23.      border: 0;
  24. }
  25. .image2:hover {
  26.      background: url(boutons/contacts1.gif);
  27. }


 
Et donc, j'ai seulement le bouton accueil qui apparait et les autres sont inexistants  :sweat:  
Si quelqu'un voit mon erreur  :hello:  
merci d'avance  :jap:

Reply

Marsh Posté le 28-11-2006 à 23:34:28    

Déjà tes <a> sont vides, ce qui est vraiment pas bien :o

Reply

Marsh Posté le 28-11-2006 à 23:49:51    

Je peut y mettre quoi dedans  :sweat: Le liens de l'image avec ses attributs  :??:  
 
C'est étrange quand même que j'ai un bouton qui s'affiche et qui est fonctionnel (il change bien d'état quand je passe ma souris dessus) et que les autres n'apparaissent pas du tout  :pt1cable:  
 
J'avou que je comprend pas trop la  :(

Reply

Marsh Posté le 28-11-2006 à 23:52:11    

Il faut mettre un texte (accessibilité, sifr, toussa...)

Reply

Marsh Posté le 29-11-2006 à 00:09:55    

Au risque de passer pour un boulet, si je met un texte dans mes <a> comme suis :
 

Code :
  1. <a href="index.php?page=accueil" class="image">accueil</a></p>
  2. <a href="index.php?page=modeles" class="image1">modeles</a></p>
  3. <a href="index.php?page=contacts" class="image2">contacts</a></p>


 
et bien ca m'affiche les mots,accueil, modeles contacts mais toujours pas mes boutons images   :heink:  
 
A moins que j'ai pas compris la question  :lol:       :sweat:

Reply

Marsh Posté le 29-11-2006 à 00:38:43    

Bon ba j'aurais du me taire ... :pfff:  
 
Mon .css était pas dans le bon dossier  :whistle:  
 
Puis avec ca :  
 

Code :
  1. <a href="index.php?page=accueil" class="image"></a></p>
  2. <a href="index.php?page=modeles" class="image1"></a></p>
  3. <a href="index.php?page=contacts" class="image2"></a></p>


 
et ca :
 

Code :
  1. .image{
  2.      width: 112px;
  3.      height: 38px;
  4.      background: url(boutons/accueil.gif);
  5.      display:block;
  6.      border: 0;
  7. }
  8. .image:hover {
  9.      background: url(boutons/accueil1.gif);
  10. }
  11. .image1{
  12.      width: 134px;
  13.      height: 36px;
  14.      background: url(boutons/modeles.gif);
  15.      display:block;
  16.      border: 0;
  17. }
  18. .image1:hover {
  19.      background: url(boutons/modeles1.gif);
  20. }
  21. .image2{
  22.      width: 166px;
  23.      height: 36px;
  24.      background: url(boutons/contacts.gif);
  25.      display:block;
  26.      border: 0;
  27. }
  28. .image2:hover {
  29.      background: url(boutons/contacts1.gif);
  30. }


 
Ca marche nikel  :sweat:  
 
Il me manquait display:block; aussi  :o  
 
Par contre j'ai toujours rien dans mes <a>, pourtant ca marche  :??:  
 
c'est grave ?
 
Merci de ton aide Florent

Reply

Marsh Posté le 29-11-2006 à 07:57:53    

Ca fonctionne oui, mais c'est effectivement grave :D Parce qu'il n'y a pas d'alternative. Si tu désactives les images, les css, si tu utilises un lecteur d'écran parce que t'es malvoyant, si t'es le robot de Google, ben tu verra pas le texte :(

Reply

Marsh Posté le 29-11-2006 à 17:10:52    

Hum ok c'est grave en effet  :sweat:  
 
Par contre quand je met un texte <a href="index.php?page=accueil" class="image"> ICI </a></p> et bien j'ai ce texte qui apparait au dessus de l'image  :pfff:  
C'est pas top quand même  :(  
Une solution?

Reply

Marsh Posté le 29-11-2006 à 17:12:59    

Je sais pas où t'as hiberné, mais ça fait le sujet de dizaines d'articles :D :D :D

Reply

Marsh Posté le 29-11-2006 à 22:33:25    

A cherché  :o  
 
A pas trouvé  :sweat:  
 
Faudra pas être malvoyant pour visiter mon site  :o

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed