login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Navigatie > Roll over effect in menu

Roll over effect in menu

Auteur: Carpmadness - 03 oktober 2004 - 15:09 - Gekeurd door: Dennisvb - Hits: 6442 - Aantal punten: (0 stemmen)



Een leuk effectje om op een menu oid toe te passen. een soort van mouseover-effect maar die van een array kleuren langsloopt. je krijgt dus een vervagingseffect (als je tenminste opeenvolgende kleuren instelt).


1. Zet dit in je <head> tags of in een extern .js bestand:

pas de array hex aan met de kleuren die je wilt voor het effect. hij rolt "on", de array van 0 tot eind, en "off" vanaf het eind tot 0.

zet in de var set net zoveel nullen gescheiden met een komma als het aantal elementen waarop je het effect toepast

doe dit ook bij de var hexcolor.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3. var hex = new Array(
  4.     "E6E7CE",
  5.     "DEE0CD",
  6.     "DADCC7",
  7.     "D3D6BE",
  8.     "CCCFB4",
  9.     "C1C4A2", 
  10.     "B8BB95",
  11.     "B0B388",
  12.     "ABAD81"); // kleuren waartussen roll-on en roll-of heen en weer 'rollen'
  13. var set = new Array(0, 0, 0, 0, 0, 0, 0, 0); //status van item. 1 = rollon (dus de hex-array wordt van 0 tot eind uitgevoerd op item), 0 = rolloff (andersom)
  14. var hexcolor = new Array(0, 0, 0, 0, 0, 0, 0, 0); // kleur uit de hex-array van items
  15.  
  16. function rollon(n) {
  17.     set[n] = 1;
  18. }
  19.  
  20. function rolloff(n) {
  21.     set[n] = 0;
  22. }
  23.  
  24. function roll(){
  25.     for (i = 1; i <= 7; i++) {
  26.         itemnr = "item" + i;
  27.         if (set[i] == 1) {
  28.             if (hexcolor[i] != (hex.length - 1)) {
  29.                 hexcolor[i]++;
  30.                 eval(itemnr+".style.background = hex[hexcolor["+i+"]]");
  31.             }
  32.         }else {
  33.             if (hexcolor[i] != 0) {
  34.                 hexcolor[i]--;
  35.                 eval(itemnr+".style.background = hex[hexcolor["+i+"]]");
  36.             }
  37.         }
  38.     }
  39. setTimeout("roll()",100); //refresh snelheid
  40. }
  41. //-->
  42. </script>


Om nu het script op gang te krijgen moet je in je body tag de functie roll() in de onload zetten:


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <body onload="roll()">


In een element waar je het effect op wilt toepassen zet je het volgende in de open-tag, waarbij bij elke nieuwe element waar je het effect op toepast het nummer met 1 toeneemt:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. id="item1" onmouseover="rollon(1)" onmouseout="rolloff(1)"


Om nog even een voorbeeldje te geven zet je de bovenste code, de javascript, in een pagina in de <head> tags en dit hieronder in je body:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table cellpadding="0" cellspacing="0" style="border:1px solid gray;padding-left:5px;background-color:#E6E7CE;height:200;width:150;">
  2.   <tr>
  3.     <td id="item1" onmouseover="rollon(1)" onmouseout="rolloff(1)" nowrap>
  4.         <a target="main" href="home.htm">home</a>
  5.     </td>
  6.   </tr>
  7.   <tr>
  8.     <td id="item2" onmouseover="rollon(2)" onmouseout="rolloff(2)" nowrap>
  9.         <a href="link2.htm">link2</a>
  10.     </td>
  11.   </tr>
  12.   <tr>
  13.     <td id="item3" onmouseover="rollon(3)" onmouseout="rolloff(3)" nowrap>
  14.         <a href="link3.htm">link 3</a>
  15.     </td>
  16.   </tr>
  17.   <tr>
  18.     <td id="item4" onmouseover="rollon(4)" onmouseout="rolloff(4)" nowrap>
  19.         <a href="forum.htm">forum</a>
  20.     </td>
  21.   </tr>
  22.   <tr>
  23.     <td id="item5" onmouseover="rollon(5)" onmouseout="rolloff(5)" nowrap>
  24.         <a href="link.htm">nieuwe toevoegen</a>
  25.     </td>
  26.   </tr>
  27.   <tr>
  28.     <td id="item6" onmouseover="rollon(6)" onmouseout="rolloff(6)" nowrap>
  29.         <a href="link.htm">geavanceerd zoeken</a>
  30.     </td>
  31.   </tr>
  32.   <tr>
  33.     <td id="item7" onmouseover="rollon(7)" onmouseout="rolloff(7)" nowrap>
  34.         <a href="contact.htm">contact</a>
  35.     </td>
  36.   </tr>
  37. </table>


Have fun with it Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (1)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.088s