Bouton rollover CSS [Résolu]

tyboxp 21Messages postés 19 décembre 2007Date d'inscription - Dernière réponse le 26 mai 2008 à 00:35

Salut,
j'aimerais que vous m'aidez à faire plusieur bouton rollovers horizotal et vertical CSS ( SVP )
( je ne suis pas arriver a faire de multip bouton rollover et l'animation ne fonctionne pas quand je survole les bouton, voici le code de ma création )
<html>
<head>
</head>
<body>
<a href="#"
onmouseover="bouton.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png';"
onmouseout="bouton.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png';"><img
style=""
src="http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png"
name="bouton" border="0"></a>
</body>
</html>

Bouton rollover CSS »

Suggestions

Bouton rollover CSS
Bouton j'aime facebook » Fiches pratiques
Bouton html (Résolu) » Forum
Css class » Articles
Commentaire css » Articles
Centrer image css (Résolu) » Forum
Code couleur css » Articles
Link css » Articles
Css align center (Résolu) » Forum
Balises css (Résolu) » Forum

Plus

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 3 mars 2008 à 13:40

Le code bouton rovoller comme ceci :

<a href=" LIENS DU CHEMIN DU BOUTON "
onmouseover="bouton.src = ' IMAGE SURVOLE AVEC LA SOURIS ' ;"
onmouseout="bouton.src = ' IMAGE AU REPOS ' ;">
<img style="" src=" IMAGE AU REPOS " name="bouton" border="0"></a>

Maintenant si tu veut mettre d'autres boutons rollovers a la suite :
faudra changer son "Nom" comme ceci.

<a href=" LIENS DU CHEMIN DU BOUTON "
onmouseover="bouton2.src = ' IMAGE SURVOLE AVEC LA SOURIS ';"
onmouseout="bouton2.src =' IMAGE AU REPOS ';">
<img style="" src=" IMAGE AU REPOS " name="bouton2" border="0"></a>

J'ai accompagner les boutons rollovers avec <table></table> mais il fonctionne aussi sans <table></table>
a vous de voir ce que vous voulez faire réelement avec les boutons rollovers ;)

Ajouter un commentaire

BartWadela - 3 mars 2008 à 14:49

jvois pas trop ce que le .css vient faire ici ?

jdois etre fatigué ^^

tyboxp - 3 mars 2008 à 16:16

Le " CSS" pour moi :

En faite le "CSS" est un "style code légé",
si je me trompe pas ^^ ( je debut en "CSS" )

Je trouve que tu fait beaucoup de chose jolie et soigneux avec le "CSS" quand tu le maitrise,
j'ai deja vue et meme testé certain "CSS" comme le liens que tu a mis BartWadela.

En faite j'éssais de trouver un "style de code" moin long et les attribution qu'on peux donner dans <body></body> grace au "CSS".

Je te rassure aussi,
il n'y a pas que toi qui est fatiguer ^^,
peut etre que tout ses effort seront pour rien
et en tout cas j'essais de m'éclairer la dessus et vous tenir au courant. -_-"

pour l'instal je travail la dessus voici le liens :
http://mvp.wiserways.com/tutorials/rollovers/index.html

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 2 mars 2008 à 21:44

voila un autres en hirozontal :

<TABLE>
<TR>
<TD>
<a href="#" onmouseover="ACCEUIL.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png';" onmouseout="ACCEUIL.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png" name="ACCEUIL" border="0"></a>
</TD>
<TD>
<a href="#" onmouseover="FORUM.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20forum.png';" onmouseout="FORUM.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20forum.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20forum.png" name="FORUM" border="0"></a>
</TD>
<TD>
<a href="#" onmouseover="PHOTO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20photo.png';" onmouseout="PHOTO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20photo.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20photo.png" name="PHOTO" border="0"></a>
</TD>
<TD>
<a href="#" onmouseover="VIDEO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20video.png';" onmouseout="VIDEO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20video.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20video.png" name="VIDEO" border="0"></a>
</TD>
<TD>
<a href="#" onmouseover="TELECHARGER.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20telecharger.png';" onmouseout="TELECHARGER.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20telecharger.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20telecharger.png" name="TELECHARGER" border="0"></a>
</TD>
<TD>
<a href="#" onmouseover="TCHAT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20tchat.png';" onmouseout="TCHAT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20tchat.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20tchat.png" name="TCHAT" border="0"></a>
</TD>
<TD>
<a href="#" onmouseover="SUIVANT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20suivant.png';" onmouseout="SUIVANT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20suivant.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20suivant.png" name="SUIVANT" border="0"></a>
</TD>
<TD>
<a href="#" onmouseover="RETOUR.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20retour.png';" onmouseout="RETOUR.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20retour.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20retour.png" name="RETOUR" border="0"></a>
</TD>
</TR>
</TABLE>

