Archives par mot-clé : gloubituto

Un gloubi boulga de tutoriels sur différentes technos du Web.

Gloubi script – une horloge illustrée

Publié le par
Répondre

Aujourd’hui, j’ai décidé de m’attaquer à la version gloubi d’un script que j’ai également déjà créé de mon côté : l’horloge illustrée.

La version gloubi est visible ici, tandis que la création de ma propre version, faite avec jQuery, est présentée ici.

Présentation de la version gloubi

Pour commencer, on créé 10 objets de type Image() en leur attribuant à chacun l’attribut src correspondant.

c1=new Image(); c1.src="c1.gif";
c2=new Image(); c2.src="c2.gif";
c3=new Image(); c3.src="c3.gif";
c4=new Image(); c4.src="c4.gif";
c5=new Image(); c5.src="c5.gif";
c6=new Image(); c6.src="c6.gif";
c7=new Image(); c7.src="c7.gif";
c8=new Image(); c8.src="c8.gif";
c9=new Image(); c9.src="c9.gif";
c0=new Image(); c0.src="c0.gif";

Vient ensuite la fonction affiche(), permettant de changer les images, qui prend 3 paramètres en entrée : le nombre d’heures, le nombre de minutes et le nombre de seconde. Pour chacun des trois paramètres on détermine l’image à afficher pour les dizaines et les unités. Chaque image est modifiée en passant par la propriété images de l’objet document.

Continuer la lecture →

Gloubi script – un système de tooltip

Publié le par
Répondre

J’ai décidé cette semaine de me pencher sur le script de tooltip présenté sur le site de gloubiweb.

Dans une première partie je présenterai rapidement le fonctionnement du script actuel, et dans une deuxième, je vous indiquerai comment recréer (quasi) à l’identique cet ancien script.

Présentation de du code existant

Le script actuel se compose de plusieurs fonctions et classes assurant les différents traitements nécessaires, et comme pour d’autres gloubi scripts déjà présentés, les textes à faire apparaître sont renseignés directement dans le JavaScript.

La première fonction, DetecteNavigateur(), est là, comme son nom l’indique, pour détecter le navigateur du visiteur de la page et renseigner automatiquement des variables qui seront utilisées plus tard pour faire quelques ajustement selon le type du navigateur détecté. Ce genre de fonction n’est plus nécessaire de nos jours, car tous (ou presque) les navigateurs modernes fonctionnent de la même façon (ou de façon très proche) au niveau du JS.

Ensuite viens la classe CreationFenetre, qui possède 4 méthodes :

– measureIt() : permet de mesurer la taille exacte du tooltip (utile pour son positionnement par rapport aux bords de la fenêtre de navigation)

– writeIt() : permet de changer le texte à l’intérieur du tooltip

– blendIn() et fadeIn() : ces deux fonctions permettaient de faire apparaître le tooltip de manière progressive, mais aucune des deux n’est encore fonctionnelle, car elles utilisent des propriétés et méthodes n’existant plus dans les navigateurs modernes

Il y a ensuite d’autres fonctions dont les plus importantes sont :

– DetecteMouvementSouris() (le nom de cette fonction est suffisamment explicite pour que je n’ai pas à préciser sa tache)

– PositionneFenetre() (la même)

– AfficheTexte(), cette fonction a pour rôle de changer le contenu du tooltip.

Continuer la lecture →

Gloubi script – un cadre clignotant

Publié le par
Répondre

Aujourd’hui, nous allons nous attaquer à un script présenté chez notre gloubi rival qui pourra vous être très utile pour mettre en avant n’importe quel contenu sur, par exemple, la magnifique page d’accueil de votre tout aussi sublime site : le cadre clignotant.

Comme pour d’autres gloubi scripts déjà présentés, il est possible maintenant d’obtenir le même effet seulement avec du CSS. Dans cet article je présenterait la solution JavaScript actuelle (avec une légère correction) puis une solution utilisant uniquement CSS.

Solution JavaScript

Le code utilisé (visible ici) est très simple. Toutes les 500 millisecondes (avec setInterval) on appelle une fonction qui vérifie la couleur de bordure de notre élément cible (via son attribut style), et selon sa valeur, cette couleur est changé (par exemple, si la bordure est bleue, elle est changée en rouge, et inversement).

Continuer la lecture →

Gloubi tuto – menu avec description du lien

Publié le par
Répondre

Voici venu le temps d’un nouveau gloubi tuto sur un autre script de menu. Aujourd’hui, nous allons nous attaquer au menu interactif avec description du lien.

Fonctionnement du script

