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

• SKYWALK-WEBDESIGN.DE
• FREEHOST-PROFI.DE
• Virtueller Reiseführer Bolivien
• Forum Paint.Net

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

$(document).ready(function($){
  var url = window.location.pathname;
  $('.navi_cont a[href="'+url+'"]').addClass('current');
});

<style>
  .current, a>.current, a.current   { color:yellow !important}
</style>