Kleines Grundgerüst für ein Fotoalbum, die Pfade müssen noch entsprechend angepasst werden.
Die Auswahlbilder befinden sich im Verzeichnis thumbnails und die eigentlichen Bilder im Verzeichnis original.
Es ist eigentlich nur eine einfache Tabelle.
Die Bildgröße wird mit einem Bildbearbeitungsprogramm entsprechend angepasst.
Der Quellentext muss sich nicht unbedingt in den Dateien album.html oder album2.html befinden, er läßt sich in jeder anderen html Datei einbinden.
Quellentext
Code:
<table width="100%" cellpadding=0 cellspacing=0 border=0 align="center">
<tr>
<th colspan=4>Fotoalbum</th></tr>
<tr>
<td align="center">
<a href="/muster/album/original/test1.jpg" target="_blank"><img src="/muster/album/tumbnails/test1.gif" border="0" alt="test1"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test2.jpg" target="_blank"><img src="/muster/album/tumbnails/test2.gif" border="0" alt="test2"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test3.jpg" target="_blank"><img src="/muster/album/tumbnails/test3.gif" border="0" alt="test3"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test4.jpg" target="_blank"><img src="/muster/album/tumbnails/test4.gif" border="0" alt="test4"/></a>
</td>
</tr>
<tr>
<td align="center">test1</td>
<td align="center">test2</td>
<td align="center">test3</td>
<td align="center">test4</td>
</tr>
<tr>
<th colspan=4> </th>
</tr>
<tr>
<td align="center">
<a href="/muster/album/original/test5.jpg" target="_blank"><img src="/muster/album/tumbnails/test5.gif" border="0" alt="test5"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test6.jpg" target="_blank"><img src="/muster/album/tumbnails/test6.gif" border="0" alt="test6"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test7.jpg" target="_blank"><img src="/muster/album/tumbnails/test7.gif" border="0" alt="test7"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test8.jpg" target="_blank"><img src="/muster/album/tumbnails/test8.gif" border="0" alt="test8"/></a>
</td>
</tr>
<tr>
<td align="center">test5</td>
<td align="center">test6</td>
<td align="center">test7</td>
<td align="center">test8</td>
</tr>
</table>
Das gleiche, nur etwas aufgebessert.
Quellentext
Code:
<html>
<head>
<title>opsosite Test Fotoalbum</title>
<meta NAME="Audience" CONTENT="Alle">
<meta NAME="Author" CONTENT="ROFL">
<meta NAME="Classification" CONTENT="Webdesign">
<meta NAME="Copyright" CONTENT="ROFL">
<meta HTTP-EQUIV="Content-language" CONTENT="de">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta HTTP-EQUIV="Reply to" CONTENT="Rofl@roflweb.de">
<script Language="Javascript">
<!-- **** vor alten Browsern verstecken ****
var which=0;
var color= "";
var fade=1;
var r=255;
var g=0;
var b=0;
r_start=0;
g_start=0;
b_start=0;
r_end=255;
g_end=0;
b_end=0;
step=15;
var message= new Array();
message[0]='Fotoalbum'
// Füge so viele hinzu wie du willst
function hex_it(zahl) {
if (zahl==0) return("0"); if (zahl==1) return("1"); if (zahl==2) return("2");
if (zahl==3) return("3"); if (zahl==4) return("4"); if (zahl==5) return("5");
if (zahl==6) return("6"); if (zahl==7) return("7"); if (zahl==8) return("8");
if (zahl==9) return("9"); if (zahl==10) return("A"); if (zahl==11) return("B");
if (zahl==12) return("C"); if (zahl==13) return("D"); if (zahl==14) return("E");
if (zahl==15) return("F");
}
function byte_to_hex(zahl) {
wert1=Math.floor(zahl/16);
wert2=zahl-(wert1*16);
wert=hex_it(wert1) + hex_it(wert2);
return(wert);
}
function animate(){
color="#"+byte_to_hex(r)+byte_to_hex(g)+byte_to_hex(b);
if (document.layers) { //Netscape
document.animatedtext.document.writeln("<center><font face='Arial,Helvetica,MS Sans Serif' color="+color+" size=+2><NOBR><b>"+message[which]+"</b></NOBR></font><center>");
document.animatedtext.document.close();
}
else { //IExplorer
document.all.animatedtext.innerHTML="<center><font color="+color+" size=+2><NOBR><b>"+message[which]+"</b></NOBR></font></center>";
}
if (fade==1) { //einblenden
if (r_start<r_end) {if (r<r_end) r+=step; else r=r_end;}
else {if (r>r_end) r-=step;}
if (g_start<g_end) {if (g<g_end) g+=step; else g=g_end;}
else {if (g>g_end) g-=step;}
if (b_start<b_end) {if (b<b_end) b+=step; else b=b_end;}
else {if (b>b_end) b-=step;}
}
else { //ausblenden
if (r_start<r_end) {if (r>r_start) r-=step; else r=r_start;}
else {if (r<r_start) r+=step;}
if (g_start<g_end) {if (g>g_start) g-=step; else g=g_start;}
else {if (g<g_start) g+=step;}
if (b_start<b_end) {if (b>b_start) b-=step; else b=b_start;}
else {if (b<b_start) b+=step;}
}
// Einblenden beendet => Ausblenden
if ((r==r_end) && (g==g_end) &&(b==b_end)) {fade=-1;}
// Wieder Ausblenden beendet => nächste Message einblenden
if ((r==r_start) && (g==g_start) &&(b==b_start)) {
fade=1;r=r_start;g=g_start;b=b_start;
if (which<message.length-1) which+=1;
else which=0;
}
setTimeout('animate()',50);
}
function init() {
r=r_start;
g=g_start;
b=b_start;
setTimeout('animate()',150);
}
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body onload="init()">
<table width="100%" cellpadding=0 cellspacing=0 border=0 align="center">
<tr>
<th colspan=4><h1 align="center"> </h1>
<div align="center" id="animatedtext" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 38">
<p align="center" > </p>
</div> </th></tr>
<tr>
<td align="center">
<a href="/muster/album/original/test1.jpg" target="_blank"><img src="/muster/album/tumbnails/test1.gif" border="0" alt="test1"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test2.jpg" target="_blank"><img src="/muster/album/tumbnails/test2.gif" border="0" alt="test2"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test3.jpg" target="_blank"><img src="/muster/album/tumbnails/test3.gif" border="0" alt="test3"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test4.jpg" target="_blank"><img src="/muster/album/tumbnails/test4.gif" border="0" alt="test4"/></a>
</td>
</tr>
<tr>
<td align="center"><font color="#ffffff">test1</font></td>
<td align="center"><font color="#ffffff">test2</font></td>
<td align="center"><font color="#ffffff">test3</font></td>
<td align="center"><font color="#ffffff">test4</font></td>
</tr>
<tr>
<th colspan=4> </th>
</tr>
<tr>
<td align="center">
<a href="/muster/album/original/test5.jpg" target="_blank"><img src="/muster/album/tumbnails/test5.gif" border="0" alt="test5"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test6.jpg" target="_blank"><img src="/muster/album/tumbnails/test6.gif" border="0" alt="test6"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test7.jpg" target="_blank"><img src="/muster/album/tumbnails/test7.gif" border="0" alt="test7"/></a>
</td>
<td align="center">
<a href="/muster/album/original/test8.jpg" target="_blank"><img src="/muster/album/tumbnails/test8.gif" border="0" alt="test8"/></a>
</td>
</tr>
<tr>
<td align="center"><font color="#ffffff">test5</font></td>
<td align="center"><font color="#ffffff">test6</font></td>
<td align="center"><font color="#ffffff">test7</font></td>
<td align="center"><font color="#ffffff">test8</font></td>
</tr>
</table>
</body>
</html>