Schneeflocken

<script language="JavaScript1.2">
<!--

var snowsrc="gfxu/snow.gif"
var no = 10;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 1024, doc_height = 768;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://www.jswelt.de/\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://java.topcool.de\"><img src='"+snowsrc+"' border=\"0\"></a></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"></div>");
}
}
}
function snowNS() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}
function snowIE() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", 10);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// -->
</script>

Dazu wird noch ein Schneeflockenbild benötigt!

Hier ist noch die benötigte Grafik snow.gif. Sie muss im Verzeichnis gfxu/ liegen, wenn Sie ein anderes Verzeichnis nehmen wollen, so müssen Sie die Zeile var snowsrc="gfxu/snow.gif" anpassen.

Quelle: http://www.jswelt.de/index.php?opencat=JavaScripts&artid=977124932

Homepage-Alter

<script language="JavaScript">
<!--
today = new Date();
bYear = 1999; // Start Jahr
bMonth = 10; // Start Monat
bDay = 5; // Start Tag
tYear = today.getFullYear();
tMonth = (today.getMonth() ) + 1 ;
tDay = today.getDate();
tHour = today.getHours();
fYear = 0;
fMonth = 0;
fDay = 0;
fHour = 0;
x = 0;
y = 0;
z = 0;
a = 0;
b = 0;
c = 0;
function testMonth() {
if (y==4 y==6 y==9 y==11) x=30
else if (y==2) x=28
else x=31
}
function testDay() {
fDay = (z - bDay) + tDay;
if (fDay > a) {
fMonth += 1;
fDay = fDay - a;
}
}
y = bMonth;
testMonth();
z = x;
y = bMonth;
testMonth();
a = x;
if (bMonth <= tMonth) {
fYear = tYear - bYear;
fMonth = (tMonth - bMonth);
testDay();
}
fYear = (tYear - bYear) - 1
fMonth = ((12 - bMonth) + tMonth) - 1;
testDay();
if (fMonth >= 12) {
fYear += 1;
fMonth -= 12;
}
with(Math) {
theYear=fYear;
tensYear=floor(theYear/10);
onesYear=theYear-(tensYear*1);
theMonth=fMonth
tensMonth=floor(theMonth/10);
onesMonth=theMonth-(tensMonth*1);
theDay=fDay
tensDay=floor(theDay/10);
onesDay=theDay-(tensDay*1);
var testArray = new makeArray("Januar","Februar","M&auml;rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
for (z=1; z<=12; z++) {
if (tMonth==z) {
var b=testArray[z]
}
}
for (z=1; z<=12; z++) {
if (bMonth==z) {
var c=testArray[z]
}
}
}
var page
page = "Heutiges Datum: <b>"+tDay+". "+b+" "+tYear+".</b><br>"
page += "Diese Seite ist seit dem <b>"+bDay+". "+c+" "+bYear+"</b> im Netz<br>"
page += "Also genau <b>"
if(parseInt(tensYear+onesYear) == 1) {
page += tensYear + onesYear + " Jahr</b>,<b> "
}
else {
page += tensYear + onesYear + " Jahre</b>,<b> "
}
if(parseInt(tensYear+onesYear) == 0) {
page += ""
}

if(parseInt(tensMonth+onesMonth) == 1) {
page += tensMonth + onesMonth + " Monat </b>und<b> "
}
else {
page += tensMonth + onesMonth + " Monate </b>und<b> "
}
if(parseInt(tensDay+onesDay) == 1) {
page += tensDay + onesDay + " Tag</b>."
}
else {
page += tensDay + onesDay + " Tage</b>."
}
function makeArray() {
this.length = makeArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = makeArray.arguments
}
document.write(page)
// -->
</script>

Fadin Ticker

<body onload="if (document.all||document.layers){regenerate2();update()}">
<style>
<!--
#tickertape{position:relative;layer-background-color:black;width:400;height:12;}
#subtickertape{background-color:black;position:center;border: 1px solid black;width:400;height:12;}
.subtickertapefont{font:bold 12px Verdana;text-decoration:none;color:white;}
.subtickertapefont a{color:white;text-decoration:none;}
-->
</style>


<div align="center";id="tickertape">
<div id="subtickertape" class="subtickertapefont">Initializing...</div>
</div>

<script language="JavaScript1.2">

var speed=4500
var news=new Array()
news[0]="<p align=center><a href='http://java.topcool.de'> { Java Script }</a>"
news[1]="<p align=center><a href='http://java.topcool.de'>finden sie auch auf unseren Parterseiten</a>"
news[2]="<p align=center><a href='Mailto:Black_runner@t-online.de'>Black_runner@t-online.de</a>"

i=0
if (document.all)
tickerobject=document.all.subtickertape.style
else
tickerobject=document.tickertape.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}
function update(){
BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news+'</span>')
document.tickertape.document.subtickertape.document.close()
}
else
document.all.subtickertape.innerHTML=news[i]
if (i<news.length-1)
i++
else
i=0
setTimeout("update()",speed)
}
function BgFade(red1, grn1, blu1, red2,
grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
if (document.layers)
tickerobject.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
else
tickerobject.backgroundColor=
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
</script>

Quelle: http://www.jswelt.de/index.php?opencat=JavaScripts&artid=977092589

Einfache Diashow

:arrow: zwischen <HEAD> und </HEAD>

<script language="JavaScript">

<!-- Begin
NewImg = new Array (
"at08t1_01_prot.jpg",
"at08t1_02_prot.jpg",
"at08t1_03_prot.jpg",
"at08t1_04_prot.jpg",
"at08t1_05_prot.jpg",
"at08t1_06_prot.jpg",
"at08t1_07_prot.jpg",
"at08t1_08_prot.jpg",
"at08t1_09_prot.jpg",
"at08t1_10_prot.jpg",
"at08t1_11_prot.jpg",
"at08t1_12_prot.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 4000;

var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
// End -->
</script>

:arrow: in den <BODY> Tag

<img src="at08t1_01_prot.jpg" name="slideshow">
<table>
<tr>
<td align="right">[ <a href="javascript:chgImg(-1)">Previous</a> ]</td>
<td align="center">[ <a href="javascript:auto()">Auto/Stop</a> ]</td>
<td align="left">[ <a href="javascript:chgImg(1)">Next</a> ]</td>
</tr>
</table>

AutoPopUp

:arrow: zwischen <HEAD> und </HEAD>

<script language="JavaScript">

<!-- Begin
function popupWin() {
text = "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<a href='http://www.nightfire.ch/java/news.htm' target='_blank'><h2>Nightfire News</h2></a>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 3000); // öffnet Fenster nach drei Sekunden
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 5000); // schliesst Fenster nach 5 Sekunden
}
function closeWin(newWindow) {
newWindow.close(); // close small window and depart
}
// End -->
</script>

:arrow: in den <BODY> Tag

onLoad="popupWin()"

[hr]

Damit geht es auch! Schließt sich aber nicht selbst!

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert('Verweisziel noch nicht erreichbar')">Unsere Erfolge</a>
</body></html>

Dieses JavaScript zeigt Bilder animiert, mit einer Art "Zoom"-Funktion an. Um die Animation zu starten klicken Sie auf ein Bild.

Quelltext:
<script type="text/javascript">
// Bilder anzeigen mit "Zoom"-Funktion

var zaehler = 50;
function aufmachen(breite,ID) {
if (zaehler < breite) {
document.getElementById(ID).style.display="inline";
document.getElementById(ID).style.width=zaehler+"px";
zaehler += 10;
window.setTimeout("aufmachen("+breite+",'"+ID+"')",0);
}
else {
document.getElementById("beschreibung-"+ID).style.display="block";
}
}

function zumachen(ID) {
document.getElementById(ID).style.display="none";
document.getElementById("beschreibung-"+ID).style.display="none";
zaehler = 50;
}
</script>

<style type="text/css">
.bereich {
position: absolute;
text-align: center;
font-weight: bold;
}

.beschreibung {
color: #FFFFFF;
background-color: #000000;
display: none;
}
</style>

<!-- Erstes Bild -->
<span class="bereich">
<img src="gross1.jpg" style="display: none;" id="bild_1" border="1"
onMouseOut="zumachen('bild_1');"><br>
<span id="beschreibung-bild_1" class="beschreibung">
Beschreibung 1
</span>
</span>
<img src="klein1.jpg" border="1"
onClick="aufmachen(250,'bild_1');" style="cursor: pointer;">

<!-- Zweites Bild -->
<span class="bereich">
<img src="gross2.jpg" style="display: none;" id="bild_2" border="1"
onMouseOut="zumachen('bild_2');"><br>
<span id="beschreibung-bild_2" class="beschreibung">
Beschreibung 2
</span>
</span>
<img src="klein2.jpg" border="1"
onClick="aufmachen(250,'bild_2');" style="cursor: pointer;">

Quelle: http://www.homepage-total.de/javascript/bilder_js-animation1.php

Bilder als Popup in Bildergrösse öffnen

Hallo
Bei Bildern auf einer Webseite kann es Sinnvoll sein,
ein Zoombild mit anzubieten - welches als Popup geöffnet wird
und die Grösse des Bildes hat

wenn man aber viel Bilder als Zoom mit anbieten möchte
z.B. bei einem Shop - würde das in erheblicher Arbeit enden

1. Bildgrösse bestimmen 2. html Seite für das Popup bauen

und das für jedes Bild - und die Arbeit wird noch erheblich mehr,
wenn die Zoombilder alle unterschiedlich gross sind

hier unser kleines Script, welches eine menge Arbeit ersparen kann




<script type="text/javascript">
<!--
function OpenFoto(img){
foto= new Image();
foto.src=(img);
ControlFoto(img);
}

function ControlFoto(img){
if((foto.width!=0)&&(foto.height!=0)){
ViewFoto(img);
}
else{
interval_a="ControlFoto('"+img+"')";
interval_b=setTimeout(interval_a,20);
}
}
function ViewFoto(img){
width=foto.width+20;
height=foto.height+24;

try {
if (output.closed == false) throw "offen";
}
catch (e) {
if (e=="offen") {
output.close();
}
}
output=window.open("","output","left=40,top=40,width="+width+",height="+height+",location=no,toolbar=no,menubar=no,status=no,scrol lbars=no,resizable=no");
output.document.writeln("<html><head><title>..:: Foto ::..<\/title><\/head>");
output.document.writeln("<body bgcolor=\"white\" text=\"white\" link=\"white\" vlink=\"white\" alink=\"white\" leftmargin=\"0\" marginwidth=\"0\" topmargin=\"0\" marginheight=\"0\">");
output.document.writeln("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" height=\"100%\">");
output.document.writeln("<tr><td width=\"100%\" height=\"100%\" align=\"left\" valign=\"top\"><p><a href=\"javascript:self.close()\"><img src=\""+img+"\" width=\""+foto.width+"\" height=\""+foto.height+"\" border=\"10\" alt=\"click here to close the window\"></a><\/p><\/td><\/tr>");
output.document.writeln("<\/table><\/body><\/html>");
output.document.close();
output.focus();
}


und der link, welcher das grossbild öffnet


<a href="#" onclick="OpenFoto('pfad/bild.jpg')"><img src="vorschau.jpg" alt="click for zoom" width="200" height="100" border="0"></a>

// -->
</script>

Quelle: http://www.webmasterbiz.de/archive/index.php/t-742.html