2 vraagjes

Ik wist niet zeker of dit hier hoorde, maar heb het toch maar hier geplaatst.
---
Ten eerste vroeg me af of iemand een code weet voor een navigatie bar waarbij als je over de plaatjes gaat daar onder keuzes verschijnen. Om het duidelijk te maken:

Screenshots:

En dan als tweede vraag; Hoe kan het zo dat als je met je muis over een plaatje gaat hij pas duidelijk zichtbaar wordt? Bijvoorbeeld bij de plaatjes uit de navigatie bar: Index, portal enzovoort.

Vraag 1;
Plaats de volgende code in je template 'Algemeen --> overall_header'. ergens onder ''

Code:

<div>
<ul id="nav">
   <li class="top"><a href="/forum" class="top_link"><span>Home</span></a></li>
  <li class="top"><a href="/portal" id="" class="top_link"><span class="down">Centrum</span></a>
    <ul class="sub">
      <li><a href="/t16-algemene-forumregels">Forumregels</a></li>
      <li><a href="/h4-onze-voorwaarden">Onze Voorwaarden</a></li>
      <li><a href="http://myst.actieforum.com/h6-cookie-verklaring">Cookie Verklaring</a></li>
    </ul>
    
    <li class="top"><a href="/forum" id="" class="top_link"><span class="down">Community</span></a>
    <ul class="sub">
      <li><a href="/h2-personeel">Personeel</a></li>
      <li><a href="/memberlist">Leden</a></li>
      <li><a href="/h1-stammen">Stammen</a></li>
      <li><a href="/groups">Groepen</a></li>
      <li><a href="/forum" class="fly">Support</a>
               <ul>
                  <li><a href="/profile?mode=email&u=4">Contactformulier</a></li>
                                                <li><a href="/faq">Veelgestelde Vragen</a></li>
               </ul>
         </li>  
    </ul>
      <li class="top"><a href="/forum" class="top_link"><span>Kaart</span></a></li>
      <!-- BEGIN switch_user_logged_in -->      
             <li class="top"><a href="/profile?mode=editprofile" id="" class="top_link"><span class="down">Profiel</span></a>
    <ul class="sub">
      <li><a href="/profile?mode=editprofile">Profiel Wijzigen</a></li>
            <li><a href="/profile?mode=editprofile&page_profil=preferences">Instellingen</a></li>
            <li><a href="/profile?mode=editprofile&page_profil=signature">Onderschrift</a></li>
            <li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li>
    </ul>
          
          <li class="top"><a href="/privmsg?folder=inbox" class="top_link"><span>Mailbox</span></a></li>
          <li class="top"><a href="/login?logout=1" class="top_link"><span>Uitloggen</span></a></li>
        <!-- END switch_user_logged_in -->
          <!-- BEGIN switch_user_logged_out -->
          <li class="top"><a href="/login?connexion" class="top_link"><span>Inloggen</span></a></li>
             <li class="top"><a href="/register" class="top_link"><span>Registreren</span></a></li>
   <!-- END switch_user_logged_out -->
          <li class="top"><br><li>
        </ul>
                                            
                                             <style>
                                               #nav {padding:0; margin-left:-15px; margin-top:-4px; margin-right:-15px; list-style:none; height:45px; background: url(http://www.imgdumper.nl/uploads7/52bea0295c435/52bea0295c04e-Bruin.png) repeat-x bottom; border-radius:0px; position:relative; z-index:500; font-family: calibri bold;}
#nav li.top {display:block; float:left; height:45px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:30px; color:#f0f0f0; text-decoration:none; font-size:13px; font-face:calibri; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#A9A9A9; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:20px; top:32px; background: #5DAED3 no-repeat; padding:5px; border:1px solid #A9A9A9; border-radius: 0px 0px 5px 5px; padding:2px 5px 5px 5px; white-space:nowrap; width:150px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:150px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:13px; font-weight: bold; font-face: calibri; height:18px; width:150px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #5DAED3;}
#nav li ul.sub li a.fly
{background:#5DAED3 url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#1675BC; color:#fff; border-color:#A9A9A9; border-radius:5px;}
#nav li:hover ul.sub li a.fly:hover
{background:#1675BC url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-radius: 5px;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:110px; top:-4px; background: #5DAED3; padding:3px; border:1px solid #A9A9A9; border-radius: 5px;  white-space:nowrap; width:150px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:10px; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#1488AE url(arrow_over.gif) 80px 6px no-repeat; color:#000; border-color:#A9A9A9; border-radius: 5px; font-face:calibri; font-weight: bold; font-size: 13px}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#fff; border-color:#A9A9A9; border-radius: 5px; font-face:calibri; font-weight: bold; font-size:13;}
                                              
                                             </style>
                                             <script>/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/pro_dropdown_2/stuHover.js */

stuHover = function() {
   var cssRule;
   var newSelector;
   for (var i = 0; i < document.styleSheets.length; i++)
      for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
         {
         cssRule = document.styleSheets[i].rules[x];
         if (cssRule.selectorText.indexOf("LI:hover") >= 0)
         {
             newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
            document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
         }
      }
   var getElm = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<getElm.length; i++) {
      getElm[i].onmouseover=function() {
         this.className+=" iehover";
      }
      getElm[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" iehover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
                                  </div>

Ik heb de code letterlijk van m`n forum, dus je zal hem hier en daar aan moeten passen.

Vraag 2;
Ik ben hier niet helemaal zeker van...maar volgens mij was het iets met de volgende codes die je plaatst in je CSS.

Code:

.img voorbeeld {
opacity: 0.6;
}

.img voorbeeld:hover {
opacity: 1.0;
}

Het getal achter opacity is in % als je het keer 100 doet. 0.6 is dus 60%, en 1.0 is 100%.
Dan moet je de afbeelding nog laten verwijzen naar de CSS d.m.v. de volgende code op de pagina waar je de afbeelding wilt.

Code:

<img src="URL AFBEELDING" class="voorbeeld" />

Je kunt voorbeeld dus in alles veranderen, als je de naam maar gelijk is in de CSS.
Hopelijk heb je er wat aan!

Super bedankt! Alleen wat bedoel je bij vraag twee met de pagina waar de afbeelding wilt? Gewoon in je post, of…?

Bijvoorbeeld ja. In een bericht, HTML Pagina, Forum Beschrijving...Overal waar je HTML kan gebruiken, zeg maar.