Le menu est mis en forme avec un simple tableau à une seule colonne, avec un case vide en pied de colonne permettant d’afficher la description du lien survolé.

Le script actuel utilise 2 fonctions : un fonction pour gérer l’arrivée de la souris sur un élément de notre menu (événement mouseover) et une autre pour gérer la sortie de la souris (événement mouseout). Ces deux fonctions sont appelées via les attributs onmouseover/out des éléments du tableau.

La première fonction, movein(), prend deux paramètres : l’id de l’élément et sa description. La deuxième fonction, moveout(), prend un seul paramètre, l’id de l’élément.

Les deux fonctions marchent de la manière suivante :

  • on change le style de l’élément (ciblé par son id) en utilisant son attribut style
  • on change le contenu de la case de description
Continuer la lecture →

Gloubi tuto – texte changeant de couleur

Publié le par
Répondre

Cette fois-ci encore, j’ai décidé de m’attaquer à un autre gloubi script d’effet sur texte, le texte changeant de couleur.

Une fois de plus, dû à l’évolution des technologies, plus besoin de JavaScript pour obtenir un résultat identique (ou en tout cas très proche).

Fonctionnement du script

On indique au script les couleurs (du texte et du fond) entre lesquelles faire une transition. Ces couleurs sont définies chacune par trois variables (ce qui nous fait 12 variables en tout) contenant une valeur décimale (entre 0 et 255) qui sera ensuite convertie en hexadécimal sur deux digits (entre 00 et FF) pour indiquer la couleur sous la notation #RRGGBB.

Les valeurs des différentes composantes sont progressivement incrémentées puis décrémentées entre les valeurs bornes.

Continuer la lecture →

Gloubi tuto – menu avec images réactives

Publié le par
Répondre

Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s’attaque à un autre script de menu. M’enfin script… pas cette-fois. Même si sur gloubiweb cela est présenté comme un script, il s’agit en fait de CSS.

Ce menu, qui est visible sur cette page, utilise la technique des sprites CSS.

Présentation de la technique des sprites

Cette technique consiste à ne montrer qu’une petite partie d’une image plus grande, qui contient plusieurs éléments graphiques de notre mise en page, dans notre cas, tous les états des boutons de notre menu.

Pour ne montrer qu’une partie de cette image plusieurs techniques sont possibles : image dans un conteneur plus petit qui masque tout ce qui est en dehors (propriété overflow : hidden) ou encore l’utilisation de la grande image comme image de fond d’un conteneur plus petit, positionnée de manière à ne laisser voir que la partie qui nous intéresse.

C’est cette deuxième technique qui utilisée ici, en modifiant la position de l’image de fond au survol de la souris.

Le fait que l’image de fond change de position au survol de la souris est visible sur la page originale, car les liens sont légèrement surdimensionnés et laissent voir plus qu’un seul et unique « bouton ».

Continuer la lecture →

Gloubi script – texte avec un arrière-plan défilant

Publié le par
Répondre

Aujourd’hui nouveau tuto sur un gloubi script d’effet sur texte. Cette fois ci, il s’agit de texte avec arrière-plan défilant.

Principe du script

Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire.

Il fonctionne selon le principe de calques : au-dessus du calque de motif, on place un autre calque où le texte fait des « trous », laissant voir ce que l’on place dessous (ici notre calque de motif).

Le calque de motif est plus grand que le calque supérieur, mais on masque ce qui est en dehors de la zone du calque supérieur. Ce calque de motif est ensuite déplacé par du code JS.

Continuer la lecture →

Gloubi tuto – menu interactif déroulant

Publié le par
Répondre

Cette semaine, attaquons-nous à un autre script de menu présenté chez notre gloubi adversaire.

Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes.

Fonctionnement

Le menu produit par ce script se présente sous la forme d’un tableau dans un tableau (je parle là des balises HTML).

<table>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
</table>
Continuer la lecture →
Pages : 1 2

Gloubi tuto – un texte en dégradé

Publié le par
Répondre

Pour ce deuxième gloubi tuto, on s’attaque à un script qui a eu son petit succès sur Skyblog : le texte « arc-en-ciel » (en dégradés).

Script original et explication

Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre Némésis dans la deuxième guerre du gloubi.

Le script fonctionne comme suit :

Avant d’appeler la principale fonction de notre script, on construit un tableau de correspondance décimal vers hexadécimal à l’aide de deux boucles imbriquées.

Continuer la lecture →
Pages : 1 2

Gloubi tuto – un menu interactif Hello Kitty

Publié le par
Répondre

Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty.

Présentation et explication de l’existant

Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi.

Continuer la lecture →