Bouton rollover CSS

Résolu

tyboxp Messages postés 22 Statut Membre -
kirjava - 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>

Configuration: Windows XP
Internet Explorer 7.0
Mozilla firefox

Afficher la suite

15 réponses

Réponse 1 / 15

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
tyboxp Messages postés 22 Statut Membre 3

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 ;)
2
1. BartWadela Messages postés 606 Statut Membre 111
  
  jvois pas trop ce que le .css vient faire ici ?
  
  jdois etre fatigué ^^
  
  0
  1. tyboxp Messages postés 22 Statut Membre 3 > BartWadela Messages postés 606 Statut Membre
    
    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
    
    0
Réponse 2 / 15
tyboxp Messages postés 22 Statut Membre 3

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>
1
Réponse 3 / 15
tyboxp Messages postés 22 Statut Membre 3

S'il vous plait, Help me please ???
0
Réponse 4 / 15
tyboxp Messages postés 22 Statut Membre 3

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>
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 15
tyboxp Messages postés 22 Statut Membre 3

je n'est pas encore trouver comment effectuer ses 8 boutons en CSS
j'espere que je trouverais mais je conte sur vous -_-"
0
1. BartWadela Messages postés 606 Statut Membre 111
  
  qu'appele tu "rollover" exactement ??
  
  http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
  
  0
  1. tyboxp Messages postés 22 Statut Membre 3 > BartWadela Messages postés 606 Statut Membre
    
    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.
    
    0
  2. BartWadela Messages postés 606 Statut Membre 111 > tyboxp Messages postés 22 Statut Membre
    
    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
    
    0
  3. BartWadela Messages postés 606 Statut Membre 111 > tyboxp Messages postés 22 Statut Membre
    
    <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
    
    0
Réponse 6 / 15
tyboxp Messages postés 22 Statut Membre 3

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 !!!
0
Réponse 7 / 15
tyboxp Messages postés 22 Statut Membre 3

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"
0
Réponse 8 / 15
faboons Messages postés 291 Date d'inscription Statut Membre Dernière intervention 50

<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.
0
1. tyboxp Messages postés 22 Statut Membre 3
  
  <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 :)
  
  0
Réponse 9 / 15
tyboxp Messages postés 22 Statut Membre 3

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 :)
0
Réponse 10 / 15
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

salut,

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

dans le lot, tu devrais trouver ton bonheur !!!
-;o)
0
1. tyboxp Messages postés 22 Statut Membre 3
  
  Salut Dalida ;)
  merci je vais voir de suite si je trouve mon bohneur :P
  
  0
Réponse 11 / 15
tyboxp Messages postés 22 Statut Membre 3

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 :)
0
Réponse 12 / 15
tyboxp Messages postés 22 Statut Membre 3

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
0
Réponse 13 / 15
kirjava

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
0
1. BartWadela Messages postés 606 Statut Membre 111
  
  bonsoir,
  
  fais-voir l'url stp ??
  
  0
Réponse 14 / 15
kirjava

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

merci d'avance
0
1. BartWadela Messages postés 606 Statut Membre 111
  
  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 ??
  
  0
Réponse 15 / 15
kirjava

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

Bouton rollover CSS

15 réponses

Discussions similaires

Newsletters