Voir tous les tags-
-
Voilà, me rendant compte qu'il m'est très plaisant de faire des tutos en particulier sur le javascript, j'ai décidé de recréer un blog qui ne sera axé que sur le HTML, le CSS et surtout le Javascript.
Je vais essayer de le rendre ludique, sobre et clair. Il comportera différentes rubriques consacrées à ces trois langages mais aussi une foire aux questions, un forum pour les demandes d'aide ainsi qu'une boite à outils que vous pourrez exploiter à loisir. (avec des codes prêts à l'emploi, des formulaires en ligne etc.)
J'attends de le remplir un peu avant de le rendre public mais je ne manquerai pas de vous tenir informés de son avancement.
26 commentaires
-
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
Suivre le flux RSS des articles Suivre le flux RSS des commentaires
Créer mon blog