Voir tous les tags-
Une animation façon mootools, c'est ce que je vous propose aujourd'hui. On va pour cela utiliser les propriétés de transition du CSS3. (Ne fonctionne pas avec Internet Explorer)
Mais le plus simple pour se rendre compte des possibilites est de tester. Alors, passez votre souris sur les barres grisées ci-dessous.
Passez la souris ici pour voir le résultatUne animation qui donne un effet plutôt sympa et réalisée sur la base de CSS3. A priori, cela n'est pas fonctionnel avec IE.
J'ai ajouté un peu de javascript pour assurer le déroulé et l'enroulé de la zone de texte, le tout avec une unique fonction.Un peu d'ExplicationsA chaque titre correspond une balise div qui contient 2 autres balises selon la structure suivante:
<div id="zone1">
<div id="bandeau1">.....</div>
<div id="textederoule1">...</div>
</div>
<div id="zone2">
<div id="bandeau2">.....</div>
<div id="textederoule2">...</div>
</div>La hauteur de premierezone est définie au départ avec la même valeur que celle de bandeau1 afin que l'on ne puisse pas voir le texte.
Au survol de la souris, (avec onmouseover) on appelle la fonction deroule qui active l'animation. Le premier paramètre de la fonction est une valeur correspondant à bandeau1 et le second la hauteur déroulée en pixels. Dès que l'on quitte le bandeau avec la souris (onmouseout), on rappelle cette même fonction en réduisant sa hauteur de déroulé.Bien entendu vous pouvez fixer les autres propriétés CSS du bandeau, du texte et de la zone (couleurs, fond etc.)
Retrouvez ci-dessous le code de l'exemple de cet article.<script type="text/javascript">// <![CDATA[
function deroule(champ,valeur)
{/*valeur est la hauteur en pixel de la zone*/
switch (champ)
{
case 1: /*si champ vaut 1 alors on change la hauteur de zone1*/
document.getElementById("zone1").style.height=valeur+'px';
break;
case 2: /*si champ vaut 2 alors on change la hauteur de zone2*/
document.getElementById("zone2").style.height=valeur+'px';
break;
}
}
// ]]></script>
<div id="zone1" style="width: 100%; height: 20px; background: White; border: 1px solid DimGrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;">
<div id="bandeau1" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(1,100);" onmouseout="deroule(1,20);">Passez la souris ici pour voir le résultat
</div>
<div id="texte1" style="float: left;">Texte1 /*Remplacez par le texte de la première zone*/
</div>
</div>
<div id="zone2" style="width: 100%; height: 20px; background: White; border: 1px solid DimGrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;">
<div id="bandeau2" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(2,350);" onmouseout="deroule(2,20);">Un peu d'Explications
</div>
<div id="texte2" style="float: left;">Texte2/*Remplacez par le texte de la deuxième zone*/
</div>
</div>
14 commentaires
-
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.
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 baliseDè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>
33 commentaires
-
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. 25 commentaires
-
L'Hadopi, vous vous souvenez, c'est cette entité dont la mission est de traquer les pauvres
piratesinternautes que nous sommes.On ne compte plus les bourdes et autres bêtises qu'ils commettent (cela avait commencé avec leur logo dont la police de caractères était soumise à droit d'auteur) mais là, ils viennent de taper un grand coup!
Dans leur rapport d'activité publié ce 29 septembre, ils ont laissé apparaître (en page 143) des informations concernant un pirate présumé, notamment son IP qu'ils attribuent à Orange alors que celle-ci appartient à un abonné Free
.L'erreur a vite été signalée et ils se sont empressés de noircir les informations sur le document. Bravo pour la réactivité mais il reste un problème ! Si l'on télécharge ce document (j'ai fait le test hier soir), et qu'on l'ouvre avec Inkscape par exemple, on peut tout simplement supprimer ces zones noircies et ainsi retrouver les informations cachées.
Je leur tire donc mon chapeau, tant leur bêtise est affligeante. Mais c'est vrai qu'avec un budget de 11 millions d'euros pour payer 3 gus dans un bureau, c'est trop difficile de trouver des gens avec un minimum de compétence.
En résumé, cet organisme peut nous poursuivre pour défaut de sécurisation et pourtant, ils nous démontrent chaque jour qu'eux même en sont incapables.
Regardez plutôt la petite démo de Korben.
Au moins, cela m'a permis d'apprendre qu'on pouvait ouvrir un PDF avec Inkscape. Merci Hadopi
6 commentaires
Suivre le flux RSS des articles Suivre le flux RSS des commentaires
Créer mon blog