Bouton rollover CSS
Résolu/Fermé
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
-
26 févr. 2008 à 18:01
kirjava - 26 mai 2008 à 00:35
kirjava - 26 mai 2008 à 00:35
A voir également:
- Bouton rollover CSS
- Réinitialiser chromecast sans bouton - Guide
- Bouton reinitialisation pc - Guide
- Hard reset samsung sans bouton home - Guide
- Comment débloquer un bouton enfoncé - Forum Samsung
- Bouton home clavier ✓ - Forum PC portable
15 réponses
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
3 mars 2008 à 13:40
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 ;)
<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 ;)
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
2 mars 2008 à 21:44
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>
<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>
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
2 mars 2008 à 16:54
2 mars 2008 à 16:54
S'il vous plait, Help me please ???
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
2 mars 2008 à 21:43
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>
<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
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
2 mars 2008 à 21:54
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 -_-"
j'espere que je trouverais mais je conte sur vous -_-"
BartWadela
Messages postés
562
Date d'inscription
samedi 7 juillet 2007
Statut
Membre
Dernière intervention
3 février 2010
107
2 mars 2008 à 23:23
2 mars 2008 à 23:23
qu'appele tu "rollover" exactement ??
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
>
BartWadela
Messages postés
562
Date d'inscription
samedi 7 juillet 2007
Statut
Membre
Dernière intervention
3 février 2010
3 mars 2008 à 01:29
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.
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
Messages postés
562
Date d'inscription
samedi 7 juillet 2007
Statut
Membre
Dernière intervention
3 février 2010
107
>
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3 mars 2008 à 12:23
3 mars 2008 à 12:23
un truc comme ça ?
jsui pas sur à 100% de la syntaxe du code mais normalement ca doit etre ç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
Messages postés
562
Date d'inscription
samedi 7 juillet 2007
Statut
Membre
Dernière intervention
3 février 2010
107
>
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3 mars 2008 à 12:28
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.pngmets plutot
bouton_rouge_1-1_accueil.pngou même
BR1.acc.pngplus c'est court moins tu te feras chier a coder apres
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
3 mars 2008 à 13:51
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 !!!
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 !!!
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
3 mars 2008 à 23:57
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/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"
faboons
Messages postés
269
Date d'inscription
mardi 12 février 2008
Statut
Membre
Dernière intervention
22 janvier 2024
50
4 mars 2008 à 00:04
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.
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.
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
4 mars 2008 à 00:20
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 :)
"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 :)
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
4 mars 2008 à 00:08
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 :)
et ce ne doit etre pas compliquer.
Doit bien avoir une commande qui permet de les mettre en horizontal je pense -_-"
Help me :)
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
4 mars 2008 à 00:26
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)
pour des menus en CSS, je te propose :
• Listamatic
• CSS Play
dans le lot, tu devrais trouver ton bonheur !!!
-;o)
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
4 mars 2008 à 00:33
4 mars 2008 à 00:33
Salut Dalida ;)
merci je vais voir de suite si je trouve mon bohneur :P
merci je vais voir de suite si je trouve mon bohneur :P
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
4 mars 2008 à 00:54
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 :)
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 :)
tyboxp
Messages postés
21
Date d'inscription
mercredi 19 décembre 2007
Statut
Membre
Dernière intervention
10 mai 2009
3
4 mars 2008 à 00:59
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/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
BartWadela
Messages postés
562
Date d'inscription
samedi 7 juillet 2007
Statut
Membre
Dernière intervention
3 février 2010
107
25 mai 2008 à 19:57
25 mai 2008 à 19:57
bonsoir,
fais-voir l'url stp ??
fais-voir l'url stp ??
http://kirjava83.free.fr/rca/site/test
merci d'avance
merci d'avance
BartWadela
Messages postés
562
Date d'inscription
samedi 7 juillet 2007
Statut
Membre
Dernière intervention
3 février 2010
107
25 mai 2008 à 20:20
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 ??
qu'est-ce qui cloche ??
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 !!!!
3 mars 2008 à 14:49
jdois etre fatigué ^^
3 mars 2008 à 16:16
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