Hjerter på hjemmesiden til Valentins dag
Sat på siden 10-02-2006
Vil du gøre hjemmesiden mere romantisk til Valentins dag? Så kan du sætte et javascript på, der får to hjerter til at svæve rundt på siden.
Du skal kopiere scriptet her nedenfor og gemme det i en fil, som du kalder "hearts.js". Du skal nok tage det fra hjemmesiden i stedet for e-mailen, så du undgår linjeskift de forkerte steder i scriptet. Kopier det evt. herfra: www.tips-og-tricks.com/eksempler/hearts.js
// Wandering Hearts Script
// copyright Stephen Chapman, 27th
January 2006
// you may copy this script provided that you retain the
copyright notice
function start() {
ha = new heart(0,0,'heart0');
hb = new
heart(pageWidth()-objWidth('heart1'),0,'heart1');
mover();
}
function
moveit() {
ha.moveit();
hb.moveit();
}
// no changes required below
var aDOM = 0, ieDOM = 0, nsDOM = 0; var
stdDOM = document.getElementById;if (stdDOM) aDOM = 1; else {ieDOM =
document.all; if (ieDOM) aDOM = 1; else {var nsDOM =
((navigator.appName.indexOf('Netscape') != -1)&&
(parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}function
xDOM(objectId, wS) {if (stdDOM) return wS ?
document.getElementById(objectId).style:document.getElementById(objectId);if
(ieDOM) return wS ? document.all[objectId].style:
document.all[objectId];if (nsDOM) return
document.layers[objectId];}function objWidth(objectID) {var obj =
xDOM(objectID,0); if(obj.offsetWidth) return obj.offsetWidth; if
(obj.clip) return obj.clip.width; return 0;}function objHeight(objectID)
{var obj = xDOM(objectID,0); if(obj.offsetHeight) return obj.offsetHeight;
if (obj.clip) return obj.clip.height; return 0;}function objLeft(objectID)
{var obj = xDOM(objectID,0);var objs = xDOM(objectID,1);
if(objs.left) return objs.left; if (objs.pixelLeft) return objs.pixelLeft;
if (obj.offsetLeft) return obj.offsetLeft; return 0;}function
objTop(objectID) {var obj = xDOM(objectID,0);var objs =
xDOM(objectID,1); if(objs.top) return objs.top; if (objs.pixelTop)
return objs.pixelTop; if (obj.offsetTop) return obj.offsetTop; return
0;}function setObjVis(objectID,vis) {var objs = xDOM(objectID,1);
objs.visibility = vis;}function moveObjTo(objectID,x,y) {var objs =
xDOM(objectID,1); objs.left = x; objs.top = y;}function pageWidth()
{return window.innerWidth != null? window.innerWidth: document.body !=
null? document.body.clientWidth:null;}function pageHeight() {return
window.innerHeight != null? window.innerHeight: document.body != null?
document.body.clientHeight:null;}function posLeft() {return typeof
window.pageXOffset != 'undefined' ?
window.pageXOffset:document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft?
document.body.scrollLeft:0;}function posTop() {return typeof
window.pageYOffset != 'undefined' ?
window.pageYOffset:document.documentElement.scrollTop?
document.documentElement.scrollTop:
document.body.scrollTop?document.body.scrollTop:0;}function mover()
{moveit(); setTimeout('this.mover()',25);}function distance(s,e) {return
Math.abs(s-e)}function direction(s,e) {return s>e?-1:1}function
rate(a,b) {return a<b?a/b:1}function heart(x,y,obj) {this.xxx = x;
this.yyy = y;this.dist = this.distX = this.distY = 0;this.stepx =
2;this.stepy = 2;this.obj =
obj;this.nextEnd();this.moveit();setObjVis(this.obj,'visible');}heart.prototype.nextEnd
= function() {var eX = Math.floor(Math.random()*
(pageWidth()-objWidth(this.obj)));var eY = Math.floor(Math.random()*
(pageHeight()-objHeight(this.obj)));this.dist = this.distX =
distance(this.xxx,eX);this.distY = distance(this.yyy,eY);this.stepx = 2 *
direction(this.xxx,eX) * rate(this.distX,this.distY);this.stepy = 2 *
direction(this.yyy,eY) * rate(this.distY,this.distX);};
heart.prototype.moveit = function() {if (this.dist > 0) {this.xxx +=
this.stepx;this.yyy += this.stepy;this.dist -= Math.abs(this.stepx);}else
{this.nextEnd();}var x = (posLeft()+this.xxx);var y =
(posTop()+this.yyy);moveObjTo(this.obj,x,y);}
window.onload = start;
window.onscroll = moveit;
......
Scriptet skal kaldes ind i html-koden på din hjemmesiden i området <head> sammen med et stylesheet, sådan her:
......
<script type="text/javascript"
src="hearts.js">
</script>
<style>
#heart0,#heart1
{z-Index:999; visibility:hidden; position:absolute; top:0; left:0;
width:69px;}
</style>
.....
Gem billedet "heart.gif" samme sted som din hjemmeside ved at højreklikke på det og vælge Gem billede som.
Indsæt til sidst denne kode et vilkårligt sted i <body>-delen af din hjemmeside:
.......
<div id="heart0"><img src="heart.gif" width="69" height="60" alt="heart" /></div><div id="heart1"><img src="heart.gif" width="69" height="60" alt="heart" /></div>
....
Upload det hele til serveren, og send din elskede linket ;-)