Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1528 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  boutons pour site internet

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

boutons pour site internet

n°1475348
zuzulia
Posté le 14-11-2006 à 17:36:32  profilanswer
 

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
mood
Publicité
Posté le 14-11-2006 à 17:36:32  profilanswer
 

n°1475360
Aghould
Posté le 14-11-2006 à 17:50:21  profilanswer
 

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)

n°1475364
zuzulia
Posté le 14-11-2006 à 18:00:47  profilanswer
 

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
n°1475374
FlorentG
Unité de Masse
Posté le 14-11-2006 à 18:14:43  profilanswer
 

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

n°1475375
Aghould
Posté le 14-11-2006 à 18:16:12  profilanswer
 

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
n°1475407
Paracetamo​l
Posté le 14-11-2006 à 20:04:53  profilanswer
 

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

n°1475426
zuzulia
Posté le 14-11-2006 à 20:36:01  profilanswer
 

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
n°1475429
FlorentG
Unité de Masse
Posté le 14-11-2006 à 20:39:54  profilanswer
 

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

Message cité 1 fois
n°1475772
Aghould
Posté le 15-11-2006 à 12:52:59  profilanswer
 

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.

n°1476010
zuzulia
Posté le 15-11-2006 à 18:41:46  profilanswer
 

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
mood
Publicité
Posté le 15-11-2006 à 18:41:46  profilanswer
 

n°1476154
leflos5
On est ou on est pas :)
Posté le 16-11-2006 à 03:17:32  profilanswer
 

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

n°1476226
Aghould
Posté le 16-11-2006 à 10:32:50  profilanswer
 

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)

n°1476385
zuzulia
Posté le 16-11-2006 à 14:10:22  profilanswer
 

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
n°1476458
Aghould
Posté le 16-11-2006 à 14:54:22  profilanswer
 

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)

n°1476696
zuzulia
Posté le 16-11-2006 à 17:05:22  profilanswer
 

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
n°1476722
Aghould
Posté le 16-11-2006 à 17:29:35  profilanswer
 

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. }

n°1476725
zuzulia
Posté le 16-11-2006 à 17:31:55  profilanswer
 

Merci beaucoup :D


Message édité par zuzulia le 16-11-2006 à 17:42:20
n°1476742
zuzulia
Posté le 16-11-2006 à 17:45:16  profilanswer
 

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?
 
++

n°1476933
leflos5
On est ou on est pas :)
Posté le 17-11-2006 à 02:59:56  profilanswer
 

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
n°1477019
zuzulia
Posté le 17-11-2006 à 09:45:55  profilanswer
 

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

n°1483416
matclio
Posté le 28-11-2006 à 23:14:10  profilanswer
 

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:

n°1483423
FlorentG
Unité de Masse
Posté le 28-11-2006 à 23:34:28  profilanswer
 

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

n°1483431
matclio
Posté le 28-11-2006 à 23:49:51  profilanswer
 

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  :(

n°1483432
FlorentG
Unité de Masse
Posté le 28-11-2006 à 23:52:11  profilanswer
 

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

n°1483437
matclio
Posté le 29-11-2006 à 00:09:55  profilanswer
 

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:

n°1483442
matclio
Posté le 29-11-2006 à 00:38:43  profilanswer
 

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

n°1483458
FlorentG
Unité de Masse
Posté le 29-11-2006 à 07:57:53  profilanswer
 

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 :(

n°1483861
matclio
Posté le 29-11-2006 à 17:10:52  profilanswer
 

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?

n°1483865
FlorentG
Unité de Masse
Posté le 29-11-2006 à 17:12:59  profilanswer
 

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

n°1483975
matclio
Posté le 29-11-2006 à 22:33:25  profilanswer
 

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

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  boutons pour site internet

 

Sujets relatifs
[C# .Net] Localisation pour site multilinguecombien coute un site web ???
[php] c'est quoi ça? --> www.site.com/lien.php?www.site2.frObtenir adresse ip externe (internet) de la passerelle ? image inside!
Mini lecteur windows media player 11 pour un site webOutil de creation de site
Savoir si un site existe ou pasMise en place du MVC sur un site : problème de visibilité de variables
Le C et Internet ! Aide pr des boutons pr nouveau site internet
Plus de sujets relatifs à : boutons pour site internet

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.102 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR