login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Buttons (Opgelost)

Offline rickyboy2 - 12/11/2007 17:43 (laatste wijziging 12/11/2007 18:04)
Avatar van rickyboy2Lid hallo,

ik heb via een site genaamd buttongenerator.com een button menu laten maken. Hierna heb ik het script gedownload en toen bleek dat het een javascript was, aangezien ik hier niet veel ervaring mee heb vraag ik het volgende:

ik heb 2 bestanden, menuscript.js en menustyle.css
Maar hoe kan ik deze nu op een site zetten met html???

iemand die dit ook al eens via dezelfde site heeft gedaan of gewoon weet hoe dit moet, help mij AUB.

http://www.plaatscode.be/4009/

Alvast bedankt

6 antwoorden

Gesponsorde links
Offline thomasje - 12/11/2007 18:14
Avatar van thomasje MySQL beginner Je kan het met een frame include of het hoofdbestand in je html plakken.

Dus menuscript geheel copieeren en die in je html zetten en zorgen dathij het bestand menustyle ook nog kan vinden.
Offline rickyboy2 - 12/11/2007 18:19 (laatste wijziging 12/11/2007 18:22)
Avatar van rickyboy2 Lid nee, dat heb ik nu net geprobeerd maar dat is niet echt succesvol.

Of zou het misschien kunnen zijn dat het frame een html bestand is???
Offline thomasje - 12/11/2007 19:11
Avatar van thomasje MySQL beginner Ja dus je zet dan tussen <body> </body>
(op de plaats waar je je button wil)

<IFRAME SRC="menuscript.js"> </IFRAME>

Je kan hier heel veel dingen mee doen, zie daarvoor ook http://www.hand...frame.html
Offline rickyboy2 - 12/11/2007 19:41
Avatar van rickyboy2 Lid Maar dat wat jij schrijft lukt ook niet   

Dus ik weet het ook niet meer  
Offline Godlord - 12/11/2007 19:46 (laatste wijziging 12/11/2007 19:51)
Avatar van Godlord PHP gevorderde @thomasje: ik zou je echt aanraden om tutorials te lezen. Iframes zijn niet voor CSS noch JS!

Je gebruikt om CSS te gebruiken in (X)HTML het volgende:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <link rel="stylesheet" href="test.css" type="text/css" />


En voor JS gebruik je:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript" src="test.js"></script>


Tenminste in XHTML.

Deze lijntjes komen terecht in de <head></head>. Javascript kan ook doorheen de <body></body> maar ik raad aan om JS bestanden in de <head></head> te zetten en javascript enkel puur(dus geen bestanden) te gebruiken in de <body></body>.

Maar wat zit nou in dat JS bestand?
Daar horen normaal allerlei functies in te zitten. Een CSS bestand bevat gewoon de opmaak van je webpagina.

Hoe gebruik ik dan dat wat in dat JS bestand zit?
Simpel, door de functies aan te roepen. Dit is een ander deel van je script... Deze functies zet je dan ook tussen <script type="text/javascript"></script>

Dus:

webpagina.html of .php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.      <head>
  4.           <title>Test</title>
  5.           <link rel="stylesheet" href="stylesheet.css" type="text/css" />
  6.           <script type="text/javascript" src="moduleMenu.js"></script>
  7.      </head>
  8.  
  9.      <body>
  10.           <script type="text/javascript">
  11.                var buttonFolder = "buttons"; // Set button's folder here.
  12.  
  13.                // Set the button's filenames here.
  14.                upSources = new Array("button1up.png","button2up.png","button3up.png","button4up.png");
  15.                overSources = new Array("button1over.png","button2over.png","button3over.png","button4over.png");
  16.  
  17.                // Sub menu declaration (No modification required)
  18.                subInfo = new Array();
  19.                subInfo[1] = new Array();
  20.                subInfo[2] = new Array();
  21.                subInfo[3] = new Array();
  22.                subInfo[4] = new Array();
  23.  
  24.                // Set sub's menu's text, links and targets here.
  25.                subInfo[2][1] = new Array("Alg. Informatie","Sub-Link 2","");
  26.                subInfo[2][2] = new Array("Stadsplattegrond","Link 2","");
  27.                subInfo[2][3] = new Array("Links","Sub-Link 1","");
  28.                subInfo[2][4] = new Array("Contact","Sub-Link 2","");
  29.  
  30.                subInfo[3][1] = new Array("Stadsdoelen","","");
  31.                subInfo[3][2] = new Array("Gemeentebestuur","","");
  32.  
  33.                subInfo[4][1] = new Array("Toneel","","");
  34.                subInfo[4][2] = new Array("Beeldkunst","","");
  35.                subInfo[4][3] = new Array("Expositie","","");
  36.                subInfo[4][4] = new Array("Erfgoed","","");
  37.                subInfo[4][5] = new Array("Literatuur","","");
  38.                subInfo[4][6] = new Array("Bibliotheken en Archieven","","");
  39.                subInfo[4][7] = new Array("Cultuuractief","","");
  40.  
  41.                // Set sub's menu's position (Relative to button)
  42.                var xSubOffset = 117;
  43.                var ySubOffset = 5;
  44.  
  45.                // No more settings beyond this point.
  46.                var overSub = false;
  47.                var delay = 1000;
  48.                totalButtons = upSources.length;
  49.  
  50.                // Generate the subs and menu.
  51.                for (x = 0; x < totalButtons; x++) {
  52. 	            // Set empty div for buttons without submenu.
  53. 	            if (subInfo[x + 1].length < 1) { 
  54. 		        document.write('<div id="submenu' + (x + 1) + '">');
  55. 	                // Set div for buttons with submenu.
  56. 	            } else {
  57. 		        document.write('<div id="submenu' + (x + 1) + '" class="dropmenu" ');
  58. 		        document.write('onMouseOver="overSub=true;');
  59. 		        document.write('setOverImg('' + (x + 1) + '','');"');
  60. 		        document.write('onMouseOut="overSub=false;');
  61. 		        document.write('setTimeout(\'hideSubMenu(\'submenu' + (x + 1) + '\')\',delay);');
  62. 		        document.write('setOutImg('' + (x + 1) + '','');">');
  63.                         document.write('<ul>');
  64. 		        for (k = 0; k < subInfo[x + 1].length-1; k++) {
  65. 			    document.write('<li>');
  66. 			    document.write('<a href="' + subInfo[x + 1][k + 1][1] + '" ');
  67. 			    document.write('target="' + subInfo[x + 1][k + 1][2] + '">');
  68. 			    document.write( subInfo[x + 1][k + 1][0] + '</a>');
  69. 			    document.write('</li>');
  70. 		        }
  71. 		        document.write('</ul>');
  72. 	           }
  73. 	           document.write('</div>');
  74.               }
  75.           </script>
  76.      </body>
  77. </html>


