Vorschau
{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
Quellcode für die kleine Bildergalerie
Der Quellcode besteht aus einem kurzen JavaScript-Code und dem eigentlichen HTML-Code. Beide Teile können einfach in eine Seite im HTML-Modus eingefügt werden.
Der kleine JavaScript-Teil
<script language="JavaScript">
<!--
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
function wechsel(bildname)
{
if (ns3up || ie4up)
{
imgOn = ("" + bildname);
document.grossbild.src = imgOn;
}
}
// -->
</script>
Anschließend
<table width="200" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<!--Hier wird das große Bild festgelegt-->
<!--mit height="300" width="400" die Abmessungen-->
<!--mit scr="http//.... " ein Startbild-->
<td><img height="300" width="400" border="0" name="grossbild" alt="" src="https://file1.hpage.com/002351/24/bilder/madrid1.jpg" /></td>
<!--grosses Bild zu Ende-->
<!--ab hier werden die kleinen Bilder festgelegt-->
<!--in diesem Beispiel sind es 14 kleine Bilder, je 2 nebeneinander in 7 Zeilen-->
<!--die Vorschau-Bilder sollten immer gleich groß angezeigt werden-->
<!--in diesem Beispiel wurde eine Vorschaugröße von height="52" width="70" gewählt-->
<!--Zu jedem Bild muss die Adresse 2 mal eingegeben werden:-->
<!--einmal: wechsel('https://file1.hpage.com/000664/30/bilder/001-23.09.07-01.jpg') -->
<!--noch einmal: src="https://file1.hpage.com/000664/30/bilder/001-23.09.07-01.jpg" -->
<!--mit title="Was ist denn das ? Irgendein Bild" kann ein Text eingegeben werden, -->
<!--der erscheint, wenn die Maus über dem kleinen Bild ist-->
<td>
<div style="border-right: 0px solid rgb(255, 255, 255); padding: 5px; overflow: auto; width: 150px; height: 300px;">
<table cellspacing="0" cellpadding="2" border="1">
</table>
<table cellspacing="1" cellpadding="1" border="0">
<tbody>
<!--hier beginnt eine Tabllenzeile mit 2 Bildern-->
<tr>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/madrid1.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/madrid1.jpg" title="Was ist denn das ? Irgendein Bild" alt=""/></a></td>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/madrid2.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/madrid2.jpg" title="Kommentar zum Bild" alt="" /></a></td>
</tr>
<!--hier ist eine Tabellenzeile zu Ende-->
<tr>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/madrid3.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/madrid3.jpg" title="Tio Pepe ist lecker" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/alta-badia.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/alta-badia.jpg" title="Alta Badia - Dolomiten - Italien" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/seaofconero.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/seaofconero.jpg" title="Riviera del Conero" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/space-01.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/space-01.jpg" title="Raumstation" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/space-02.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/space-02.jpg" title="Die Erde" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/space-03.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/space-03.jpg" title="Reflexion" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/space-04.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/space-04.jpg" title="Raumstation II" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/space-05.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/space-05.jpg" title="Reflexion II" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/madrid3.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/madrid3.jpg" title="Kommentar zum Bild" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/madrid1.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/madrid1.jpg" title="Das Bild gibt es mehrfach" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/madrid3.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/madrid3.jpg" title="Kommentar zum Bild" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('https://file1.hpage.com/002351/24/bilder/madrid1.jpg');">
<img height="52" width="70" border="0" src="https://file1.hpage.com/002351/24/bilder/madrid1.jpg" title="Das Bild gibt es mehrfach" alt="" /></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
{if {$page_title}=="Orginaldesign ansehen"}
{elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"}
{elseif {$page_title}=="Orginaldesign mit Fußleiste"}
In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.