<html>
    <head>
       
        <style type="text/css">
            #Slideshow {
              opacity: 1.0;              /* CSS3 */
              -moz-opacity: 1.0;         /* Older versions of Firefox */
              -khtml-opacity: 1.0;       /* Older versions of Safari */
              filter: alpha(opacity=100); /* Internet Explorer */
            }
            #Slideshow div {display:none;}
            #Slideshow #slice1 {display:block;}
            
            #slidemenudiv{
                //background-color: red;
                width:24%;
                height:100%; 
                overflow:auto;
                overflow-x:hidden;
                margin:0px;padding:0px;
                font-family: arial;font-size: 11px;
            }
            .slidemenu{
                list-style: none;
                margin:0px;padding:0px;
                margin-left:5px;
            }
            .slidemenu li{
                width:95%;border:1px solid lightgray;margin:0px;padding:4px;margin-bottom:5px;min-height:40px;background-color:#fff;color:#003680;cursor:pointer
            }
            .slidemenu li:hover{
                width:96%;border:1px solid #003680;margin:0px;padding:4px;margin-bottom:5px;min-height:40px;background-color:#003680;color:#fff;cursor:pointer
            }
            #Basement{
                float:left;width:75%;overflow:hidden;margin:auto;margin:0px;padding:0px;
            }            
        </style>
    </head>
    
            

    <body onload="startSlide();doload()" style="margin:0px;padding:0px;overflow:hidden;">
       <div class="slider" >
         <div id="Basement" >

            <div id="Slideshow">
                <div name="slideelement" id="slice1"><a href="index.php?menuID=29" target="_parent"><img src="images/slide/slide_01.png" alt="" style="width:100%;"></a></div>
                <div name="slideelement" id="slice2"><a href="index.php?menuID=16" target="_parent"><img src="images/slide/slide_04.png" alt="" style="width:100%;"></a></div>
                <div name="slideelement" id="slice3"><a href="index.php?menuID=16" target="_parent"><img src="images/slide/slide_02.png" alt="" style="width:100%;"></a></div>
                <div name="slideelement" id="slice4"><a href="index.php?menuID=16" target="_parent"><img src="images/slide/slide_02.png" alt="" style="width:100%;"></a></div>
            </div>
                 
         </div>
            <div id="slidemenudiv">
                <ul class="slidemenu">
                     <li name="slide_menu_item" id="slide_menu_item_1" onclick="showslice('1');">
                         <b>Kompetent und individuell</b><br/>
                         Hier steht ein Werbespruch!<br/>
                         <div style="width:100%;text-align: right;text-decoration: underline;" ><span onclick="document.getElementById('slice1').childNodes[0].click();">mehr</span></div>
                     </li>
                     <li name="slide_menu_item" id="slide_menu_item_2" onclick="showslice('2');">
                         <b>Ihr Ansprechpartner in Österreich</b><br/>
                         Wir sprechen türkisch un deutsch!<br/>
                         <div style="width:100%;text-align: right;text-decoration: underline;" ><span onclick="document.getElementById('slice2').childNodes[0].click();">mehr</span></div>
                     </li>
                      <li name="slide_menu_item" id="slide_menu_item_3" onclick="showslice('3');">
                         <b>quick-stop</b><br/>
                         Die Schnelle Verzollung!<br/>
                         <div style="width:100%;text-align: right;text-decoration: underline;" ><span onclick="document.getElementById('slice3').childNodes[0].click();">mehr</span></div>
                     </li>
                      <li name="slide_menu_item" id="slide_menu_item_4" onclick="showslice('4');">
                         <b>quick-stop</b><br/>
                         Die Schnelle Verzollung!<br/>
                         <div style="width:100%;text-align: right;text-decoration: underline;" ><span onclick="document.getElementById('slice4').childNodes[0].click();">mehr</span></div>
                     </li>
                 </ul>
            </div>
       </div>
   <script type="text/javascript">
       var slide = true;

       var element = document.getElementById("Slideshow");
       var duration = 2000; /* fade duration in millisecond */
       var hidtime = 0; /* time to stay hidden */
       var showtime = 5000; /* time to stay visible */

       var running = 0 /* Used to check if fade is running */
       var iEcount = 1 /* Element Counter */

       var iTotalE = element.getElementsByTagName('div').length;


       function doload() {
           document.getElementById("slide_menu_item_1").style.backgroundColor = "#003680";
           document.getElementById("slide_menu_item_1").style.color = "#fff";
       }


       function startSlide() {
           //initButtons();
           setTimeout(function () { StartFade() }, 7000);
       }
       function SetOpa(Opa) {
           element.style.opacity = Opa;
           element.style.MozOpacity = Opa;
           element.style.KhtmlOpacity = Opa;
           element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
       }
       function StartFade() {
           if (slide) {
               if (running != 1) {
                   running = 1
                   fadeOut()
               }
           }
       }
       function fadeOut() {
           for (i = 0; i <= 1; i += 0.01) {
               setTimeout("SetOpa(" + (1 - i) + ")", i * duration);
           }
           document.getElementById("slide_menu_item_" + iEcount).style.backgroundColor = "#fff";
           document.getElementById("slide_menu_item_" + iEcount).style.color = "#003680";

           setTimeout("FadeIn()", (duration + hidtime));
       }
       function FadeIn() {
           for (i = 0; i <= 1; i += 0.01) {
               setTimeout("SetOpa(" + i + ")", i * duration);
           }
           if (iEcount == iTotalE) {
               iEcount = 1
               document.getElementById("slice" + iEcount).style.display = "block";
               document.getElementById("slice" + iTotalE).style.display = "none";
           } else {
               document.getElementById("slice" + (iEcount + 1)).style.display = "block";
               document.getElementById("slice" + iEcount).style.display = "none";
               iEcount = iEcount + 1
           }
           document.getElementById("slide_menu_item_" + iEcount).style.backgroundColor = "#003680";
           document.getElementById("slide_menu_item_" + iEcount).style.color = "#fff";
           setTimeout("fadeOut()", (duration + showtime));
       }

       function fadeonPos(pos) {
           iEcount = pos;
           running = 0;
           setTimeout("FadeIn()", (duration + hidtime));
       }
       function showslice(sliceid) {
           slide = false;
           var i = 0;
           var o = document.getElementsByName('slideelement')[i];
           var p = document.getElementsByName('slide_menu_item')[i];
           while (o != null && p != null) {
               o.style.display = "none";
               p.style.backgroundColor = "#fff";
               p.style.color = "#003680";
               o = document.getElementsByName('slideelement')[i];
               p = document.getElementsByName('slide_menu_item')[i];
               i++;
           }
           document.getElementById('slice' + sliceid).style.display = "inline";
           document.getElementById('slide_menu_item_' + sliceid).style.backgroundColor = "#003680";
           document.getElementById('slide_menu_item_' + sliceid).style.color = "#fff";
       }
        </script>
    </body>

</html>