Bouton rollover CSS

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

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>

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>

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

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

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/upload/bouton%20rouge%201-0%20telecharger.png);background-repeat: 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"

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

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

salut,

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

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

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

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/upload/bouton%20rouge%201-0%20telecharger.png);background-repeat: 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

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

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

merci d'avance

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