JavaScript Menü mit Bildern

  • JavaScript Menü mit Bildern

    Hallo,
    ich verstehe von Javascript sogut wie nur Bahnhof xD. Ihc weiß zwar wie ich das Menür verlängern kann usw! Aber wie mache ich es damit ich Bilder für die Menüs und für die Unterkategorie Einfüge hier der Code:
    Bis jetzt ist es ja nur rein CSS für die Farben!


    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <title>Cascade Menu</title>
    6. <style type="text/css">
    7. <!--
    8. .menu
    9. {
    10. background-color: #2b6ebb;
    11. border: 1px solid #008;
    12. font-family: Verdana;
    13. position: absolute;
    14. font-weight: bold;
    15. padding-top: 3px;
    16. font-size: 10px;
    17. cursor: pointer;
    18. width: 150px;
    19. color: #fff;
    20. }
    22. .item_panel
    23. {
    24. border-left: 1px solid #008;
    25. border-right: 1px solid #008;
    26. clip: rect(0, 150, 0, 0);
    27. position: absolute;
    28. width: 150px;
    29. }
    31. .item_panel a
    32. {
    33. text-decoration: none;
    34. cursor: pointer;
    35. color: #000;
    36. }
    38. .item
    39. {
    40. background-color: #e9f0f8;
    41. font-family: Verdana;
    42. font-size: 10px;
    43. width: 148px;
    44. }
    45. //-->
    46. </style>
    48. <script type="text/javascript">
    49. <!--
    50. // www: http://www.javarea.de
    51. // Copyright by javarea.de
    53. // Link[nr] = 'position [0 is menu/1 is item] | Link name | url | target (blank|top|frame_name)'
    54. var Link = new Array();
    56. Link[0] = '0|JavaScripte';
    57. Link[1] = '1|Javarea.de|http://www.javarea.de|';
    58. Link[2] = '1|Javarea.de|http://www.javarea.de|';
    59. Link[3] = '1|Javarea.de|http://www.javarea.de|';
    60. Link[4] = '1|Javarea.de|http://www.javarea.de|';
    61. Link[5] = '0|Html Hilfe';
    62. Link[6] = '1|selfhtml|http://|';
    63. Link[7] = '1|lerne html|http://|'
    64. Link[8] = '0|Sonst';
    65. Link[9] = '1|Gästebuch|http://|';
    66. Link[10] = '1|Kontakt|http://|';
    67. Link[11] = '0|noch mehr';
    68. Link[12] = '1|bla bla|';
    69. Link[13] = '0|naaaaa';
    70. Link[14] = '1|tutbase|http://tut-base.net';
    71. Link[15] = '1|parkourslf.de|http://parkourslf.de';
    73. var height = 20; // Hoehe der Menuekoepfe
    74. var iheight = 15; // Hoehe der Menueelemente
    75. var bgc = '#e9f0f8' // background color of the item
    76. var over_bgc = '#fff';
    77. var tc = '#000' // text color of the item
    78. var over_tc = '#004891';
    79. var speed = 0;
    80. var timerID = 0;
    81. var width = 152;
    82. var N = (document.all) ? 0 : 1;
    83. var self_menu = new Array();
    85. function write_menu()
    86. {
    87. smc = 0;
    88. mn = 0;
    89. mni = 1;
    90. start = -1;
    92. document.write('<div style="position: absolute;">');
    94. for (var i = 0; i < Link.length; i++)
    95. {
    96. la = Link[i].split('|');
    98. if (la[0] == 0)
    99. {
    100. if (start == 0)
    101. {
    102. document.write('</div>');
    104. h = csmc * iheight;
    105. tmn = mn; // - h;
    106. self_menu[smc] = new Array(tmn, h, 0, -2);
    108. smc++;
    109. mn--;
    110. }
    112. csmc = 0;
    114. document.write('<div id="down' + smc + '" class="menu" '
    115. + 'style="top: ' + mn + 'px; height: ' + height + 'px;" '
    116. + 'onclick="pull_down(' + smc + ', ' + mni + ');">'
    117. + ' ' + la[1] + '</div>');
    119. self_menu[smc] = new Array(mn, height, 0, mni);
    121. smc++;
    122. mni++;
    123. mn += height;
    124. start = 1;
    125. }
    126. else
    127. {
    128. if (start == 1)
    129. {
    130. if (N)
    131. mn += 2;
    133. document.write('<div id="down' + smc + '" class="item_panel" '
    134. + 'style="top: '+ mn + 'px;">');
    136. start = 0;
    137. }
    139. document.write('<a href="' + la[2] + '"'
    140. + ((la[3] != '') ? ' target="' + la[3] + '"' : '')
    141. + '><div id="d' + i + '" class="item" '
    142. + 'style="height: ' + iheight + 'px;'
    143. + ((N) ? ' width:150px;' : '')
    144. + '" onmouseover="color(this.id);" '
    145. + 'onmouseout="uncolor(this.id);">'
    146. + ' ' + la[1] + '</div></a>');
    148. csmc++;
    149. }
    150. }
    152. if (start == 0)
    153. {
    154. document.write('</div>');
    156. h = csmc * iheight;
    157. tmn = mn + 5; // - h;
    158. self_menu[smc] = new Array(tmn, h, 0);
    159. name = 'down' + (self_menu.length - 1);
    161. obj = document.getElementById(name);
    162. obj.style.borderBottomColor = '#008';
    163. obj.style.borderBottomWidth = '1px';
    164. obj.style.borderBottomStyle = 'solid';
    165. }
    167. document.write('</div>');
    168. }
    170. function color(obj)
    171. {
    172. document.getElementById(obj).style.backgroundColor = over_bgc;
    173. document.getElementById(obj).style.color = over_tc;
    174. }
    176. function uncolor(obj)
    177. {
    178. document.getElementById(obj).style.backgroundColor = bgc;
    179. document.getElementById(obj).style.color = tc;
    180. }
    182. function pull_down(nr, c)
    183. {
    184. if (timerID == '')
    185. {
    186. to = self_menu[nr + 1][1]
    187. begin = nr + 2;
    189. if (timerID != '')
    190. clearTimeout(timerID);
    192. if (self_menu[nr + 1][2] == 0)
    193. {
    194. self_menu[nr + 1][2] = 1;
    196. if (nr == (self_menu.length - 2))
    197. to++;
    199. epull_down(begin, to, 0);
    200. }
    201. else
    202. {
    203. to = 0;
    204. self_menu[nr + 1][2] = 0;
    205. name = 'down' + (nr + 2);
    206. open_item = 0;
    208. for (var i = 0; i < nr; i++)
    209. if (self_menu[i][2] == 1)
    210. open_item += self_menu[i][1];
    212. if (N == false)
    213. open_item -= (c * 1);
    215. if (nr == (self_menu.length - 2))
    216. {
    217. val = self_menu[self_menu.length - 1][1];
    218. to = -1;
    219. }
    220. else
    221. val = parseInt(document.getElementById(name).style.top) - (open_item) - (c * height);
    223. epull_up(begin, to, val);
    224. }
    225. }
    226. }
    228. function epull_down(nr, to, nowv)
    229. {
    230. name = 'down' + (nr - 1);
    231. obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + (nowv + 1) + ', 0)';
    233. for (var i = nr; i < self_menu.length; i++)
    234. {
    235. name = 'down' + i;
    236. obj = document.getElementById(name);
    237. obj.style.top = parseInt(obj.style.top) + 1;
    238. }
    240. nowv++;
    242. if (nowv < to)
    243. timerID = setTimeout('epull_down(' + nr + ', ' + to + ', ' + nowv + ');', speed);
    244. else
    245. timerID = 0;
    246. }
    248. function epull_up(nr, to, nowv)
    249. {
    250. name = 'down' + (nr - 1);
    251. obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + nowv + ', 0)';
    253. for (var i = nr; i < self_menu.length; i++)
    254. {
    255. name = 'down' + i;
    256. obj = document.getElementById(name);
    257. obj.style.top = parseInt(obj.style.top) - 1;
    258. }
    260. nowv--;
    262. if(nowv > to)
    263. timerID = setTimeout('epull_up(' + nr + ', ' + to + ', ' + nowv + ');', speed);
    264. else
    265. timerID = 0;
    266. }
    268. function startup(nr)
    269. {
    270. write_menu();
    272. if (nr != 0)
    273. {
    274. for (var i = 0; i < self_menu.length; i++)
    275. {
    276. if (self_menu[i][3] == nr)
    277. pull_down(i, nr);
    279. i == self_menu.length;
    280. }
    281. }
    282. }
    283. //-->
    284. </script>
    286. </head>
    287. <body>
    289. <script type="text/javascript">
    290. <!--
    291. startup(1);
    292. //-->
    293. </script>
    295. </body>
    296. </html>
    Alles anzeigen
    --Kommt noch--