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.


    Initiation aux widgets + Principe de défilement

    Partagez
    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Mer 21 Avr 2010 - 0:54

    Hello c'est encore moi x). (désolé Sparrow j'ai pas trouvé plus explicite, tu modifieras au pire xD) Alors pour cette astuce là, étant donné que deux tutos sur les widgets ne suffisent pas, vous aurez TROIS tuto sur ces magnifiques "trucs". Donc pour les widgets personnalisé, il faut aller dans le PA => Modules => Gestion des widgets du forum (il faut bien évidement avoir au préalable activer les widgets du forum) Puis créer un widget personnalisé, et c'est la que du codage très simple commence. Déjà il faut savoir si tu veux un cadre sur ton widget, si oui coche oui pour "utiliser une table de type" sinon ben coche non xD Tu mets le nom du widget, puis tu commence à taper ton code HTML.
    Code:
    <a href="http://rpgktest.forumactif.org/forum.htm"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645310.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/portal.htm"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645311.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/faq.htm"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645312.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/search.forum"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645313.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/memberlist.forum"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645314.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/groupcp.forum"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645315.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/profile.forum?mode=editprofile"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645316.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/msg.forum?folder=inbox"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645317.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/login.forum?logout=true"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645318.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/login.forum?connexion"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645319.png" alt="Image hébergée par servimg.com" border="0"></a><br><a href="http://rpgktest.forumactif.org/profile.forum?mode=register"><img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645410.png" alt="Image hébergée par servimg.com" border="0"></a>
    Vu comme ça c'est du chinois pour vous, nan ? Bah pour moi oui en tout cas xD C'est pourtant tout bête, c'est juste une navigation par widget que j'ai moi même réalisé. Chaque lien est ici représenté par une image différente d'où l'apparition régulière de ce petit bout de code.
    Code:
    <img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645410.png" alt="Image hébergée par servimg.com" border="0">
    La balise < br > qui est le retour à la ligne et la balise < a href="ton lien" > qui sert pour le lien. (sans espace entre les signes et l'écriture) Tu peux aussi faire un lien comme ceci:
    Code:
    <a href="http://www.never-utopia.com/forum.htm">http://www.never-utopia.com/forum.htm</a>
    Pour insérer un lien sous image il te suffit de remplacer la deuxième partie du code, ce qui est entre "><" par le code HTML de ton image comme par exemple:
    Code:
    <img src="http://i67.servimg.com/u/f67/13/57/53/86/i5645311.png" alt="Image hébergée par servimg.com" border="0">

    Évidemment votre widget n'est pas obligé de se présenter de la sorte. Je pars du principe que vous savez coder hein. Vous pouvez très bien appliquer toutes sortes d'effets à votre widget en l'entourant d'une div dont vous aurez prédéfinis les propriétés bien sur, et là le résultat peut être plus ou moins fabuleux, enfin une infobulle dans un widget c'est rare... :p A méditer !


    Maintenant je vais vous donner le secret des marquee ! Vous en rêviez, bien le voilà *.*
    En effet la balise marquee toute seule donne ceci:
    c'est bidon
    Combinée à un behavior slide c'est déjà plus concluant:
    YEAH !
    Vous voyez pas la différence ? Normal, y'en a presque pas, c'est juste qu'avec le behavior slide la balise est plus complète :) De cette manière on découvre aussi le behavior alternate qui donne:
    Ça gère *.*
    Ajoutez à cela le fait que vous pouvez donner une direction au défilement ! (down, right, left, up); ainsi que le scrollamount permettant d'accélérer ou de ralentir la vitesse de défilement. De cette manière on peut obtenir une balise complète du style.
    Code:
    <marquee behavior="alternate"; direction="right"; scrollamount="50"></marquee>
    Qui donne:
    blablabla je suis trop fort, blablabla
    Vous savez faire ça, vous êtes déjà bien avancés mais sachez que la balise marquee a encore bien d'autres attributs, à vous de les découvrir... :p



    CN.June
    FémininAge : 53Messages : 306

    le Dim 25 Mar 2012 - 19:15

    J'aime beaucoup l'effet du dernier Marquee ! En tout cas, merci pour ce tuto très plaisant :'DD
    Hayate747
    MasculinAge : 27Messages : 194

    le Dim 7 Oct 2012 - 14:57

    Merci ! :)
    Sakira
    FémininAge : 23Messages : 89

    le Mar 1 Jan 2013 - 21:33

    Merci XD



    Bientôt peut être o/
    Dépendra de ma motiv'
    Contenu sponsorisé

    Aujourd'hui à 16:29


      La date/heure actuelle est Lun 5 Déc 2016 - 16:29