{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}
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.