script pour effet rollover sur un menu

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par lantic, 11 Juillet 2005.

  1. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    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!!
    :)
     
  2. webbrain
    webbrain WRInaute occasionnel
    Inscrit:
    2 Juin 2004
    Messages:
    257
    J'aime reçus:
    0
    http://tecfa.unige.ch/themes/FAQ-FL/rol ... lover.html

     
  3. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :D merci beaucoup!!! :wink:
     
  4. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 857
    J'aime reçus:
    5
    si t'en as beaucoup, privilégié le CSS, même si t'as jamais touché à ça, c'est assez facile à saisir :)
     
  5. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :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:
     
  6. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 857
    J'aime reçus:
    5
    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 ;)
     
  7. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :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:
     
  8. bigjet
    bigjet WRInaute discret
    Inscrit:
    21 Novembre 2004
    Messages:
    175
    J'aime reçus:
    0
    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 :)
     
  9. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :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:
     
  10. bigjet
    bigjet WRInaute discret
    Inscrit:
    21 Novembre 2004
    Messages:
    175
    J'aime reçus:
    0
    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>
     
  11. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :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!!
    :?
     
  12. bigjet
    bigjet WRInaute discret
    Inscrit:
    21 Novembre 2004
    Messages:
    175
    J'aime reçus:
    0
    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;
    }
     
  13. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :D merci beaucoup, ça marche, je n'ai plus qu'a créer mes images! :wink:
     
  14. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 857
    J'aime reçus:
    5
    'faut la laisser un peu se dépatouiller hein, sinon elle va rien apprendre ;)
     
  15. bigjet
    bigjet WRInaute discret
    Inscrit:
    21 Novembre 2004
    Messages:
    175
    J'aime reçus:
    0
    Elle va changer les couleurs et la taille des cases du menu elle-même ;)
     
  16. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :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:
     
  17. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :oops: juste une dernière demande, existe t-il un logiciel qui "traduise "le css comme frontpage traduit le htlm?

    :lol:
     
  18. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 857
    J'aime reçus:
    5
    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 ;)
     
  19. bigjet
    bigjet WRInaute discret
    Inscrit:
    21 Novembre 2004
    Messages:
    175
    J'aime reçus:
    0
    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 :)
     
  20. Mannex
    Mannex Nouveau WRInaute
    Inscrit:
    2 Novembre 2004
    Messages:
    48
    J'aime reçus:
    0
    pareil que bigjet
     
  21. lantic
    lantic WRInaute discret
    Inscrit:
    8 Avril 2005
    Messages:
    101
    J'aime reçus:
    0
    :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
     
  22. myllie
    myllie Nouveau WRInaute
    Inscrit:
    6 Août 2005
    Messages:
    3
    J'aime reçus:
    0
    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
     
  23. kizman
    kizman Nouveau WRInaute
    Inscrit:
    3 Août 2005
    Messages:
    13
    J'aime reçus:
    0
    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.......
     
  24. bigjet
    bigjet WRInaute discret
    Inscrit:
    21 Novembre 2004
    Messages:
    175
    J'aime reçus:
    0
    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;
    }


    Merci je vais essayer ca :D
     
  25. myllie
    myllie Nouveau WRInaute
    Inscrit:
    6 Août 2005
    Messages:
    3
    J'aime reçus:
    0
    merci de la réponse! :D
    je vais tester et je vous dirais le résultat ;)

    8)
     
  26. kizman
    kizman Nouveau WRInaute
    Inscrit:
    3 Août 2005
    Messages:
    13
    J'aime reçus:
    0
    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...
     
  27. myllie
    myllie Nouveau WRInaute
    Inscrit:
    6 Août 2005
    Messages:
    3
    J'aime reçus:
    0
    salut je ne vois pas la barre de développement sur firefox... faut il qu eje la télécharge à part?
    merci
     
  28. kizman
    kizman Nouveau WRInaute
    Inscrit:
    3 Août 2005
    Messages:
    13
    J'aime reçus:
    0
    Oui, en effet. Tu pourras la télécharger ici:Clic!
     
  29. Farouche
    Farouche Nouveau WRInaute
    Inscrit:
    2 Octobre 2011
    Messages:
    1
    J'aime reçus:
    0
    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.
     
  30. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 922
    J'aime reçus:
    257
    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.
     
Chargement...
Similar Threads - script effet rollover Forum Date
Un petit effet javascript sympa sur les liens : scrollovers Développement d'un site Web ou d'une appli mobile 13 Août 2007
Wordpress : Script automatique de traduction : effets ? Référencement international (langues, pays) 27 Août 2012
Quel sont les effets de ce javascript? Développement d'un site Web ou d'une appli mobile 4 Mai 2011
Effet du <noscript> dans le body Débuter en référencement 16 Janvier 2005
Balise meta name description non prise en compte par Google Référencement Google 19 Septembre 2022
Deux questions pour deux scripts javascript. Développement d'un site Web ou d'une appli mobile 29 Août 2022
Search Console Comment réparer l'affichage de Google dans la mauvaise balise de description Meta ? Problèmes de référencement spécifiques à vos sites 19 Août 2022
Meta description différente de celle choisie (Rank Math + Qwant) Problèmes de référencement spécifiques à vos sites 25 Juillet 2022
Pages dynamiques avec Javascript ? Développement d'un site Web ou d'une appli mobile 14 Juillet 2022
Balise méta description : faut-il insérer son mot-clé ? Débuter en référencement 2 Juillet 2022
[JavaScript Array] modifier un code html sans le supprimer/recréer Développement d'un site Web ou d'une appli mobile 20 Juin 2022
Lien dans la description d'une vidéo YouTube...quel est prix raisonnable par mois ? YouTube, Google Images et Google Maps 16 Juin 2022
Le javascript protège-t-il du copiage HTML ? Développement d'un site Web ou d'une appli mobile 9 Mai 2022
Sites de scripts PHP, jQuery, Ajax, etc. Le café de WebRankInfo 20 Mars 2022
Tester une URL avec Javascript Développement d'un site Web ou d'une appli mobile 25 Février 2022
jour en javascript Développement d'un site Web ou d'une appli mobile 24 Février 2022
Search Console Probleme Meta title & Meta description fiche produit Référencement Google 27 Janvier 2022
référencement site full javascript Débuter en référencement 17 Janvier 2022
Script "haut de page". Développement d'un site Web ou d'une appli mobile 4 Janvier 2022
Détecter arrêt user d'un script PHP ? Développement d'un site Web ou d'une appli mobile 28 Décembre 2021