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

<script language="JavaScript">
<!--
/* Falls Sie mehr oder weniger als 5 Links/Grafiken einsetzen, ändern Sie die nächsten Zeilen entsprechend ab */
thumb=new Array(6);

thumb[0] = new Image();
thumb[0].src="bklein0.gif"; //Bilder müssen bklein, gefolgt von einer Nummer, heissen

thumb[1] = new Image();
thumb[1].src="bklein1.gif";

thumb[2] = new Image();
thumb[2].src="bklein2.gif";

thumb[3] = new Image();
thumb[3].src="bklein3.gif";

thumb[4] = new Image();
thumb[4].src="bklein4.gif";

thumb[5] = new Image();
thumb[5].src="bklein5.gif";

//Browser Sniffer
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;


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)
parent.pagetitle.vorschau.document.thumb0.src=thumb[was].src;
if (ie4up)
parent.pagetitle.thumb0.src=thumb[was].src;
if (mozup)
parent.pagetitle.document.getElementsByName("thumb0")[0].src=thumb[was].src;
}

function zuklapp(was) {
wer="bild"+was;
ausschnitt(wer,0,0,200,20);
}

function launch(seite) {
parent.mypage.location.href= seite;
}
//-->
</script>

<div id="bild1" class="auswahl" style="top:60;left:10; z-index: 10">
<a href="#" onClick="launch('test.htm')" onMouseover="aufklapp(1)" onMouseout="zuklapp(1)">Link 1</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild2" class="auswahl" style="top:80;left:10;z-index: 9">
<a href="#" onClick="launch(test.htm)" onMouseover="aufklapp(2)" onMouseout="zuklapp(2)">Link 2</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild3" class="auswahl" style="top:100;left:10;z-index: 8">
<a href="#" onClick="launch(test.htm)" onMouseover="aufklapp(3)" onMouseout="zuklapp(3)">Link 3</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild4" class="auswahl" style="top:120;left:10;z-index: 7">
<a href="#" onClick="launch(test.htm)" onMouseover="aufklapp(4)" onMouseout="zuklapp(4)">Link 4</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>
<div id="bild5" class="auswahl" style="top:140;left:10;z-index: 6">
<a href="#" onClick="launch(test.htm)" onMouseover="aufklapp(5)" onMouseout="zuklapp(5)">Link 5</a><br>
Hier steht eine Kurzbeschreibung, damit man auch lesen kann, was man sehen kann.
</div>

<div id="vorschau" style="position:absolute;top:0px;left:185px;">
<img src="bklein0.gif" name="thumb0" border="1" width="160" height="120" alt="Vorschau"></a>
</div>

Markus Hülsmann (modified by nightfire)

Kopieren Sie bitte den Code