boutons pour site internet

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : boutons pour site internet

zuzulia

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

Publicité

Aghould

zuzulia a écrit :

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)

zuzulia

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

FlorentG

Unité de Masse

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

Aghould

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 :

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

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

Code :

.bouton{
height:20px; // par exemple
width:100px;
background:url(../image_library/plop.jpg) no-repeat;
background-position:top;
}
.bouton:hover{
background-position:bottom;
}

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

Paracetamol

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

zuzulia

C'est un peu plus clair, mais j'ai encore du mal...

Voici le code pour mon "bouton" avec le lien :

Code :

<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

FlorentG

Unité de Masse

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

Message cité 1 fois

Aghould

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 :

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

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

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

Code :

.bouton{
height:20px;
width:112px;
background:url(bouton/btn_accueil.jpg);
background-position:top;
}
.bouton :hover{
background-position-bottom
}

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.

zuzulia

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 :

.bouton{
height:20px;
width:112px;
background:url(bouton/btn_accueil.jpg);
background-position:top;
}
.bouton :hover{
background-position-bottom
}

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

Publicité

leflos5

On est ou on est pas :)

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

Aghould

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 :

.bouton{
height:20px;
width:112px;
background:url(bouton/btn_accueil.jpg);
background-position:top;
}
.bouton :hover{
background-position-bottom
}

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)

zuzulia

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

Aghould

zuzulia a écrit :

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 :

.bouton{
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;
}
.bouton :hover{
background-image:url(bouton_hover.jpg); // si tu as la même image pour le coup, ça ne va pas avoir beaucoup d'effet
}
</style>
</head>

et dans le corps de ta page :

Code :

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

deviendra :

Code :

<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)

zuzulia

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

Aghould

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 :

.bouton{
display:block;
}

zuzulia

Merci beaucoup

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

zuzulia

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?

++

leflos5

On est ou on est pas :)

Rajoute

Code :

margin: 0;
padding: 5px;
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

zuzulia

Merci

C'est trop bien comme ça maintenant

encore merci pour tout.

matclio

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 :

Dans le fichier index :

Code :

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

Dans mon fichier .css

Code :

.image {
width: 112px;
height: 38px;
background: url(boutons/accueil.gif);
border: 0;
}
.image:hover {
background: url(boutons/accueil1.gif);
}
.image1 {
width: 134px;
height: 36px;
background: url(boutons/modeles.gif);
border: 0;
}
.image1:hover {
background: url(boutons/modeles1.gif);
}
.image2 {
width: 166px;
height: 36px;
background: url(boutons/contacts.gif);
border: 0;
}
.image2:hover {
background: url(boutons/contacts1.gif);
}

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:

FlorentG

Unité de Masse

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

matclio

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

FlorentG

Unité de Masse

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

matclio

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

Code :

<a href="index.php?page=accueil" class="image">accueil</a></p>
<a href="index.php?page=modeles" class="image1">modeles</a></p>
<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:

matclio

Bon ba j'aurais du me taire ... :pfff:

Mon .css était pas dans le bon dossier :whistle:

Puis avec ca :

Code :

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

et ca :

Code :

.image{
width: 112px;
height: 38px;
background: url(boutons/accueil.gif);
display:block;
border: 0;
}
.image:hover {
background: url(boutons/accueil1.gif);
}
.image1{
width: 134px;
height: 36px;
background: url(boutons/modeles.gif);
display:block;
border: 0;
}
.image1:hover {
background: url(boutons/modeles1.gif);
}
.image2{
width: 166px;
height: 36px;
background: url(boutons/contacts.gif);
display:block;
border: 0;
}
.image2:hover {
background: url(boutons/contacts1.gif);
}

Ca marche nikel :sweat:

Il me manquait display:block; aussi

Par contre j'ai toujours rien dans mes <a>, pourtant ca marche :??:

c'est grave ?

Merci de ton aide Florent

FlorentG

Unité de Masse

Ca fonctionne oui, mais c'est effectivement grave 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

matclio

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?

FlorentG

Unité de Masse

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

matclio

A cherché

A pas trouvé :sweat:

Faudra pas être malvoyant pour visiter mon site

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

boutons pour site internet

Sujets relatifs
[C# .Net] Localisation pour site multilingue	combien coute un site web ???
[php] c'est quoi ça? --> www.site.com/lien.php?www.site2.fr	Obtenir adresse ip externe (internet) de la passerelle ? image inside!
Mini lecteur windows media player 11 pour un site web	Outil de creation de site
Savoir si un site existe ou pas	Mise 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

Page générée en 0.112 secondes