script pour effet rollover sur un menu

lantic · 11 Juillet 2005

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

webbrain · 11 Juillet 2005

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>

lantic · 11 Juillet 2005

merci beaucoup!!! :wink:

HawkEye · 11 Juillet 2005

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

lantic · 11 Juillet 2005

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:

HawkEye · 11 Juillet 2005

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

lantic · 11 Juillet 2005

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:

bigjet · 11 Juillet 2005

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

lantic · 11 Juillet 2005

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:

bigjet · 11 Juillet 2005

lantic a dit:
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>

lantic · 11 Juillet 2005

ç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!!
:?

bigjet · 11 Juillet 2005

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;
}

lantic · 11 Juillet 2005

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

HawkEye · 11 Juillet 2005

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

bigjet · 11 Juillet 2005

HawkEye_TpfH a dit:
'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

lantic · 12 Juillet 2005

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:

lantic · 12 Juillet 2005

juste une dernière demande, existe t-il un logiciel qui "traduise "le css comme frontpage traduit le htlm?

:lol:

HawkEye · 12 Juillet 2005

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

bigjet · 12 Juillet 2005

lantic a dit:
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

Mannex · 12 Juillet 2005

pareil que bigjet

lantic · 15 Juillet 2005

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!

myllie · 6 Août 2005

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

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

thx xxxx
myllie

kizman · 6 Août 2005

bigjet a dit:
lantic a dit:

juste une dernière demande, existe t-il un logiciel qui "traduise "le css comme frontpage traduit le htlm?

:lol:

Cliquez pour agrandir...

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.......

bigjet · 6 Août 2005

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

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

myllie · 6 Août 2005

merci de la réponse!

je vais tester et je vous dirais le résultat

8)

kizman · 6 Août 2005

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...

myllie · 8 Août 2005

salut je ne vois pas la barre de développement sur firefox... faut il qu eje la télécharge à part?
merci

kizman · 19 Août 2005

myllie a dit:
salut je ne vois pas la barre de développement sur firefox... faut il qu eje la télécharge à part?
merci

Oui, en effet. Tu pourras la télécharger ici:Clic!

Farouche · 2 Octobre 2011

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.

Marie-Aude · 2 Octobre 2011

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.