• Astuces

    Astuces

    Ici on va proposer des trucs diverses, des astuces dans le jeu et aussi des codes Html pour vos fiches :)

    Un peu de ces aides seront fournies de ce lien

     

    Astuces

     

    1- Comment insérer un code HTML sur sa fiche ici : 

    2-  Code anti-copie pour votre fiche ici : 

    3- Petites balises ici : 

    4- Un fond de fiches ici :

    5- Insérer une vidéo :

    6- Image changeante au passage de la souris ici :

    7- Curseur changeant à son passage sur un texte ici : 

    8- Créer un pigmentalo Dégradé ici :

    9- Créer une bannière ici :

    10- Créer un gif animé (méthode basique) ici :

    11- Masquer/afficher ici :

    12- Image ou(et) texte en dehors de sa fiche ici : 

     

  • C'est très simple, mais il y a toujours des joueurs qui n'y arrivent pas, voila un screen qui devra vous aider.

    1. Comment insérer un code HTML sur sa fiche ?
    2. Comment insérer un code HTML sur sa fiche ?


    Voila et bonne chance ^^


    11 commentaires
  • Vous êtes toujours en colère car on vous copie votre fiche ? La solution est là, un code qui désactive le clic droit, certes ce code n'est pas parfait mais il est très simple à mettre.

    Voila le code :

    <div ondragstart="alert('Bonjour, image protégée.'); return false;" oncontextmenu="alert('Bonjour, merci de ne pas me copier.'); return false;" onselectstart="alert('Bonjour, vous n'avez pas la permission de copier.'); return false;">

    Vous pouvez changer les phrases dans les champs en jaune si vous voulez.

    Code Bonus :

    <div oncontextmenu="return false;" onselectstart="return false;" ondragstart="return false;">

    /!\A mettre au début /!\


    10 commentaires
  • Voila quelques codes de base mais très utiles.

    Barre de séparationPremière patie <hr> Deuxième partie

     

    Encadrer le texte <fieldset> <legend>Titre</legend> Contenu </fieldset>

     

    Mettre un lien <a www.Lapino.fr>Aller sur Lapino</a> 

     

    Texte défilant  <marquee>Texte défilant</marquee>

    A modifier :

    • Les champs en jaune.

    Qui peut être supprimé :

    • Les champs en bleu.

    Dans les deux cas :

    • Les champs en vert.

    3 commentaires
  • Voila un code qui vous permettra de mettre un fond de texte (vous pourrez écrire sur le fond)

    Le code :

    <div style="background: url(http://pulsmail.com/~wallpaper/data/media/73/fond_d_ecran_lapin_et_lapinous_37.jpg) repeat scroll 0% 0% transparent; width: 450px; margin: auto; padding: 1px; border: 1px solid rgb(216, 216, 216); color: #000000;"><br><br><br><br><br><div style="text-align: center;"><font size="10">Exemple<br><br><br></font></div></div>

    A modifier :

    Les champs en vert, jaune, bleu et orange.

    Il y a d'autres champs à modifier mais qui ne sont pas très importants.

    Ça veut dire quoi ?

    1. Le champ orange : Le lien (adresse) du fond.
    2. Le champ vert : La largeur du fond.
    3. Le champ en bleu : La couleur du texte sur le fond (marche avec les codes couleur en HTML, exemple pour texte blanc : #ffffff)
    4. Le champ jaune : Ajouter le texte, image..Etc (codes divers)

    21 commentaires
  • Voila pour insérer une vidéo, sans mot "body" "Java" etc..

    Un exemple de code :

    <div style="text-align: center;"><font size="4"><object data="http://youtube.googleapis.com/v/Z0KFVixalEw" height="350" width="400"><param name="src" <font="" size="4"><br></object></font></div>

    Explication importante :

    • Exemple de l'URL d'une vidéo normale : http://www.youtube.com/watch?v=Z0KFVixalEw
    • Le code HTML de base pour insérer les vidéos dans le code : http://youtube.googleapis.com/v/Ici mettre le code de la vidéo

    Pour pouvoir ajouter le code d'une vidéo en HTML, il faut toujours copier le texte à coté de V= plus exactement le texte dans le champ orange (Z0KFVixalEw) et l'ajouter au code de base pour les vidéo, qui donne :

    http://youtube.googleapis.com/v/Z0KFVixalEw


    Conclusion, à modifier :

    Le champ en jaune: Le lien converti en HTML (regarder l'explication au dessus)

    Les champs en vert : Le height est la longueur, le width est la largeur.

     


    11 commentaires
  • •Au début :
    Donc au début voila le code HTML de base :

    <a onmouseover="document.img_1.src='Ici l'adresse de l'image qui change au passage de la souris';" onmouseout="document.img_1.src='Adresse de l'image principale';"><img class="img" name="img_1" src="Répéter la même adresse de l'image principale" </a>



    Code d'exemple :

    Et

    <a onmouseover="document.img_1.src='http://img11.hostingpics.net/pics/735174Exemple22.png';" onmouseout="document.img_1.src='http://img11.hostingpics.net/pics/436100Exemple1.png';"><img class="img" name="img_1" src="http://img11.hostingpics.net/pics/436100Exemple1.png" </a>



    Même code + lien quand on clique sur l'image :

    <a href="http://life-in-lapino-fr.eklablog.fr"
    onmouseover="document.img_1.src='http://img11.hostingpics.net/pics/735174Exemple22.png';" onmouseout="document.img_1.src='http://img11.hostingpics.net/pics/436100Exemple1.png';"><img class="img" name="img_1" src="http://img11.hostingpics.net/pics/436100Exemple1.png" </a>



    •Bonus (Je suis gentille ) :
    Alors une petite astuce pour faire un texte qui est ombré au passage de la souris :
    1-Il nous faut :
    Texte simple :


    Texte ombré :


    Ps : Pour avoir un texte ombré il faut savoir utiliser Gimp ou un logiciel permettant d'ajouter une ombre à un texte.

    Résultat final :

    <a onmouseover="document.img_1.src='http://img11.hostingpics.net/pics/744070Exemple66.png';" onmouseout="document.img_1.src='http://img11.hostingpics.net/pics/768396Exemple55.png';"><img class="img" name="img_1" src="http://img11.hostingpics.net/pics/768396Exemple55.png" </a>


    Voila j’espère que je vous ai aidé.
     


    2 commentaires
  • Un code simple, facile et joli pour décorer votre fiche :)

    • Code Exemple :
    <div style="cursor: url('http://img15.hostingpics.net/pics/550923nat1034.gif'), pointer;">TEXTE</div>

    A modifer :

    • Le champ en Jaune.
    • Le champ en Vert.

    Qu'est-ce que ça veut dire ?

    1. Le champ en jaune : c'est l'adresse de l'image du curseur, un conseil choisissez une image pas très grande.
    2. Le champ en vert : Il peut y avoir  un texte, image, n'importe quel code, et que votre curseur passera dessus il changera d'apparence.

    5 commentaires
    1. Créer un pigmentalo Dégradé
    2. Créer un pigmentalo Dégradé
    3. Créer un pigmentalo Dégradé
    4. Créer un pigmentalo Dégradé
    5. Créer un pigmentalo Dégradé
    6. Créer un pigmentalo Dégradé
    7. Créer un pigmentalo Dégradé
    8. Créer un pigmentalo Dégradé
    9. Créer un pigmentalo Dégradé

    10 commentaires
  • Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Créer une bannière

    Clique sur les images pour les agrandir

     


    1 commentaire
  • J'ai fait ce tuto sans images car les instructions sont très simples et qu'il faut déjà bien connaître Gimp pour s'attaquer à un gif animé.

    1 - Créer une image

    Je le mets ici pour ceux qui ne sauraient pas faire.

    Fichier → Nouvelle image  Ensuite, entrez les dimensions voulues, puis cliquez sur valider.

    (Vous pouvez aussi ouvrir une image déjà prête, comme dans le tutu de Rim pour faire un dégradé)

    2 -  Dessinez votre élément à animer (la première image du gif)

    • Pour exemple : Vous dessinez un personnage.

    3 - Ajouter un calque

    Deux solutions : 

    - SOIT vous cliquez sur Calque → Nouveau calque (réglez les dimensions puis valider) Puis vous dessinez la deuxième image de votre  gif. Dans l'exemple, vous dessinez le même personnage que précédemment, mais avec un bras levé.

    -SOIT, la meilleure solution, vous cliquez sur Calque → Dupliquer le calque Puis vous modifiez votre image. Dans l'exemple, vous gommez le bras de votre personnage, et vous le redessinez dans une position différente.

    4 - Continuer ainsi de suite

    Vous répetez l'étape 3 autant que vous voulez, selon les mouvements de votre élement

    5 -  Vérifier le résultat

    Avant d'enregister, vérifiez que votre animation fonctionne bien en allant dans Filtres → Animation → Rejouer l'animation Une fenêtre s'affiche. Cliquez sur Lire en haut à droite et réglez la vitesse de votre gif en bas à droite.

    Une fois vérifié, fermez la fenêtre.

    6 - Enregistrer au bon format

    Quand votre gif animé est prêt, cliquez sur Fichier et selon votre version, si vous voyez Exporter vers, cliquez dessus, et si il n'y est pas, cliquez sur Enregistrer sous.

    La fenêtre d'enregistrement apparaît, et en haut vous voyez le nom du fichier : Sans titre.png

    (Le dessin peut déjà avoir un titre si vous l'avez ouvert, et "png" peut aussi être "jpg" par exemple.)

    Nommez votre dessin (mettez un titre à la place de "sans titre", puis effacez le "png" et remplacez-le par "gif". Attention, gardez bien le point ! 

    Ensuite, cliquez sur exporter (ou enregistrer). Une petite fenêtre s'affiche. Cochez la case "as animation" (ou "enregistrer en tant qu'animation") et réglez la vitesse, actuellement 100 millisecondes. Plus le nombre est faible, plus l'animation ira vite. Ensuite "exporter" ou "enregistrer", cela peut prendre un peu de temps selon la taille de votre gif. Et voilà, c'est fini^^.

     

    Vous pouvez héberger l'image, mais pour la lire sur votre votre ordinateur, il faut l'ouvrir avec un navigateur.

     C'est compliqué donc , n'hésitez pas à poser des questions en commentaire !
     


    2 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique