script pour effet rollover sur un menu

le Lun Juil 11, 2005 14:06

Bonjour!

quelq'un peut -il m'aider pour trouver un script htlm ou feuille de style (mais ça j'ai encore jamais utilisé) pour faire un effet rollover sur une barre de lien ou un menu.

par exemple une image différente au survol de la souris. je ne sias pas si j'explique bien! :wink:

merci de m'aider si vous pouvez!!

le Lun Juil 11, 2005 14:46

http://tecfa.unige.ch/themes/FAQ-FL/rol ... lover.html

Dans le header

<script language="JavaScript">

</script>

Dans le body, à l'endroit où s'affiche le rollover

<a href="#" onmouseover="bouton.src = 'images/bouton-vert_on.gif';" onmouseout="bouton.src = 'images/bouton-bleu_off.gif';"><img src="images/bouton-bleu_off.gif" border=0 width="187" height="29" name=bouton></a>

le Lun Juil 11, 2005 15:33

merci beaucoup!!! :wink:

le Lun Juil 11, 2005 17:00

si t'en as beaucoup, privilégié le CSS, même si t'as jamais touché à ça, c'est assez facile à saisir

le Lun Juil 11, 2005 17:03

oui je veux bien, mais peux tu me dire l'avantage, que je voie la différence?
J'ai déjà essayé d'inclure du css ùais cela ne fonctionnait pas.
j'ai front page 2003 et j'ai vu cette fonction mais je n'arrive pas à m'en servir! :wink:

le Lun Juil 11, 2005 17:09

l'avantage ?

la vitesse... et le fait que tes users qui n'ont pas activé le javascript puissent quand même avoir droit aux rollovers

ah et en plus, tu peux faire tout ton design en css, ça allège ton code, et ça facilite les maj (tu veux plus tes liens en vert-pomme? > hop ils sont tous en jaune banane, en 1 opération

cherche un/plusieurs tutos en css, potasse une semaine, et tu l'as dans les doigts

le Lun Juil 11, 2005 17:13

je vais potasser grace aux tutaux alors!merci de l'info, je n'avais pas pensé au javascript désactivé chez certains!
merci beaucoup :wink:

le Lun Juil 11, 2005 17:32

Pour faire un joli menu en css, tu mets ca dans ta feuille de style:

#menu{
margin: 0;
padding: 0;
width: 100%;
font-size: 12px;
border-bottom: 1px solid #C0C0C0;
float: left;
}
#menu li {
margin: 0;
padding: 0 5px;
list-style-type: none;
display: block;
float: right;
text-align: center;
}
#menu a:link, #menu a:visited {
display: block;
padding: 0.25em 0.5em;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
color: #666;
width: 85px;
}
#menu a:active {
background:#C0C0C0;
color: #000000;
}
#menu a:hover {
background:#CCCCCC;
color: #000000;
}

Et ensuite dans ta page html, tu mets:

<UL id=menu>
<LI><A href="page1.html">Page 1</A></LI>
<LI><A href="page2.html">Page 2</A></LI>
<LI><A href="page3.html">Page 3</A></LI>
etc.......
</UL>

Ca te fais un beau menu horizontal

le Lun Juil 11, 2005 17:44

merci je viens d'essayer et c'est la première fois que je réalise qu'il faut insérer un code d'abord sur un feuille htlm et ensuite sur une deuxième feuille css. mais comment par exemple creer un menu similaire sur une page index déjà existante? :cry:

le Lun Juil 11, 2005 19:22

lantic a écrit::D merci je viens d'essayer et c'est la première fois que je réalise qu'il faut insérer un code d'abord sur un feuille htlm et ensuite sur une deuxième feuille css. mais comment par exemple creer un menu similaire sur une page index déjà existante?

C'est simple.
Tu crée une page style exemple: cascade.css

tu y inseres la premiere partie du code (le long morceau).

Dans ta page index déja existente, entre les balises <head> et </head> (juste apres </title>) tu mets
<link rel="stylesheet" type="text/css" href="cascade.css" />

Et ensuite dans le <body> tu mets
<UL id=menu>
<LI><A href="page1.html">Page 1</A></LI>
<LI><A href="page2.html">Page 2</A></LI>
<LI><A href="page3.html">Page 3</A></LI>
etc.......
</UL>

le Lun Juil 11, 2005 19:59

ça marche!!!
mais maintenant comment centrer ou aligner à gauche, et mettre une image en fond qui changerais?? si tu as un code je suis preneuse!!

le Lun Juil 11, 2005 21:10

Maintenant la seule chose que tu as à faire c'est changer le css.

#menu{
margin: 0;
padding: 0;
width: 100%;
font-size: 12px;
border-bottom: 1px solid #C0C0C0;
float: center;
}
#menu li {
margin: 0;
padding: 0 5px;
list-style-type: none;
display: block;
float: right;
text-align: center;
}
#menu a:link, #menu a:visited {
display: block;
padding: 0.25em 0.5em;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
background-image : url(image1.gif);
color: #666;
width: 85px;
}
#menu a:active {
background:#C0C0C0;
color: #000000;
}
#menu a:hover {
background:#CCCCCC;
background-image : url(image2.gif);
color: #000000;
}

le Lun Juil 11, 2005 21:46

merci beaucoup, ça marche, je n'ai plus qu'a créer mes images! :wink:

le Lun Juil 11, 2005 21:51

'faut la laisser un peu se dépatouiller hein, sinon elle va rien apprendre

le Lun Juil 11, 2005 22:32

HawkEye_TpfH a écrit:'faut la laisser un peu se dépatouiller hein, sinon elle va rien apprendre

Elle va changer les couleurs et la taille des cases du menu elle-même

script pour effet rollover sur un menu

script pour effet rollover sur un menu

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne