Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Kleine-Galerie-Quellcode

{$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}
{/if}

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="http://file1.npage.de/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('http://file1.npage.de/000664/30/bilder/001-23.09.07-01.jpg') -->
<!--noch einmal: src="http://file1.npage.de/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('http://file1.npage.de/002351/24/bilder/madrid1.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/madrid1.jpg" title="Was ist denn das ? Irgendein Bild" alt=""/></a></td>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/madrid2.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/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('http://file1.npage.de/002351/24/bilder/madrid3.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/madrid3.jpg" title="Tio Pepe ist lecker" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/alta-badia.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/alta-badia.jpg" title="Alta Badia - Dolomiten - Italien" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/seaofconero.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/seaofconero.jpg" title="Riviera del Conero" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/space-01.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/space-01.jpg" title="Raumstation" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/space-02.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/space-02.jpg" title="Die Erde" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/space-03.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/space-03.jpg" title="Reflexion" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/space-04.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/space-04.jpg" title="Raumstation II" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/space-05.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/space-05.jpg" title="Reflexion II" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/madrid3.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/madrid3.jpg" title="Kommentar zum Bild" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/madrid1.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/madrid1.jpg" title="Das Bild gibt es mehrfach" alt="" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/madrid3.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/002351/24/bilder/madrid3.jpg" title="Kommentar zum Bild" alt="" /></a></td>
<td><a href="#" onmouseover="javascript:wechsel('http://file1.npage.de/002351/24/bilder/madrid1.jpg');">
<img height="52" width="70" border="0" src="http://file1.npage.de/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.

{else}
Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert und erweitert. Anhand eines Beispiels kann man den Einbau einer sortirbaren tabelle bei nPage künftig besser nachvollziehen. Außerdem wurde ein Downloadlink zur JavaScript-Datei bereit gestellt. Das kleine Tutorial findet man auf der Seite Tabelle sortieren.


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
{/if} Zum Seitenanfang
nPage.de-Seiten: Liste katholischer Internetseiten | Ritter Cham Sportkegeln