Uitklapmenu met afbeeldingen

Status
Niet open voor verdere reacties.
V

Vinnie19

Nieuwe gebruiker
Lid geworden
3 dec 2006
Berichten
3
Hallo allemaal.

Ik heb al een code voor een uitklapmenu
HTML: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Palace Network</title>
<style>
<!--
DIV.clTop{position:absolute; width:170}
DIV.clSub{position:absolute; left:0; width:170}
#divCont{position:relative; left:0; top:0; height:400; width:170;}
A.clMain{font:12px Verdana; text-decoration:none; font-weight:bold; color:#000000;}
A.clSubb{font:12px Verdana; text-decoration:none; color:#000000}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">

// Om de positie te veranderen vanaf de top en vanaf links kun je kijken in divCont (hierboven in de stylesheet)
// hij staat nu 0 pixels van links en 0 pixels vanf de top.  
// Verander de tekst kleuren en maten in de A.clMain en A.clSubb in de stylesheet.

// Verander dit hieronder naar "true" als je wilt dat alle subs blijven staan als je een ander aanklikt.

var stayFolded=false

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)  


function makeMenu(obj,nest){
   nest=(!nest) ? '':'document.'+nest+'.'                                        
   this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                    
      this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');        
   this.height=n?this.ref.height:eval(obj+'.offsetHeight')
   this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;                            
   this.hideIt=b_hideIt;    this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt                                            
   return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

// vanaf hier niets veranderen

function init(){
   oTop=new Array()
   oTop[0]=new makeMenu('divTop1','divCont')
   oTop[1]=new makeMenu('divTop2','divCont')
   oTop[2]=new makeMenu('divTop3','divCont')
   oTop[3]=new makeMenu('divTop4','divCont')
   oTop[4]=new makeMenu('divTop5','divCont')
   oTop[5]=new makeMenu('divTop6','divCont')
   oSub=new Array()
   oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
   oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
   oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
   oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
   oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
   oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
   for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
   for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}

// Vanaf hier niets veranderen.


function menu(num){
   if(browser){
       if(!stayFolded){
           for(i=0;i<oSub.length;i++){
               if(i!=num) oSub[i].hideIt()
           }
           for(i=1;i<oTop.length;i++){
               oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
           }
       }
       oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
       for(i=1;i<oTop.length;i++){ 
           if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) 
           else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
       }
   }
}
//Laat het menu laden, if it's a 4.x+ browser.
if(browser) onload=init;

</script>
            </p>
          </td>
        </tr>
      </table>
      <br>
    </td>
</table>
</body></html>

</head>

<body>
<!--  verander hier de links -->
            
            <div id="divCont"> 
              <div id="divTop1" class="clTop"><a href="http://www.anouksweb.nl" onClick="menu(0); return false" class="clMain">[uitklapper 
                0]</a><br>
                <div id="divSub1" class="clSub"> <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 
                  1</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 2</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 3</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 4</a><br>
                </div>
                <br>
              </div>
              <div id="divTop2" class="clTop">
				<a href="http://www.anouksweb.nl" onClick="menu(1); return false" class="clMain">[uitklapper 
                1]</a><br>
				<div id="divSub2" class="clSub">
					<a href="http://www.anouksweb.nl" class="clSubb">-Sublink 
                  1</a><br><a href="http://www.anouksweb.nl" class="clSubb">-Sublink 2</a><br>
				</div><br>
              </div>
              <div id="divTop3" class="clTop"><a href="http://www.anouksweb.nl" onClick="menu(2); return false" class="clMain">[uitklapper 
                2]</a><br>
                <div id="divSub3" class="clSub"> <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 
                  1</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 2</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 3</a><br>
                </div>
                <br>
              </div>
              <div id="divTop4" class="clTop"><a href="http://www.anouksweb.nl" onClick="menu(3); return false" class="clMain">[uitklapper 
                3]</a><br>
                <div id="divSub4" class="clSub"> <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 
                  1</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 2</a><br>
                </div>
                <br>
              </div>
              <div id="divTop5" class="clTop"><a href="http://www.anouksweb.nl" onClick="menu(4); return false" class="clMain">[uitklapper 
                4]</a><br>
                <div id="divSub5" class="clSub"> <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 
                  1</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 2</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 3</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 4</a><br>
                  <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 5</a><br>
                </div>
                <br>
              </div>
              <div id="divTop6" class="clTop"><a href="http://www.anouksweb.nl" onClick="menu(5); return false" class="clMain">[uitklapper 
                5]</a><br>
                <div id="divSub6" class="clSub"> <a href="http://www.anouksweb.nl" class="clSubb">-Sublink 
                  1</a><br>
                </div>
                <br>
              </div>
            </div>

</body>

</html>

Vraag 1: Nu wil ik in plaats van de tekst Sublink een afbeelding. Iemand die mij hierbij kan helpen?

Vraag 2: In plaats van de hooftekst (uitklapper x) wil ik ook een afbeelding maar dan met een mouseover dat die dan van afbeelding veranderd en ook nog een andere link naar een andere website. Wie kan mij hierbij helpen?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan