Sites web

Life tree creative

Image mechanics

Appear

Toasted digital

Ad Pack buysellads

JetSuite

6Wunderkinder

Les idées d'Anaïs

Créations graphiques

Andromeda typeface par Thomas Gillett

The quick brown fox par urikane parker

Why not par Nik Ainley

Banco do brasil par Leandro Lima

Sabienzia par Rene Bieder

The red bulletin par Peter Jaworowski

Sites web

Bokche creative studio

Mavic

Dribble HTML 5 infographic

Le 28 thiers

Cofa media

Créations graphiques

ABSA

Feel like dancing

Power to create

Illustrated Type

Daim

Les meilleurs articles

Anglais

Les 150 meilleurs effets Jquery.

50 techniques css

30 kit de wireframe et élément d'interface.

Français

Intégrateur + graphiste = intégraphiste

L'humain dans le webdesign

Compte rendu de l'article : webdesigner encore un métier d'avenir

Les meilleurs tutos

Anglais

Faire un texte momie

Vintage zombie poster

Menu déroulant css3

Français

Un carrousel en perspective

Timestamp et php

Créer un animal hybride avec photoshop

Typographies serif

Communist

Credit valley

Gabriel

Vahika

Tertre

High Speed Photos

High speed milk par Mouavier

Sound sculptures

Cornstarch Explosion par alan sailer

Egg par nebarnix

Bullet

Sites web

IconMoon

Hey Indy !

Threabird

Joseph Cohen

BokicaBo

Créations graphiques

Dream Shepherds

Police brutality

Wetness

Daft beheaded

Apersand food groups

Typographies manuscrites

Aka Dora

Androgyne

Ballapark

Black Jack

Honey script

LANDSCAPE /// 01

The hauting smell

On clevedon Pier

Iceland

Overcome

Ceci est un modèle ultra simple et très facile à implémenter. Cette infobulle va réagir comme l'attribut title d'une image ou d'un lien. Pourquoi s'embêter à en faire une en Jquery alors ? hé bien car celle-ci sera entièrement modifiable par CSS, ce qui n'est pas le cas de l'attribut title.

Pour commencer il faut taper un peu de code html, tout simple comme ceci :

Coucou je suis du HTML !

Dans ce paragraphe nous choisissons le mot à définir, ce sera HTML. je vais donc l'entourer d'un span à qui j'associerais la classe déclencheur. Ensuite afin de ne pas avoir à recréer un bloc en HTML je vais me servir de l'attribut name de la balise span, dans lequel je vais stocker ma définition.

Coucou je suis du <span class="declencheur" name="Hyper Text Mark up Language">HTML</span> !

Ensuite, nous allons coder la partie jquery du code. Pour ce faire nous mettons une fonction sur le survol du span declencheur, dans cette fonction nous récupérons la valeur de l'attribut name de la balise span survolé que nous stockons dans une variable. Cette fonction crée aussi une nouvelle balise span avec la classe definition qui contient notre variable précédemment stockée. Lorsque nous quittons le survol, le span avec la class definition est caché.

$(document).ready(function() {
    $('.declencheur').hover(function(){
        var def = $(this).attr('name');
        $(this).before('<span class="definition">'+def+'<span class="triangle"></span></span>');
    }, function() {
        $('.definition').fadeOut();
    });
});

Notre code HTML est notre script Jquery fonctionne (si ce n'est pas le cas, ce n'est pas de ma faute.) cependant il manque un peu de style ! À votre CSS ! Alors, afin de donner à ce script un petit peu plus de gueule, nous allons tout d'abord montrer qu'il se passe quelque chose sur le span declencheur comme le souligné et changer le curseur de survol puis rendre le span definition indépendant du texte en lui donnant une position absolute et le mettre en dispaly block, afin de mieux le positionner par rapport au mot à définir. Pour le reste c'est comme vous voulez. Voici mon CSS :

.declencheur
{
     color:#4D4D4D;
     border-bottom:1px dashed red;
     cursor:help;
}
 
.definition
{
    color:#4D4D4D;
    text-shadow:0px 1px #fff;
    background:#ccc;
    position:absolute;
    margin-top:-32px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:5px;
}

C'est fini, voilà comment créer un plugin de définition en Jquery. J'espère que ceci vous sera utile et surtout qu'il vous donne des idées pour d'autres choses.

Sites web

Bohemia

Need style ?

G 2

Nudge design

Weather snitch

Créations graphiques

Because You're No Magician par Robert Shields

the big lebowski par Travis Price

Urban Cartography II par Alex Varanese

Grand & Toy

Open house par Demen1

Sites web

Druck deine diplomarbeit

Studio breakfast

Nomad graphs

Oliver Twardowski

Slice machine

Créations graphiques

Work 2010 par blind SALIDA

Mensajes Estereotypos

Quit smoking par reclarkgable

Quick! Disguise!

Type par Tato Toledo

Typographies Sans sérif

Dekar

Pt sans

Ageone

Geo sans light

Yanone Kaffeesatz

Photos de portrait

Couples

Série de 9 portraits. Cliquez sur l'image pour voir toutes les photos.

You may know him

Child portrait

Self-portrait matrix

I think she killed me