AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Affichage top et partenaires défilement

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31707

    le Dim 30 Aoû 2009 - 22:49

    Bonjour/soir à tous,

    La question ayant été posée pas mal de fois, je me permet de faire un topic expliquant comment faire défiler les logos des tops sites ou des partenaires d'un forum, le tout présenté en tableau plus ou moins élaboré.


    I- Le Basique :

    Pour un défilement horizontal basique des tops sites / partenaires, insérez sur votre accueil le code suivant :

    Simple :
    Code:
    <marquee><a href="adresse du site/forum"><img src="adresse de l'image" /></a></marquee>

    Pour en mettre deux l'une en dessous de l'autre, séparez les deux par le code :
    Code:
    <br>
    qui permet de faire un retour à la ligne.


    II- Les Différents styles de Scroll (=défilement) :

    Réduire la largeur / hauteur :

    Code:
    <marquee width="700px" height="50px"><a href="adresse du site/forum"><img src="adresse de l'image" /></a></marquee>
    width : largeur
    height: hauteur


    Couleur et cadre :

    Code:
    <marquee background-color="#000000" border="1px solid #ffffff" color="#ffffff"><a href="adresse du
    site/forum"><img src="adresse de l'image"
    /></a></marquee>
    background-color : couleur de fond
    border : bordures
    color : couleur du texte


    Styles et vitesse de défilement :

    Va-et-vient :
    Code:
    <marquee behavior="alternate"><a href="adresse du
    site/forum"><img src="adresse de l'image"
    /></a></marquee>

    Vitesse :
    Code:
    <marquee scrollamount="5"><a href="adresse du
    site/forum"><img src="adresse de l'image"
    /></a></marquee>
    Le chiffre de la vitesse est à adapter en fonction de celle souhaitée.
    1 = très lent
    20 = très rapide


    Directions :
    Code:
    <marquee directon="right"><a href="adresse du
    site/forum"><img src="adresse de l'image"
    /></a></marquee>
    Right = défilement vers la droite
    Left = défilement vers la gauche
    Up = défilement vers le haut
    Down = défilement vers le bas


    Remarque :
    Il est bien sûr possible de combiner autant de données que nécessaires !


    III- ...et si l'on exploite ?

    Il est tout à fait possible de mettre un scroll dans une case de tableau, ou une division, et ainsi, appliquer ensuite un fond image à ce cadre ou cette division.

    [suite à venir]


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:24, édité 2 fois



    Shigeru
    MasculinAge : 22Messages : 1497

    le Dim 13 Sep 2009 - 18:50

    J'ai hâte de voir se tuto' ^.^



    bmbslave4u
    MasculinAge : 36Messages : 9

    le Mar 20 Oct 2009 - 13:26

    thanks!!!
    kute aka stormwalker
    MasculinAge : 23Messages : 52

    le Dim 8 Nov 2009 - 15:26

    merci pour cette aide :)



    bossy
    MasculinAge : 21Messages : 118

    le Jeu 30 Juin 2011 - 19:34

    merci

    edit : quand je met 2 fois le même code à la suite pour mettre mes partenaires, ils se placent l'un en dessous de l'autre, et non pas à la suite. Qui pourrait m'aider svp
    J'aimerais également que quand on passe le curseur de la souris, le défilement se stop jusqu’à ce qu'on l’enlève. Merci d’avance a celui ou celle qui m'aidera.



    Pupuce17
    FémininAge : 19Messages : 28

    le Jeu 22 Sep 2011 - 19:11

    Merci pour le tuto :]



    Panda panda panda !! : P I love Panda x)
    Ehlana
    FémininAge : 27Messages : 28

    le Mer 7 Déc 2011 - 22:57

    Merci pour le tutoriel, je me suis éclatée à combiner avec un tableau. C'était chiant, mais ça le fait Very Happy
    Xam
    MasculinAge : 24Messages : 5

    le Dim 5 Fév 2012 - 15:24

    Salut!! C'est un super Tuto merci beaucoup, mais, comme Natsu, j'aimerais pouovir positionner mes images l'une derrière l'autre et non l'une en dessous de l'autre.. C'est faisable?
    Shuu-Shuu
    FémininAge : 20Messages : 196

    le Dim 5 Fév 2012 - 15:49

    Merci beaucoup pour le tutoriel, il est très utile =)
    Etax
    MasculinAge : 19Messages : 159

    le Mar 26 Juin 2012 - 17:12

    merci



    Laluna
    FémininAge : 22Messages : 67

    le Mer 25 Juil 2012 - 18:52

    Mercii :3
    Hayate747
    MasculinAge : 27Messages : 194

    le Dim 7 Oct 2012 - 16:01

    Thanks you !
    karma71620
    MasculinAge : 24Messages : 19

    le Mar 18 Déc 2012 - 21:24

    merci beaucoup! :)
    lala zhang
    FémininAge : 25Messages : 297

    le Lun 21 Jan 2013 - 11:46

    Merci pour ce tuto
    Sweet's
    FémininAge : 21Messages : 12

    le Lun 21 Jan 2013 - 12:01

    Super Merci Sparrow pour ce tuto' !



    Chicaa
    FémininAge : 18Messages : 10

    le Sam 9 Mar 2013 - 18:06

    Merci pour le tuto, je ne savais même pas que l'on pouvait modifier la vitesse. **
    Merci encore! n.n
    Féli
    FémininAge : 34Messages : 102

    le Sam 29 Juin 2013 - 12:51

    toujours utile, merci



    zereui
    MasculinAge : 25Messages : 93

    le Dim 14 Juil 2013 - 12:57

    Merci!
    Mika-chan
    FémininAge : 24Messages : 76

    le Lun 12 Aoû 2013 - 23:45

    Merci pour ce tuto : )
    teck
    MasculinAge : 25Messages : 63

    le Ven 30 Aoû 2013 - 16:26

    merci



    Miley Destiny
    FémininAge : 20Messages : 25

    le Dim 13 Oct 2013 - 16:52

    Merci
    Parka
    MasculinAge : 37Messages : 100

    le Sam 19 Oct 2013 - 17:06

    @Shigeru a écrit:J'ai hâte de voir se tuto' ^.^
    skaera22
    MasculinAge : 21Messages : 72

    le Jeu 3 Avr 2014 - 15:33

    @Xam a écrit:Salut!! C'est un super Tuto merci beaucoup, mais, comme Natsu, j'aimerais pouovir positionner mes images l'une derrière l'autre et non l'une en dessous de l'autre.. C'est faisable?
    Invité

    le Mar 22 Avr 2014 - 13:43

    Merci.
    Fuyuka
    FémininAge : 22Messages : 57

    le Jeu 26 Mar 2015 - 14:35

    Merci pour l'aide =D
    Contenu sponsorisé

    Aujourd'hui à 1:25


      La date/heure actuelle est Lun 5 Déc 2016 - 1:25