Ajouter un commentaire

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 2 mars 2008 à 16:54

S'il vous plait, Help me please ???

Ajouter un commentaire

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 2 mars 2008 à 21:43

voila ce que je voulais faire en vertical :

<TABLE>
<TR>
<TD>
<a href="#" onmouseover="ACCEUIL.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png';" onmouseout="ACCEUIL.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png" name="ACCEUIL" border="0"></a>
</TD>
</TR>
<TR>
<TD>
<a href="#" onmouseover="FORUM.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20forum.png';" onmouseout="FORUM.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20forum.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20forum.png" name="FORUM" border="0"></a>
</TD>
</TR>
<TR>
<TD>
<a href="#" onmouseover="PHOTO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20photo.png';" onmouseout="PHOTO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20photo.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20photo.png" name="PHOTO" border="0"></a>
</TD>
</TR>
<TR>
<TD>
<a href="#" onmouseover="VIDEO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20video.png';" onmouseout="VIDEO.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20video.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20video.png" name="VIDEO" border="0"></a>
</TD>
</TR>
<TR>
<TD>
<a href="#" onmouseover="TELECHARGER.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20telecharger.png';" onmouseout="TELECHARGER.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20telecharger.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20telecharger.png" name="TELECHARGER" border="0"></a>
</TD>
</TR>
<TR>
<TD>
<a href="#" onmouseover="TCHAT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20tchat.png';" onmouseout="TCHAT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20tchat.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20tchat.png" name="TCHAT" border="0"></a>
</TD>
</TR>
<TR>
<TD>
<a href="#" onmouseover="SUIVANT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20suivant.png';" onmouseout="SUIVANT.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20suivant.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20suivant.png" name="SUIVANT" border="0"></a>
</TD>
</TR>
<TR>
<TD>
<a href="#" onmouseover="RETOUR.src = 'http://snieliteam.info/upload/bouton%20rouge%201-1%20retour.png';" onmouseout="RETOUR.src = 'http://snieliteam.info/upload/bouton%20rouge%201-0%20retour.png';"><img style="" src="http://snieliteam.info/upload/bouton%20rouge%201-0%20retour.png" name="RETOUR" border="0"></a>
</TD>
</TR>
</TABLE>

Ajouter un commentaire

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 2 mars 2008 à 21:54

je n'est pas encore trouver comment effectuer ses 8 boutons en CSS
j'espere que je trouverais mais je conte sur vous -_-"

Ajouter un commentaire

Afficher les 4 commentaires

tyboxp - 3 mars 2008 à 01:29

Salut BartWadela :)

Ce que j'appele le bouton rollover :
est une sorte de "bouton image hébergé 1"
et au survole de ta souris dessus le fait changer sur un autres "bouton image hébergé 2".

j'espere avoir repondu à ta question.

BartWadela - 3 mars 2008 à 12:23

un truc comme ça ?

<img src="image_de_base.ext" OnMouseOover="image_qd_souris_dessus.ext" OnMouseOut="image_de_base.ext"> </img>

jsui pas sur à 100% de la syntaxe du code mais normalement ca doit etre ça

BartWadela › tyboxp - 3 mars 2008 à 12:28

<a href="#">
<img src="http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png"
name="bouton" border="0" OnMouseOver="http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png" OnMouseOut="http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png">/!\ Cliquez ici /!\</a>

par contre dans les noms de tes images evite les accents ; espace et caracteres spéciaux

au lieu d'avoir :

bouton rouge 1-1 accueil.png

mets plutot

bouton_rouge_1-1_accueil.png

ou même

BR1.acc.png

plus c'est court moins tu te feras chier a coder apres

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 3 mars 2008 à 13:51

