script pour effet rollover sur un menu

WRInaute discret
Bonjour! :D
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!!
:)
 
WRInaute occasionnel
http://tecfa.unige.ch/themes/FAQ-FL/rol ... lover.html

Dans le header

<script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "images/bouton-vert_on.gif";
end -->
</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>
 
WRInaute discret
:D 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:
 
WRInaute accro
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 ;)
 
WRInaute discret
:D 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:
 
WRInaute discret
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 :)
 
WRInaute discret
: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? :cry:
 
WRInaute discret
lantic a dit:
: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? :cry:

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>
 
WRInaute discret
:p ç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!!
:?
 
WRInaute discret
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;
}
 
WRInaute discret
:eek: ben oui, je vais essayer!! bon je suis un peu débordée ailleurs en ce moment, mais je le ferai!!!
merci de votre aide! j'ai déjà beaucoup avancé dans la compréhension du css.
:wink:
 
WRInaute discret
:oops: juste une dernière demande, existe t-il un logiciel qui "traduise "le css comme frontpage traduit le htlm?

:lol:
 
WRInaute accro
je peux me tromper, mais il me semble que sous certaines conditions, Dreamweaver interprete certaines informations du css "en live", càd quand tu fais un refresh sur la partie "design".

Je sais que c'était le cas par exemple pour la police/taille, pour les liens, etc...

A creuser ;)
 
WRInaute discret
lantic a dit:
:oops: juste une dernière demande, existe t-il un logiciel qui "traduise "le css comme frontpage traduit le htlm?

:lol:

Je pense pas que tu puisses voir le fruit de ton travail en direct. La chose que moi je fais, c'est ouvrir ma page avec un navigateur, éditer mon fichier css, et rafraichir la page pour voir les modifications.
Mais bon, je suis pas un expert en css, et j'en suis à mes débuts :)
 
WRInaute discret
:D bon j'ai un peu travaillé le menu css!! je pense être arrivée à ce que je voulais, mais j'ai du mal à maitriser les largeurs . j'y suis allée à tatons, et j'espère pouvoir rajouter une rubrique si j'ai besoin!

merci encore de votre aide!
:D :D
 
Nouveau WRInaute
hello je suis nouvelle sur le forum , je suis actuellement en création de site et je cherchait justement un modèle de menu en css :D je débute aussi et c pas gagnée lol .
j'ai essayée aussi le modèle css de bigjet chapeau !! :d
le seul soucis j'arrive pas a centrer avec la fct :float :center; il reste toujours le float: right; dans le menu li ;
je sais qu'il esxiste la fct : display:inline; j'ai essayée mais ça ne marche pas non plus :( impossible de centrer et resserrer les block menu pour qu'ils soient collés ..; si vous aviez la solution :oops:

thx xxxx
myllie
 
Nouveau WRInaute
bigjet a dit:
lantic a dit:
:oops: juste une dernière demande, existe t-il un logiciel qui "traduise "le css comme frontpage traduit le htlm?

:lol:

Je pense pas que tu puisses voir le fruit de ton travail en direct. La chose que moi je fais, c'est ouvrir ma page avec un navigateur, éditer mon fichier css, et rafraichir la page pour voir les modifications.
Mais bon, je suis pas un expert en css, et j'en suis à mes débuts :)

Il est possible de combiner les 2 avec Firefox (avec l'extension "barre d'outils Web Developer").

Ta fenêtre se divise en 2: à gauche tu as le fichier css et à droite ta page html. Tu sauvegardes les modifications que tu fais au niveau du CSS et tu vois directement l'effet à droite...

Très utile cette barre d'outils pour les développeurs.......
 
WRInaute discret
myllie a dit:
hello je suis nouvelle sur le forum , je suis actuellement en création de site et je cherchait justement un modèle de menu en css :D je débute aussi et c pas gagnée lol .
j'ai essayée aussi le modèle css de bigjet chapeau !! :d
le seul soucis j'arrive pas a centrer avec la fct :float :center; il reste toujours le float: right; dans le menu li ;
je sais qu'il esxiste la fct : display:inline; j'ai essayée mais ça ne marche pas non plus :( impossible de centrer et resserrer les block menu pour qu'ils soient collés ..; si vous aviez la solution :oops:

thx xxxx
myllie
Salut :)

Essaie ca:

#menu {
margin: 0;
padding: 0;
width: 100%;
font-size: 10px;
border: 1px solid #000000;
background:#FFFFFF;
float: left;
}


#menu li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
float: left;
text-align: center;
border-right: 0px solid #eee;
background: #FFFFFF;
}

