1 - Fonction

Les codes Javascript sont une sorte de mélange entre le HTML et le CSS. Le Javascript est, on va dire, plutôt pour des animations (ex : pluie d'étoile sous le curseur dans ce blog). 

Sur EklaBlog, le Javascript est désactivé sur vos blogs, par défaut. Vous pouvez l'activer en envoyant un message à Stéphanie en cliquant ici. 

2 - Où le placer ?

Une fois activé, le Javascript se place au même endroit que les codes HTML (dans "code source"). 

Pour notre premier code Javascript, voici un code pour mettre une pluie d'étoiles sous le curseur : 

<script type="text/javascript">
// <![CDATA[
var colour="#FFFFFF";
var sparkles=70;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Explications :

#FFFFFF c'est la couleur de la pluie d'étoile

Voici un lien vers un site pour avoir le code des couleurs : ColorPicker.com

Où place ce code ?

Créez une un module simple et mettez le code dans "code source" de ce module.

Voici un code Javascript pour avoir une bulle d'information sur un texte.

Passez votre souris sur ce texteVoilà ! Vous avez votre bulle d'information ! P'tite info : la bulle d'information est comme toutes les autres, donc si vous avez modifié votre bulle, celle-ci sera aussi modifiée. 

<a class="infobulle" onmouseover="Help.bubble(this)">TEXTE VISIBLE</a><span class="help_content">TEXTE INVISIBLE</span>

Explications :

TEXTE VISIBLE c'est le texte "normal"

TEXTE INVISIBLE c'est le texte dans la bulle

Où place ce code ?

Placez-le comme un code HTML.

Dans "édition d'un article" (là où vous écrivez votre article) vous verrez les 2 textes collés, c'est tout à fait normal 

Voici un code Javascript pour avoir faire une boite déroulante.

Une deuxième boîte

Vous pouvez même mettre des images :

Dans "édition d'un article" (là où vous écrivez votre article) vous verrez les 2 textes collés, c'est tout à fait normal  

Deux parties :

1- Javascript

<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">TEXTE</div>
</div>

Boite texte c'est le titre de la boite

TEXTEc'est le texte dans la boîte

Où place ce code ?

Placez-le comme un code HTML.

Mettez 2 fois ce code et vous aurez deux boîtes, etc, etc. 

2 - CSS

Dans la partie CSS, vous créez la forme, les couleurs, etc., de votre boite. 

.ma_boite { width:200px; height:18px; overflow:hidden; transition: height 1s; -moz-transition: height 1s; -webkit-transition: height 1s; -o-transition: height 1s; } .ma_boite:hover { height:150px; }     .title_box { color:black; background-color:#XXX; border: 1px solid #YYYY; border-radius: 5px; }

200 c'est la longueur de votre boite

18 c'est sa hauteur

black c'est la couleur du texte dans le titre de votre boite

#XXX c'est la couleur du fond du titre de votre boite

1 c'est l'épaisseur du contour du titre de votre boite

solid c'est son type de contour(voir Nom des contours)

#YYYY c'est la couleur du contour du titre

5 c'est comment sont arrondis les contours