Voici un liens pour faire vos boutons
sans passer par des "logiciels spéciaux images"
http://www.glassybuttons.com/buttonmill/recent.php?start=15&buttonsperpage=15

En suite il manquera plu qu'a les hébergés vos images
je vous met un "liens hébergeur images" vous trouverez de la pub mais il fonctionne très bien :
http://snieliteam.info/log.php

je suis toujours en recherche en mode CSS et je vous tiens au courant si je trouve comme l'éffectue ces code en CSS mais je conte sur vous -_-"

Help me !!!

Ajouter un commentaire

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 3 mars 2008 à 23:57

Les 8 boutons rollover en CSS vertical :

<style>

a.bouton1
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png);background-repeat: no-repeat;}
a.bouton1:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png);}

a.bouton2
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20forum.png);background-repeat: no-repeat;}
a.bouton2:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20forum.png);}

a.bouton3
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20photo.png);background-repeat: no-repeat;}
a.bouton3:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20photo.png);}

a.bouton4
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20video.png);background-repeat: no-repeat;}
a.bouton4:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20video.png);}

a.bouton5
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/... no-repeat;}
a.bouton5:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20telecharger.png);}

a.bouton6
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20tchat.png);background-repeat: no-repeat;}
a.bouton6:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20tchat.png);}

a.bouton7
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20suivant.png);background-repeat: no-repeat;}
a.bouton7:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20suivant.png);}

a.bouton8
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20retour.png);background-repeat: no-repeat;}
a.bouton8:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20retour.png);}

</style>

<a class="bouton1" title="ACCEUIL" href="#"></a>
<a class="bouton2" title="FORUM" href="#"></a>
<a class="bouton3" title="PHOTO" href="#"></a>
<a class="bouton4" title="VIDEO" href="#"></a>
<a class="bouton5" title="TELECHARGER" href="#"></a>
<a class="bouton6" title="TCHAT" href="#"></a>
<a class="bouton7" title="SUIVANT" href="#"></a>
<a class="bouton8" title="RETOUR" href="#"></a>

Vous remarquerez quand vous passerais la souris sur les bouton rollovers CSS, coté de votre "icone fleche" de souris il affichera aussi le nom du bouton ;) ceci est dans la comande "title"

Ajouter un commentaire

Réponse

faboons 124Messages postés 12 février 2008Date d'inscription 21 novembre 2011Dernière intervention 4 mars 2008 à 00:04

<Hors sujet>
Salut, je tiens juste à préciser que malgré sa prononciation Accueil ne s'écrit pas Acceuil.
Je te le précise non pas parce-que je suis spécialiste en orthographe mais parce-que c'est ton premier bouton et du coup la première impression que l'on a du site et s'il y a une faute...
</Hors sujet>

Voilà @ pluche.

Ajouter un commentaire - Site web

tyboxp - 4 mars 2008 à 00:20

<moi aussi hors sujet >

"Mdrr" a ce moment la, je pensais peut etre a écureuil et j'en suis désoler

merci de l'info :P

ps: je ne me cache pas de mes fautes d'orthographe et ce n'est pas sa qui arretera la terre de tourné :)

</moi aussi hors sujet>

+++ Faboons :)

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 4 mars 2008 à 00:08

Me manque a cherche comment mettre mes 8 boutons rollovers CSS en horizontal
et ce ne doit etre pas compliquer.
Doit bien avoir une commande qui permet de les mettre en horizontal je pense -_-"

Help me :)

Ajouter un commentaire

Réponse

Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 4 mars 2008 à 00:26

salut,

pour des menus en CSS, je te propose :
• Listamatic
• CSS Play

dans le lot, tu devrais trouver ton bonheur !!!
-;o)

Ajouter un commentaire - Site web

tyboxp - 4 mars 2008 à 00:33

Salut Dalida ;)
merci je vais voir de suite si je trouve mon bohneur :P

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 4 mars 2008 à 00:54

pour mettre mes 8 bouton rollovers CSS en horizontal :

EXEMPLE /1

a.bouton1
{display: block;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png);background-repeat: no-repeat;}
a.bouton1:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png);}

EXEMPLE /2

a.bouton1
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png);background-repeat: no-repeat;}
a.bouton1:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png);}

