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
- Startseite der Mobirise Extension Demo Website auf github.bpgs.de
- Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
- Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
- Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
- EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
- MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
- Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de
Neuigkeiten
Kategorie: alle Artikel (9) | Diese Website (5) | NPage (2) | Webdesign (2)
| Tabellensortierung (16.01.2014 11:01:00) |
|
Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert. (mehr lesen...) |
| 0 Kommentar(e), Kommentar verfassen |
| News und Blogs (14.10.2013 11:51:00) |
|
Der Beitrag zur Erstellung von News und Blogs bei Npage und anderen Anbietern von Websitebaukästen wurde überarbeitet und erweitert. (mehr lesen...) |
| 0 Kommentar(e), Kommentar verfassen |
| Galerie in News (16.07.2013 12:22:00) |
|
Kann man eine NPage galerie in die News einfügen? Ja, man kann. (mehr lesen...) |
| 0 Kommentar(e), Kommentar verfassen |