|
• Des SCRIPTS gratuits, expliqués et personnalisables. |
Cliquez sur "download" pour télécharger le kit nécessaire.
Compatible IE et NS (v4.75: oui; v6: non). Personnalisable: les 4 images nécessaires à l'effet, la vitesse, délai de démarrage de l'effet, l'URL éventuellement associée à l'image cliquée. Nous avons détourné ici le script présenté par ailleurs par KITWEB sous l'appellation "Ballon fou_04" à la rubrique "Gag" !
1/ Insérer entre HEAD et /HEAD :
ou entre BODY et /BODY
<script>
<!-- Beginning of JavaScript -
/* WallBall by Peter Gehrig http://www.24fun.ch, info@24fun.ch, 11/4/1999 */
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
// Plus le chiffre est petit, plus la vitesse est grande
var tempo=75
// Déplacement horizontal (pixels), par unité de temps
var stepx=20
// Déplacement vertical (pixels), par unité de temps
var stepy=20
var timer
// Précharger les 4 balles, pour un affichage fluide
img0 = new Image();
img0.src = "KITWEB_gag04_ld.gif";
img1 = new Image();
img1.src = "KITWEB_gag04_lu.gif";
img2 = new Image();
img2.src = "KITWEB_gag04_rd.gif";
img3 = new Image();
img3.src = "KITWEB_gag04_ru.gif";
// Délai avant le démarrage de l'effet (pensez au temps de chargement des 4 images nécessaires à l'effet...)
function setValues() {
var firsttimer= setTimeout("setValues2()",3000)
}
// Teste la largeur et la hauteur de la page
// Fait démarrrer l'effet à n'importe quel endroit
function setValues2() {
if (document.all) {
marginbottom = document.body.clientHeight-50
marginright = document.body.clientWidth-50
document.all.ball.style.posLeft=randommaker(marginright-30)+30
document.all.ball.style.posTop=10
moveball()
}
if (document.layers) {
marginbottom = window.innerHeight-10
marginright = window.innerWidth-10
document.ball.left=randommaker(marginright-30)+30
document.ball.top=10
moveball()
}
}
// randomfunction
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function moveball() {
checkposition()
chooseimage()
if (document.all) {
document.all.ball.style.posLeft+=stepx
document.all.ball.style.posTop+=stepy
timer=setTimeout("moveball()",tempo)
}
if (document.layers) {
document.ball.left+=stepx
document.ball.top+=stepy
timer=setTimeout("moveball()",tempo)
}
}
function checkposition() {
if (document.all) {
if (document.all.ball.style.posLeft>=marginright) {
stepx=stepx*-1
document.all.ball.style.posLeft-=10
}
if (document.all.ball.style.posLeft<=marginleft) {
stepx=stepx*-1
document.all.ball.style.posLeft+=10
}
if (document.all.ball.style.posTop>=marginbottom) {
stepy=stepy*-1
document.all.ball.style.posTop-=10
}
if (document.all.ball.style.posTop<=margintop) {
stepy=stepy*-1
document.all.ball.style.posTop+=10
}
}
if (document.layers) {
if (document.ball.left>=marginright) {
stepx=stepx*-1
document.ball.left-=10
}
if (document.ball.left<=marginleft) {
stepx=stepx*-1
document.ball.left+=10
}
if (document.ball.top>=marginbottom) {
stepy=stepy*-1
document.ball.top-=10
}
if (document.ball.top<=margintop) {
stepy=stepy*-1
document.ball.top+=10
}
}
}
function chooseimage() {
if (document.all) {
if (stepx <= 0 && stepy <=0) {ballimage.src="KITWEB_gag04_lu.gif"}
if (stepx >= 0 && stepy <=0) {ballimage.src="KITWEB_gag04_ru.gif"}
if (stepx <= 0 && stepy >=0) {ballimage.src="KITWEB_gag04_ld.gif"}
if (stepx >= 0 && stepy >=0) {ballimage.src="KITWEB_gag04_rd.gif"}
}
if (document.layers) {
if (stepx <= 0 && stepy <=0) {document.ball.document.ballimage.src="KITWEB_gag04_lu.gif"}
if (stepx >= 0 && stepy <=0) {document.ball.document.ballimage.src="KITWEB_gag04_ru.gif"}
if (stepx <= 0 && stepy >=0) {document.ball.document.ballimage.src="KITWEB_gag04_ld.gif"}
if (stepx >= 0 && stepy >=0) {document.ball.document.ballimage.src="KITWEB_gag04_rd.gif"}
}
}
// - End of JavaScript - -->
</script>
Les lignes à personnaliser sont indiquées dans le script.
2/ Insérer DANS la balise BODY :
<BODY onLoad=setValues()>
3/ Insérer entre BODY et /BODY :
<DIV id="ball" style="POSITION: absolute; TOP: -50px"><a href="http://kitweb.free.fr"><IMG border=0 name=ballimage src="KITWEB_gag04_rd.gif"></a></DIV>Où vous indiquerez: l'URL éventuellement associée au visuel cliqué, le nom de la première image affichée.