#menu a:link, #navlist a:visited {
display: block;
padding: 0.25em 0.5em;
font-weight: bold;
text-decoration: none;
color: #666;
width: 84px;
}
#menu a:hover {
background:#CCCCCC;
color: #000000;
}


kizman a dit:
Il est possible de combiner les 2 avec Firefox (avec l'extension "barre d'outils Web Developer").

Ta fenêtre se divise en 2: à gauche tu as le fichier css et à droite ta page html. Tu sauvegardes les modifications que tu fais au niveau du CSS et tu vois directement l'effet à droite...

Très utile cette barre d'outils pour les développeurs.......

Merci je vais essayer ca :D
 
Nouveau WRInaute
kizman a dit:
Il est possible de combiner les 2 avec Firefox (avec l'extension "barre d'outils Web Developer").

Ta fenêtre se divise en 2: à gauche tu as le fichier css et à droite ta page html. Tu sauvegardes les modifications que tu fais au niveau du CSS et tu vois directement l'effet à droite...

Très utile cette barre d'outils pour les développeurs.......

Petite rectification: il n'est pas nécessaire de sauvegarder. Dès la moindre petite modification du css à gauche, le résultat se reproduit automatiquement à droite...
 
Nouveau WRInaute
salut je ne vois pas la barre de développement sur firefox... faut il qu eje la télécharge à part?
merci
 
Nouveau WRInaute
script pour effet rollover au survol de la souris sur plusieurs images en .gif et .jpg

Bonjour tlm.
Je fais un site pour ma maman depuis 2008 et vu que je suis célibataire (par choix) avec 3 enfants, j'avance
très doucement. Site ici : http://minnie-creations.com/

Voilà, ça fait déjà un bon moment que je cherche un script correct pour l'effet rollover au survol de la souris.
J'en ai encore essayé plusieurs jusqu'à 4H du matin et rien à faire.

J'aimerais ça exactement :

Explications :
Je travaille avec Frontpage 2003.
Je met plusieurs créations en miniatures sur une page (que ce soit des créas en .jpg ou/et en .gif sur
la même page et qui font 400 de large).
J'aimerais qu'au passage de la souris sur la miniature, la création s'affiche aux tailles originales.
Que mettre dans le "head" et dans le "body" ???

Merci d'avance pour vos réponses :)
PS : Il m'arrive d'être pire que blonde alors soyez patient avec moi svp ;-)

Autre question : Je n'arrive pas à ouvrir les pages de votre forum avec I.E. Je suis obligée de passer par Mozilla, pourquoi ?
Et dernière question, j'aimerais refaire un site, que me conseillez-vous comme programme en dehors de frontpage2003 qui, m'a t'on dit, rajoutait des codes, balises,... alors que ce n'est pas nécessaire donc site plus lourd.

Mes amitiés, Farouche.
 
WRInaute accro
Bonjour Farouche

si tu ne connais pas grand chose à la programmation web, je te conseille de te tourner vers des systèmes comme wordpress, ou joomla, qui permettent de faire un site en utilisant des modèles. Frontpage 2003 est en 2011... horriblement dépassé.
Si tu veux mettre les mains dans le code, tu peux utiliser des systèmes plus puissants, comme Aptana

Pour ton problème spécifique, il y a des solutions nettement meilleures que le rollover, je te laisse chercher "lightbox"

Par ailleurs, il vaut mieux créer son propre sujet plutôt que de relancer quelque chose d'aussi ancien. Dont en plus le titre ne correspond pas vraiment à ton besoin.
 
Discussions similaires
Haut