moduleMenu.js
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // Main Menu Functions:
  2.  
  3. // Preload main menu button images.
  4. function preload() {
  5.      for (x = 0; x < totalButtons; x++) {
  6.          buttonUp = new Image();
  7. 	 buttonUp.src = buttonFolder + upSources[x];
  8. 	 buttonOver = new Image();
  9. 	 buttonOver.src = buttonFolder + overSources[x];
  10.      }
  11. }
  12.  
  13. // Set mouseover button.
  14. function setOverImg(But, ID) {
  15.     document.getElementById('button' + But + ID).src = buttonFolder + overSources[But - 1];
  16. }
  17.  
  18. // Set mouseout button.
  19. function setOutImg(But, ID) {
  20.      document.getElementById('button' + But + ID).src = buttonFolder + upSources[But - 1];
  21. }
  22.  
  23.  
  24. // Sub Menu Functions:
  25.  
  26. // Get element ID multi-browser.
  27. function getElement(id) {
  28.     return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null; 
  29. }
  30.  
  31. // Get X coordinate.
  32. function getRealLeft(id) { 
  33.     var el = getElement(id);
  34.     if (el) { 
  35.         xPos = el.offsetLeft;
  36.         tempEl = el.offsetParent;
  37.         while (tempEl != null) {
  38.             xPos += tempEl.offsetLeft;
  39.             tempEl = tempEl.offsetParent;
  40.         } 
  41.         return xPos;
  42.     } 
  43. } 
  44.  
  45. // Get Y coordinate.
  46. function getRealTop(id) {
  47.     var el = getElement(id);
  48.     if (el) { 
  49.         yPos = el.offsetTop;
  50.         tempEl = el.offsetParent;
  51.         while (tempEl != null) {
  52.             yPos += tempEl.offsetTop;
  53.             tempEl = tempEl.offsetParent;
  54.         }
  55.         return yPos;
  56.     }
  57. }
  58.  
  59. // Move object to coordinate.
  60. function moveObjectTo(objectID, x, y) {
  61.     var el = getElement(objectID);
  62.     el.style.left = x;
  63.     el.style.top = y;
  64. }
  65.  
  66. // Move submenu to corresponding button.
  67. function showSubMenu(subID, buttonID) {
  68.     hideAllSubMenus();
  69.     butX = getRealLeft(buttonID);
  70.     butY = getRealTop(buttonID);
  71.     moveObjectTo(subID, butX + xSubOffset, butY + ySubOffset);
  72. }
  73.  
  74. // Hide all submenus.
  75. function hideAllSubMenus() {
  76.     for (x = 0; x < totalButtons; x++) {
  77.         moveObjectTo("submenu" + (x + 1) + "", -500, -500);
  78.     }
  79. }
  80.  
  81. // Hide one submenu.
  82. function hideSubMenu(subID) {
  83.     if ( overSub == false ) {
  84.         moveObjectTo(subID, -500, -500);
  85.     }
  86. }


En stylesheet.css is dan dat CSS bestand, als dat erbij zit. Sorry voor XHTML maar dit gebruik ik altijd, naar HTML omzetten is niet echt moeilijk(lees maar bij HTML de tutorial van XHTML dan ken je het verschil).
Offline rickyboy2 - 12/11/2007 23:10
Avatar van rickyboy2 Lid Godlord, jij bent echt goed  

Ik ben er helemaal uit, en het is gelukt  

Danke voor de hulp man   
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.285s