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>

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Umbau begonnen (12.04.2013 20:56:00)

Ursprünglich wurde auf dieser Website dargestellt, wie man die NPage Designvorlage o08 durch individuelle Einstellungen anpassen kann. Mittlerweile gibt es bei NPage noch mehr Möglichlichkeiten und teilweise auch bessere Designvorlagen. So sind vor allem einige der Plusvorlagen gut für eine individuelle Anpassung geeignet.

Daher habe ich begonnen, eine individuelle Anpassung der NPage Designvorlage Plus 135 vorzunehmen.


Bewertung: (4,00 Punkt(e) / 1 Bewertung(en))

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang