|
• Des SCRIPTS gratuits, expliqués et personnalisables. |
KITWEB ... est fait pour vous ! !
Scripts Cliparts Backgrounds Sons Fontes etc
Cliquez sur "download" pour télécharger le kit nécessaire
Compatible IE et NS (v4.75: oui; v6: non, mais sans erreur).
1/ Ajouter entre les balises <HEAD> et </HEAD>:
ou entre body et /body...
<script>
<!--
// Script de Shiv Basu - www.shivbasu.com
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init1() {
if(ns4){
pic1 = document.texte1;
}
else
if (ie4) {
pic1 = texte1.style;
}
slideit1()
}
function slideit1() {
pic1.left = parseInt(pic1.left)-2;
if (parseInt(pic1.left) < -400)
{ pic1.left =50 }
setTimeout("slideit1()",80);
}
function timer1(){
if(ns4||ie4){
setTimeout("javascript:init1()",1000)
}
}
function init2() {
if(ns4){
pic2 = document.texte2;
}
else
if (ie4) {
pic2 = texte2.style;
}
slideit2()
}
function slideit2() {
pic2.left = parseInt(pic2.left)-2;
if (parseInt(pic2.left) < -400)
{ pic2.left =50 }
setTimeout("slideit2()",80);
}
function timer2(){
if(ns4||ie4){
setTimeout("javascript:init2()",15000)
}
}
// -->
</script>
Les fonctions "1" [init1(), slideit1(), timer1()] ont trait au premier texte [id="texte1"],
les fonctions "2" [init2(), slideit2(),timer2()] au texte 2 [id="texte2"].
La fonction slideit() fera glisser le bloc de texte de sa position initiale x à sa position d'arrivée -x.
| function slideit1() { pic1.left = parseInt(pic1.left)-2; if (parseInt(pic1.left) < -400) { pic1.left =50 } setTimeout("slideit1()",80); } |
-2 est le nombre de pixels de déplacement. -400 correspond à la position d'arrivée (-x). 50 correspond à la position de départ (x). 80 correspond à la fréquence avec laquelle se fait le déplacement. |
| setTimeout("javascript:init1()",1000)5 | : soit ici 1 seconde. |
| setTimeout("javascript:init2()",15000) | : soit ici 15 secondes. |
2/ Ajouter juste après le body:
<div id="texte0" style="position:absolute; top:50; left:50; width:170"></div>
<div id="texte1" style="position:absolute; top:50; left:-400; width:170">Ici votre premier texte !</div>
<div id="texte2" style="position:absolute; top:50; left:-400; width:170">Ici votre second texte !</div>
Explications :
- <div id="texte0" style="position:absolute; top:50;
left:50; width:170"></div>
où top:50 est la position par rapport au bord supérieur de la fenêtre.
où left:50 est la position de départ du bloc de texte, le x du graphique.
où width:170 est la largeur occupée par le bloc de texte. Quelques essais seront nécessaires.
Cette première valise div ne sert qu'à déterminer la zone de position de départ du bloc de texte.
Elle peut être vide ou comporter elle aussi un texte. - <div id="texte1" style="position:absolute; top:50;
left:-400; width:170">Le texte 1 ici !</div>
où top:50 est la position par rapport au bord supérieur de la fenêtre (identique à id="texte0").
où left:-400 est la position d'arrivée du bloc de texte, le -x du graphique.
où width:170 est la largeur occupée par le bloc de texte. (identique à id="texte0").
Vous modifierez le texte 1 à votre convenance. - <div id="texte2" style="position:absolute; top:50;
left:-400; width:170">Le texte 2 Ici !</div>
où top:50 est la position par rapport au bord supérieur de la fenêtre (identique à id="texte0").
où left:-400 est la position d'arrivée du bloc de texte, le -x du graphique.
où width:170 est la largeur occupée par le bloc de texte. (identique à id="texte0").
Vous modifierez le texte 2 à votre convenance.
3 Ajouter dans la balise body:
<body onload="timer1();timer2();">