Bouton rollover CSS
Résolu
tyboxp
Messages postés
21
Date d'inscription
Statut
Membre
Dernière intervention
-
kirjava -
kirjava -
A voir également:
- Bouton rollover CSS
- Bouton reinitialisation pc - Guide
- Diagnostic bouton photo - Accueil - Outils
- Bouton on off ✓ - Forum Loisirs / Divertissements
- Réinitialiser chromecast sans bouton - Guide
- Bouton on/off comment savoir - Forum Word
15 réponses
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 ;)
<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 ;)
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>
<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>
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>
<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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
je n'est pas encore trouver comment effectuer ses 8 boutons en CSS
j'espere que je trouverais mais je conte sur vous -_-"
j'espere que je trouverais mais je conte sur vous -_-"
<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.pngmets plutot
bouton_rouge_1-1_accueil.pngou même
BR1.acc.pngplus c'est court moins tu te feras chier a coder apres
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 !!!
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"
<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.
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 :)
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 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 :)
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
<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
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
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 !!!!
maintenant c'est mon header qui ne veut pas rester fixe sous IE, mais bon c'est une autre histoire...
merci !!!!
jdois etre fatigué ^^
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