• Faire un Tooltip évolué

    Par Papasti le 13 Octobre 2011 à 17:06

     

    Un tooltip ? Késaco ? Vous savez c'est cette petite fenêtre qui s'ouvre pour vous donner une information lorsque vous passez sur un élément avec la souris.

    Le tooltip est souvent utile et basique. Il est pourtant assez facile d'en réaliser un plus évolué. Mais rien de tel qu'un exemple.

    Passez votre souris sur moi

     

    Alors comment ça marche?

    Le principe:

    L'article contient une balise <div>(que j'ai appelé tooltip) qui est rendue invisible grâce à la propriété display. Cette balise a la couleur et la bordure choisie.

    Sous ce <div> , j'ai placé trois autres balises (une pour le titre, une pour le corps du texte et enfin une pour l'image).

    Lorsque l'on passe avec la souris sur l'élément choisi (onmouseover), cela appelle une fonction javascript (show_tooltip) qui:

      - Définit la taille de la balise invisible
      - Positione cette balise en haut et à droite de la souris
      - Affiche la balise

    Dès que l'on quitte l'élément avec la souris (onmouseout), une autre fonction (unshow) est appelée qui rend la balise invisible.

    Comment l'utiliser ?

    Il faut placer dans la partie HTML de votre page le script suivant:

    <script type="text/javascript">// <![CDATA[
    function show_tooltip(event,larg,haut,coul,titre,baratin)
    {
    var x=event.clientX;
    var y=event.clientY;
    document.getElementById("tooltip").style.width =larg+'px';
    document.getElementById("tooltip").style.height =haut+'px'
    document.getElementById("tooltip").style.backgroundColor = coul;
    if (titre !='') {document.getElementById("titretooltip").innerHTML=titre}
    if (baratin !='') {document.getElementById("corpstooltip").innerHTML=baratin}
    document.getElementById("tooltip").style.left =(x+10)+'px';
    document.getElementById("tooltip").style.top =(y-haut -10)+'px';
    document.getElementById("tooltip").style.display ='block';
    }
    function unshow()
    {
    document.getElementById("tooltip").style.display ='none';
    }
    // ]]></script>

     

    Puis il faut définir la <div> qui va vous servir de tooltip. Celle ci-dessous correspond au tooltip de cette page:

    <div id="tooltip" style="display: none; padding: 5px; border: 1px solid Black; border-radius: 10px; position: fixed; float: none; width: 60px; ">
    <h3 id="titretooltip">pp</h3>
    <p id="corpstooltip" style="float: left; width: 150px;">pp</p>
    <p style="float: right;"><img src="http://ekladata.com/Q97lTr67ftDn0mdAOp2Hw7sNIEI/227407.jpg" alt="" width="50" height="50" /></p>
    </div>

     

    Maintenant il ne reste plus qu'à l'appeler quand vous en avez besoin. Dans l'exemple ci-dessous, 250 est la largeur de la div et 120 sa hauteur .

    <a onmouseover="show_tooltip(event,250,120,'LightBlue','Super tooltip','Vous ne trouvez pas ? On peut y placer quasiment tout, texte, images etc.')" onmouseout="unshow()">Passez votre souris sur moi</a>



     

     

    Faire un Tooltip évolué


    33 commentaires

  • Générateur de CSS

    Par Papasti le 11 Octobre 2011 à 11:43
    J'ai réalisé un nouveau générateur de CSS qui vous donne automatiquement le sélecteur choisi pour votre blog Eklablog. Ce tuto se trouve ici:Générateur de code CSS

    Bienvenue.

    Vous allez pouvoir ici faire différents tests pour la génération de votre code CSS. Ce formulaire vous permet de définir une couleur de fond, une image de fond avec sa taille et sa position ainsi que differents styles, attributs de texte, d'ombrage et de bordures. J'ai regroupé les fonctions qui me semblaient les plus utiles mais n'hésitez pas a me faire part des améliorations que vous aimeriez voir ou des problèmes que vous rencontrez.

    Fonctionnement

    Remplissez les différentes cases, jouez avec les réglages et cliquez sur le bouton appliquer. Lorsque votre choix est fait il vous suffit de copier le code css indique en bas de page.
     
    Image de Fond Texte
    Ombrage Bordure
    Nom de la balise :
    Largeur : px
    Hauteur : px
    Générateur de CSS Générateur de CSS
    PaddingGénérateur de CSS
    Gauche : px   Droite : px
    Haut : px   Bas : px
    Couleur de fond

    Ceci est un exemple pour illustrer le rendu obtenu. Vous pouvez ainsi apprécier l'effet visuel avant de générer le code.

     

    25 commentaires

  • [Javascript] Interagir à l'aide des éléments Input

    Par Papasti le 16 Septembre 2011 à 15:16

    Votre blog n'est pas un site complet qui vous permette de faire des choses très complexes à base de PHP et de bases de données Mysql.

    On peut cependant assurer une certaine interaction à l'aide du javascript et de l'élément HTML Input

    Supposons que vous souhaitiez faire une page qui permette de calculer des surfaces, des périmètres et autres volumes.

    Cela est possible   Regardez l'exemple ci dessous:

    Largeur:     Longueur:     

     

    Dans cet exemple, j'ai placé deux boites Input (Largeur et Longueur) et un bouton Surface. Lorsque l'on clique sur le bouton, on fait appel à une fonction Javascript (calculsurface) en lui envoyant les valeurs contenues dans Largeur et Longueur.

    Cette fonction calcule le produit des deux nombres et renvoie le résultat.
    Si dans largeur ou longueur, vous mettez du texte, alors la fonction detecte que le résultat n'est pas un nombre à l'aide de la méthode IsNaN (en anglais : Is Not a Number)

    Code de l'exemple


    <script type="text/javascript">// <![CDATA[
    function calculsurface(nombre1,nombre2)
    {
    if(isNaN(nombre1*nombre2) == true)
    {
        alert('Veuillez saisir des nombres');
    }
    else
    {
        alert ('La surface est de: '+nombre1*nombre2);
    }
    }
    // ]]></script>
    <form method="get">
    Largeur:<input style="width: 50px;" name="largeur" type="text" value="5" />&nbsp;&nbsp;&nbsp;&nbsp; Longueur: <input style="width: 50px;" name="hauteur" type="text" value="10" /> &nbsp; &nbsp;&nbsp; <input onclick="calculsurface (largeur.value,hauteur.value);" type="button" value="Surface" /></form>

     

    Vous pouvez maintenant laisser libre cours à votre imagination pour remplir vos fonctions javascript.


    13 commentaires

  • [HTML] La balise <IFrame>

    Par Papasti le 16 Septembre 2011 à 10:25

    Peut être avez vous envie sur votre blog d'afficher la page d'un autre blog.

    Pour celà, rien de plus facile. Une simple balise HTML et c'est fini. Pour tester, cliquez sur les boutons ci-dessous.

     

     

    Dans cet exemple, j'ai créé 3 balises <div>  (s'appellant respectivement fr1 , fr2 et fr3 ) contenant chacune une <iframe>.
    Chaque balise est initialement rendue invisible avec la propriété style="display:none;"
    Il ne reste plus ensuite qu'à jouer sur les états "visible" ou "invisible" de chacune des <div> en modifiant leur état avec les méthodes hide (cacher) et show (montrer).

    En cliquant sur un bouton, on rend visible la balise correspondant et on cache les autres.


    En plus de la balise <iframe> vous avez aussi appris à mettre un bouton et montrer ou cacher un élément

    Code correspondant à l'exemple ci-dessus




    9 commentaires


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