voila sa fu un amusement pour moi et j'espere aussi pour vous :)

Ajouter un commentaire

Réponse

tyboxp 21Messages postés 19 décembre 2007Date d'inscription 4 mars 2008 à 00:59

Les 8 boutons rollovers CSS en horizontal final

<style>

a.bouton1
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20acceuil.png);background-repeat: no-repeat;}
a.bouton1:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20acceuil.png);}

a.bouton2
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20forum.png);background-repeat: no-repeat;}
a.bouton2:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20forum.png);}

a.bouton3
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20photo.png);background-repeat: no-repeat;}
a.bouton3:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20photo.png);}

a.bouton4
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20video.png);background-repeat: no-repeat;}
a.bouton4:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20video.png);}

a.bouton5
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/... no-repeat;}
a.bouton5:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20telecharger.png);}

a.bouton6
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20tchat.png);background-repeat: no-repeat;}
a.bouton6:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20tchat.png);}

a.bouton7
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20suivant.png);background-repeat: no-repeat;}
a.bouton7:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20suivant.png);}

a.bouton8
{display: global;width: 150px; height: 50px;
background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-0%20retour.png);background-repeat: no-repeat;}
a.bouton8:hover {background-image: url(http://snieliteam.info/upload/bouton%20rouge%201-1%20retour.png);}

</style>

<a class="bouton1" title="ACCEUIL" href="#"></a>
<a class="bouton2" title="FORUM" href="#"></a>
<a class="bouton3" title="PHOTO" href="#"></a>
<a class="bouton4" title="VIDEO" href="#"></a>
<a class="bouton5" title="TELECHARGER" href="#"></a>
<a class="bouton6" title="TCHAT" href="#"></a>
<a class="bouton7" title="SUIVANT" href="#"></a>
<a class="bouton8" title="RETOUR" href="#"></a>

Ps: je vous remerci d'avoir mis la main a la patte,
j'espere avoir aider certain pour leurs "boutons images rollover CSS"

A bientot

Ajouter un commentaire

Réponse

kirjava 24 mai 2008 à 00:43

Bonjour à tous,

je me permet de faire remonter ce sujet car j'ai un problème similaire :

j'ai créé un effet de rollover sur mon menu horizontal, et je n'arrive pas à aligner les images de façon horizontale !!!! En reprenant exactement le script de tyboxp ça marche sur IE mais pas sur Firefox !! Firefox fait disparaitre les images à partir du moment où on enlève les display:block;

J'ai essayé des dizaines de trucs, rien n'y fait....

S'y quelqu'un à une idée, merci d'avance

Ajouter un commentaire

BartWadela - 25 mai 2008 à 19:57

bonsoir,

fais-voir l'url stp ??

Réponse

kirjava 25 mai 2008 à 19:59

http://kirjava83.free.fr/rca/site/test

merci d'avance

Ajouter un commentaire

BartWadela - 25 mai 2008 à 20:20

baah la jsui sur firefox 2.0.0.14, j'ai bein 4 boutons alignes a la base, et qd mon curseur passe dessus, le fond devient bleuté (c'est joli d'ailleurs..) et il reste bien alignés.

qu'est-ce qui cloche ??

Réponse

kirjava 26 mai 2008 à 00:35

oups je suis vraiment désolé, j'avais posté différentes questions sur différents forums, et j'ai pas réalisé que j'avais finalement réussi à régler le problème de rollover (merci pour le compliment ^^)

maintenant c'est mon header qui ne veut pas rester fixe sous IE, mais bon c'est une autre histoire...

merci !!!!

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

5 extensions si vous voulez revenir à l'ancien Facebook

5 extensions si vous voulez revenir à l'ancien Facebook

Vous n'aimez pas le lifting de Facebook ? Le site Mashable propose cinq étapes pour revenir à l'ancienne présentation du réseau social.

Les interviews exclusives

Google Alertes

"un outil vraiment simple à la portée de tous"

Toutes les interviews

Collection CommentÇaMarche.net

Jean-Marie Cocheteau

Tout sur les meilleures extensions pour Firefox et IE : Étendre les possibilités de son navigateur favori

Plus de livres

Bouton rollover CSS [Résolu]