Comment faire un post-it en javascript ?

 

par meltech1 |

     
Comment faire un post-it en javascript ?

Vous avez déjà tous vu un post-it, ce petit papier qu'on colle partout avec une information dessus qui indique un texte. Ce texte, vous l'écrivez pour vous comme aide mémoire ou bien pour une tierce personne qui va lire ce que vous avez marqué. Vous pouvez en javascript programmer un post-it pour le coller dans votre site Internet. Voici comment faire.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel bloc notes

Étapes de réalisation

1.

Commencez par ouvrir votre page Internet avec "bloc notes" pour en obtenir le code source. C'est le programme de votre site Internet qui contient les balises. Veuillez chercher la balise <head>.

2.

Comment faire un post-it en javascript ?

Dans la balise <head> veuillez insérer le script suivant :
<script Language="Javascript">
<!--
Postit=new Array();
Postit[0]="<b>Postit n°1 :</b><BR><BR>N'est-ce pas une <br>agréable façon d'indiquer<br>des nouveautés à vos<br> visiteurs ?";
Postit[1]="<b>Postit n°2 :</b><BR><BR>N'est-ce pas une <br>agréable façon d'indiquer<br>des nouveautés à vos<br> visiteurs ?";
Postit[2]="<b>Postit n°3 :</b><BR><BR>N'est-ce pas une <br>agréable façon d'indiquer<br>des nouveautés à vos<br> visiteurs ?";
Postit[3]="<b>Postit n°4 :</b><BR><BR>N'est-ce pas une <br>agréable façon d'indiquer<br>des nouveautés à vos<br> visiteurs ?";
Postit[4]="<b>Postit n°5 :</b><BR><BR>N'est-ce pas une <br>agréable façon d'indiquer<br>des nouveautés à vos<br> visiteurs ?";

// Choix aléatoire du postit à afficher
function RandomPostit() {
if (Postit.length>0) {
nombre=(Math.floor((Postit.length)*Math.random()));
return Postit[nombre];
} else {
return Postit[0];
}
}

function AfficherPostit(xo,yo,texte) {
// Si le navigateur est autre que IE (il doit respecter les dernières normes du DHTML pour pouvoir afficher le postit)
if (!document.all){
// Définition du calque dans une variable pour plus de commodité
calque=document.getElementById('postit');
// Si la coordonnée xo du postit vaut -1, alors on le centre en largeur
if (xo==-1){xo=(window.innerWidth/2)-120;}
// Si la coordonnée xo du postit vaut -1, alors on le centre en hauteur
if (yo==-1){yo=(window.innerHeight/2)-120;}
// Application de la position au calque
calque.style.left=xo;
calque.style.top=yo;
// Insertion du contenu du postit
document.getElementById('contenu').innerHTML="<font color=#000000 size=2 face=verdana>"+texte+"</font>";
// Et enfin affichage du calque
calque.style.visibility="visible";
}
else { // Si le navigateur est IE
// Idem que ci-dessus pour le reste
if (xo==-1){xo=(document.body.clientWidth/2)-120;}
if (yo==-1){yo=(document.body.clientHeight/2)-120;}
document.all.postit.style.left=xo;
document.all.postit.style.top=yo;
document.all.contenu.innerHTML='<font color=#000000 size=2 face=verdana>'+texte+'</font>';
document.all.postit.style.visibility="visible";
}
}

function FermerPostit() {
if (!document.all) {
calque=document.getElementById('postit');
calque.innerHTML="";
calque.style.visibility="hidden";
}
else {
postit.innerHTML="";
document.all.postit.style.visibility="hidden";
}
}
//-->
</script>
L'image du post-it se trouve en image jointe.

3.

Comment faire un post-it en javascript ?

Veuillez insérer le script suivant dans la balise <body> dans les <> :
<body onload="AfficherPostit(-1,-1,RandomPostit())">.

4.

Comment faire un post-it en javascript ?

Sous la balise <body> veuillez insérer le script suivant :
<div id="postit"
style="position:absolute;left:-240px;top:0px;width:240px;height:240px;visibility:hidden"
>
<table border=0 cellpading=0 width=240 height=240 background="33.gif">
<tr>
<td align=center valign=middle>
<div id="contenu"></div>
</td>
</tr>
</table>
<div id="close" style="position:relative;top:-230;left:100;width:21;height:21;">
<a href="javascript:FermerPostit()"><img src="33.gif" border=0></a>
</div>
</div>.

5.

Pour terminer enregistrez le tout avec "bloc notes" et ouvrez avec IE. Vous obtenez le post-it qui s'affiche. Le texte est à placer dans la balise <head> et l'image est en pièce jointe.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on