<STYLE>
<!-- Gestalten Sie hier den Style der Slides -->
#menuIn
{
position:absolute;
top: 130px;
width:140px;
border:2.0px solid #8080FF;
color: #FFFFFF;
background-color:#00468C;
font:10pt Verdana;
filter:alpha(opacity=50);
-moz-opacity:0.5
}
</STYLE>

Da die Slides vom rechten Bildschirmrand her einfahren, bilden sich automatisch Scrollbalken. Falls das störend wirkt und die Seite grundsätzlich auf Scrollbalken verzichten kann, setzen Sie scroll="no" in den Body- Tag oder bei Verwendung eines iFrames scrolling="no" in den iframe- Tag ein.

<!-- Legen Sie hier fest, welcher Slide bewegt werden soll, vgl. auch MenuContent im Script -->
<a href="#" onMouseover="pull(0)" onMouseout="draw(0)">KlickMich</a>
<a href="#" onMouseover="pull(1)" onMouseout="draw(1)">KlickMich</a>
<a href="#" onMouseover="pull(2)" onMouseout="draw(2)">KlickMich</a>
<a href="#" onMouseover="pull(3)" onMouseout="draw(3)">KlickMich</a>

<script LANGUAGE="JavaScript">
<!-- Begin
Copyright 2005 by nightfire -- this copyright message must remain here

nn= (document.getElementById && !document.all); // Netscape ab Version 6
ie= (document.all && document.getElementById); // Explorer ab Version 5
if(ie){ // Breite des Fensters ermitteln
var Wwidth=document.body.offsetWidth;
}else{
var Wwidth=window.innerWidth;
}

driveIn= 300; // wie weit soll der Slide in die Seite einfahren
boundryR = Wwidth-driveIn;
boundryL = Wwidth;
interval = 50;
speed = 10; // Geschwindigkeit (je höher, desto schneller)

MenuContent = new Array(); // Hier werden die Inhalte der Slides festgelegt
MenuContent[0] = '<b>Die Matrix:</b><p align="center"><img src="matrix1" width="100" height="150"><p>Laber laber grütz grütz und noch viel mehr Text'
MenuContent[1] = '<b>Die Matrix:</b><p align="center"><img src="matrix2.jpg" width="100" height="150"><p>Laber laber grütz grütz und noch viel mehr Text'
MenuContent[2] = '<b>Die Matrix:</b><p align="center"><img src="matrix3.jpg" width="100" height="150"><p>Laber laber grütz grütz und noch viel mehr Text'
MenuContent[3] = '<b>Die Matrix:</b><p align="center"><img src="matrix4.jpg" width="100" height="150"><p>Laber laber grütz grütz und noch viel mehr Text'

document.write('<div id="menuIn"style="left:'+Wwidth+'"></div>'); // vorbereiten des DIV- Containers

slideMenu = document.getElementById('menuIn');
slideMenuS= document.getElementById('menuIn').style;

// Funktionen - ab hier nichts mehr ändern
function pull(menuname) {
slideMenu.innerHTML=MenuContent[menuname];
if (window.drawMenu)
clearInterval(drawMenu);
pullMenu = setInterval("pullEngine()", interval);
}

function draw(menuname) {
clearInterval(pullMenu);
drawMenu = setInterval("drawEngine()", interval);
}

function pullEngine() {
if(parseInt(slideMenuS.left, 10) > boundryR){
slideMenuS.left =(parseInt(slideMenuS.left, 10)-speed)+"px";
}else{
clearInterval(pullMenu);
}}

function drawEngine() {
if(parseInt(slideMenuS.left, 10) < boundryL){
slideMenuS.left =(parseInt(slideMenuS.left, 10)+speed)+"px";
}else{
clearInterval(drawMenu);
}}

// End -->
</script>

N8i (www.nightfire.ch)

Kopieren Sie bitte den Code