Day'n'Night Map: Kostenlose DHTML und JavaScript Animation

Day'n'Night Map

Als global präsenter Unternehmer stehen Sie stündlich vor der existentiellen Frage: ist mein Texter in Mikronesien bereits im Office erreichbar? Oder steckt er noch im Pyjama und will folglich nicht gestört werden? Day'n'Night Map ist die ultimative Antwort auf diese weltbewegende Frage. Mit Day'n'Night Map sehen Sie auf einen Blick, wo Tag ist und wo Nacht. Das ganze funktioniert mit IE5x/6x, NS6x/7x und etwas weniger hübsch auch mit Opera 6x/7x. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

Schritt 1: Downloaden Sie die Datei daynight.zip.

Schritt 2: Unzippen Sie den Ordner daynight (er enthält 13 Mini-Bilder).

Schritt 3: Legen Sie den Ordner daynight in den gleichen Ordner, in dem sich auch die Webpage befindet, in die Sie eine Day'n'Night Map einbinden möchten.

Schritt 4: Öffnen Sie die Webpage, in die Sie eine Day'n'Night Map einbinden möchten. Benutzen Sie dazu einen simplen Texteditor wie z.B. NotePad oder WordPad.

Schritt 5: Kopieren Sie den folgenden Code und fügen sie ihn dort ein, wo Ihre Day'n'Night Map erscheinen soll.

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this script will be running.

var globalmapimage="daynight/globalmap.gif"
var path="daynight/"
var globalmapwidth=105
var globalmapheight=62
var nightzonewidth=globalmapwidth
var nightzoneheight=globalmapheight
var clipnighttop
var clipnightbottom
var clipnightright=0
var clipnightleft=0
var clipnightpoints
var differencehours
var differencepixels
var now=new Date()
var utchours=now.getUTCHours()
var monthimage=now.getMonth()

if (monthimage==0) {monthimage="january"}
else if (monthimage==1) {monthimage="february"}
else if (monthimage==2) {monthimage="march"}
else if (monthimage==3) {monthimage="april"}
else if (monthimage==4) {monthimage="may"}
else if (monthimage==5) {monthimage="june"}
else if (monthimage==6) {monthimage="july"}
else if (monthimage==7) {monthimage="august"}
else if (monthimage==8) {monthimage="september"}
else if (monthimage==9) {monthimage="october"}
else if (monthimage==10) {monthimage="november"}
else if (monthimage==11) {monthimage="december"}

var preloadmonthimage=new Image()
preloadmonthimage.src=path+monthimage+".gif"

var preloadglobalmap=new Image()
preloadglobalmap.src=globalmapimage

var browserinfos=navigator.userAgent 
var ns6=!document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ie4=document.all&&!document.getElementById&&!browserinfos.match(/Opera/)
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function initiatedaynight() {
	clipnighttop=0
	clipnightbottom=globalmapheight
	if (ie4 || ie5) {
		document.all.globalmap.style.visibility="visible"
		nightzoneright.innerHTML="<img src='"+path+""+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
		nightzoneleft.innerHTML="<img src='"+path+""+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
	}
	if (ns6 || opera) {
		document.getElementById("globalmap").style.visibility="visible"
		document.getElementById("nightzoneright").innerHTML="<img src='"+path+""+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
		document.getElementById("nightzoneleft").innerHTML="<img src='"+path+""+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
	}
	
	setnightstripes()
}

function setnightstripes() {
	differencepixels=globalmapwidth/24*utchours
	clipnightright=globalmapwidth
	if (ie4 || ie5) {
		clipnightleft=document.all.globalmap.style.posLeft-document.all.nightzoneleft.style.posLeft
	
		clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
		document.all.nightzoneleft.style.posLeft-=differencepixels
		document.all.nightzoneleft.style.clip=clipnightpoints
		document.all.nightzoneleft.style.visibility="visible"
		document.all.nightzoneright.style.posLeft=document.all.nightzoneleft.style.posLeft+globalmapwidth
		clipnightleft=0
		clipnightright=globalmapwidth-(document.all.nightzoneright.style.posLeft-document.all.globalmap.style.posLeft)
		clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
		document.all.nightzoneright.style.clip=clipnightpoints
		document.all.nightzoneright.style.visibility="visible"
	}
	if (ns6 || opera) {
		clipnightleft=parseInt(document.getElementById("globalmap").style.left)-parseInt(document.getElementById("nightzoneleft").style.left)
clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
document.getElementById("nightzoneleft").style.left=parseInt(document.getElementById("nightzoneleft").style.left)-differencepixels
		document.getElementById("nightzoneleft").style.clip=clipnightpoints
		document.getElementById("nightzoneleft").style.visibility="visible"
		document.getElementById("nightzoneright").style.left=parseInt(document.getElementById("nightzoneleft").style.left)+globalmapwidth
		
		clipnightleft=0
		clipnightright=globalmapwidth-(parseInt(document.getElementById("nightzoneright").style.left)-parseInt(document.getElementById("globalmap").style.left))
		clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
		document.getElementById("nightzoneright").style.clip=clipnightpoints
		document.getElementById("nightzoneright").style.visibility="visible"
	}
}

if (ns6 || ie4 || ie5 || opera) {
	window.onload=initiatedaynight
}
</script>
<div id="roofmap" style="position:relative;width:105px;height:62px;overflow:hidden">
<span id="globalmap" style="position:absolute;top:0px;left:0px;width:105px;height:62px;visibility:hidden"><img src="daynight/globalmap.gif" width=105 height=62></span>
<span id="nightzoneleft" style="position:absolute;top:0px;left:0px;width:105px;height:62px;visibility:hidden;filter:alpha(opacity=30);-moz-opacity:0.2"></span>
<span id="nightzoneright" style="position:absolute;top:0px;left:0px;width:105px;height:62px;visibility:hidden;filter:alpha(opacity=30);-moz-opacity:0.2"></span>
</div>

back

Text, Texter, Writer, Peter Gehrig, Werbung, Werbetexter, Home, Post, free, download, scripts, Inserate, Prospekte, Plakat, KMU, Werbebrief, Grafik, Kommunikation, DHTML, Texte, Werber, Werbeagentur, Werbung, Freelance, gratis, Rabatt, Peter Gehrig, Werbebriefe, Mailings, preiswert, www.fabulant.com, about us, Text, USP, Headline, Werber, Werbeagentur, Werbung, Kontakt, Adresse, Anschrift, Kommunikation, Applets, Ort, Gratis, Angebot, Leistung, Texte, Texter, Radiospots, Kunden, Werbung, Kurs, Textkurs, schreiben, Werbung, Texter, Schreibregeln, Unternehmen, DHTML, JavaScript, Script, Scripts, Applet, Web, Internet, Homepage, Website, Rabatt, CSS, XML, gratis, download, free, Scroller, Ticker, Slideshow, Animation, Clock, utility, Text, Marquee, Background, fade, Preise, billig, günstig, preiswert, Texter, Peter Gehrig, PR, Home, free, download, scripts, Inserate, Prospekte, DHTML, Texte, Werber, Werbeagentur, Werbebriefe, Werbung, freischaffend, Freelance, gratis, Texter, Texte, AMAG, UBS, Feldschlösschen, Sarasin, Aargauische Kantonalbank, AKB, Zysset & Partner, Moritzi Werbung, Kunden, Werbekunden, Electrolux, Seat, Volkswagen, VW, Peter Gehrig, PR, Home, free, download, DHTML, Texte, Werber, Werbeagentur, Werbebriefe, Werbung, Freelance, gratis