[Clips]




















Vorschau
Bild 1
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
Bild 2
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
Bild 3
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
Bild 4
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
Bild 5
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.

DHTML-Beispiel für eine raffinierte Navigation.

Hinweis: Die Grafiknamen müssen dem folgenden Muster entsprechen: Die erste Grafik muss den Namen bklein0.gif tragen, die letzte Grafik den Namen bkleinx.gif, wobei das x für die letzte Zahl steht, in unserem Beispiel bklein5.gif. Anderslautende Grafiken werden nicht angezeigt!

[zwischen <HEAD> und </HEAD>]

<style type="text/css">
<!--
h1 {
position:absolute;
top:10px;
left:160px;
}
.auswahl {
position:absolute;
background-color:#FFDD80;
width:100px;
border-style:none;
border-width:thin;
clip:rect(0px 200px 20px auto);
}
-->
</style>

<script language="JavaScript">
<!--
//Browser Sniffer
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;

/* Falls Sie mehr oder weniger als 5 Links/Grafiken einsetzen, ändern Sie die nächsten 2 Zeilen entsprechend ab */
thumb=new Array(6);
for (i=0; i<=5;i++) {
thumb[i] = new Image();
thumb[i].src="bklein"+i+".gif"; //Hier wird der Grafikname dynamisch ermittelt
}

/* Falls Sie auf das Popupfenster verzichten wollen, lassen Sie folgende Funktion weg und setzen den EventHandler im <Body> Tag NICHT ein */
function los() {
anzeige=window.open("b0.html","bilder");
anzeige.resizeTo(320,240);
anzeige.moveTo(1,1);
self.focus();
}

function ausschnitt(wen,startx,starty,endx,endy) {
if (ie4up) {
document.all[wen].style.clip="rect("+starty+" " +endx +" " +endy +" "+startx +")";
}
if (ns4up) {
document.layers[wen].clip.left=startx;
document.layers[wen].clip.top=starty;
document.layers[wen].clip.right=endx;
document.layers[wen].clip.bottom=endy;
}
if (mozup) {
document.getElementById(wen).style.clip="rect("+starty+" " +endx +" " +endy +" "+startx +")";
}
}

function aufklapp(was) {
wer="bild"+was;
ausschnitt(wer,0,0,200,200);
if (ns4up) {
document.vorschau.document.thumb0.src=thumb[was].src;
}
if (ie4up) {
document.thumb0.src=thumb[was].src;
}
if (mozup) {
document.getElementsByName("thumb0")[0].src=thumb[was].src;
}
}

function zuklapp(was) {
wer="bild"+was;
ausschnitt(wer,0,0,200,20);
if (ns4up) {
document.vorschau.document.thumb0.src=thumb[0].src;
}
if (ie4up) {
document.thumb0.src=thumb[0].src;
}
if (mozup) {
document.getElementsByName("thumb0")[0].src=thumb[0].src;
}
}

function bild(seite) {
anzeige.location.href="b"+seite+".html";
anzeige.focus();
}
//-->
</script>

[in den <BODY>-Tag]

onLoad="los()"

[zwischen <BODY> und </BODY>]

<div id="vorschau" style="position:absolute;top:110px;left:185px;">
<img src="bklein0.gif" name="thumb0" border="1" width="160" height="120" alt="Vorschau"></a>
</div>
<div id="bild1" class="auswahl" style="top:60;left:10;">
<a href="javascript:bild(1)" onMouseover="aufklapp(1)" onMouseout="zuklapp(1)">Bild 1</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild2" class="auswahl" style="top:60;left:400;">
<a href="javascript:bild(2)" onMouseover="aufklapp(2)" onMouseout="zuklapp(2)">Bild 2</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild3" class="auswahl" style="top:250;left:10;">
<a href="javascript:bild(3)" onMouseover="aufklapp(3)" onMouseout="zuklapp(3)">Bild 3</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild4" class="auswahl" style="top:250;left:400;">
<a href="javascript:bild(4)" onMouseover="aufklapp(4)" onMouseout="zuklapp(4)">Bild 4</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild5" class="auswahl" style="top:350;left:200;">
<a href="javascript:bild(5)" onMouseover="aufklapp(5)" onMouseout="zuklapp(5)">Bild 5</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>

[Autor]

Markus Hülsmann (Internet Magazin)
modified by N8i (www.nightfire.ch)

[Download]

Kopieren Sie bitte den Scriptcode

Copyright © 1998- Nightfire Webworker Archiv Script No: 0022