Bonjour Mickey7,
Tu trouveras ci-dessous le code complet d'un exemple d'une page HTML qui affiche juste le post-it, en fait j'ai copier/coller les lignes de code du lien de ma réponse précédente au bon endroit, tu n'auras plus qu'a copier/coller au bon endroit:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Page</title>
<script Language="Javascript">
<!--
/*
Affiche un postit sur la page
Amélioré par le site WEB Creation :
- 20030801 : est maintenant compatible avec Netscape 6+ et Mozilla 1+
- 20030801 : amélioration du code et ajout d'un tableau de postits permettant de générer aléatoirement des postits
D'autres scripts ?
>> http://www.web-creation-fr.com
*/
// Vous pouvez rentrer plusieurs postits pour en afficher de façon aléatoire
// Si vous ne voulez en afficher qu'un, il suffit de ne garder que le Postit[0]
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>
</head>
<body onload="AfficherPostit(-1,-1,RandomPostit())">
<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_postit.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_punaise.gif" border=0 width="16" height="21"></a>
</div>
</div>
</body>
Il suffit juste encore de changer l'emplacement des images 33_postit.gif et 33_punaise.gif
A plus
Aspirateur page web
