dyn. menu... nur 2 kleine dinge...
dsf
- javascript
0 Tobias
hi!
nach langem hin und her hab ichs nun zum laufen gebracht.
<html> <head>
<title>e.solution - dimensions for the future</title>
<style type="text/css"> <!--
BODY {
margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
}
//--> </style>
<script type="text/javascript"> <!--
image = new Array();
// Pictures
image[0] = "pictures/startseite_1.bmp"; image[1] = "pictures/startseite_2.bmp";
image[2] = "pictures/web-design_1.bmp"; image[3] = "pictures/web-design_2.bmp";
image[4] = "pictures/downloads_1.bmp"; image[5] = "pictures/downloads_2.bmp";
image[6] = "pictures/referenzen_1.bmp"; image[7] = "pictures/referenzen_2.bmp";
image[8] = "pictures/kontakt_1.bmp"; image[9] = "pictures/kontakt_2.bmp";
// --------
img = new Array();
for(i = 0; i < image.length; i++) {
img[i] = new Image(); img[i].src = image[i];
}
function changePic(imgNo, imgName) {
imgName.src = img[imgNo].src;
}
//--> </script>
<script type="text/javascript"> <!--
// Configuration
bgColor = "#A4A4A4"; borderColor = "#FFFFFF";
fontFace = "Arial"; fontSize = "2"; fontColor = "#6E6E6E";
normalItem = "#A4A4A4"; hilightItem = "#FFFFFF";
// -------------
var Item = new Array();
// Menuitems
Item[0] = ["Startseite", "index.htm", "News", "news.htm"]; Item[1] = ["Auftrag", "auftrag.htm", "Progr. Sprach.", "progr_spr.htm", "Grafikdesign", "grafikdesign.htm"]; Item[2] = ["JS FADE", "js_fade.htm", "JS MENU", "js_menu.htm"]; Item[3] = ["Demovorlagen", "demovorlagen.htm", "Referenzliste", "referenzliste.htm"]; Item[4] = ["Kontaktformular", "kontaktformular.htm", "Impressum", "impressum.htm"];
// ---------
for(i = 0; i < Item.length; i++) {
document.write("<div id="Menu" style="position: absolute; visibility: hidden;"><table width="102" bgcolor="" + bgColor + "" cellspacing="0" cellpadding="3" style="border-bottom: 1px solid " + borderColor + "; border-left: 1px solid " + borderColor + "; border-right: 1px solid " + borderColor + ";">");
for(var j = 1; j < Item[i].length; j+=2) {
document.write("<tr><td style="cursor: hand" onMouseOver="this.style.backgroundColor='" + hilightItem + "';" onMouseOut="this.style.backgroundColor='" + normalItem + "';" onClick="window.location.href='" + Item[i][j] + "';"><font face="" + fontFace + "" size="" + fontSize + "" color="" + fontColor + "">" + Item[i][j-1] + "</font></td></tr>");
}
document.write("</table></div>");
}
ie4up = document.all ? 1 : 0; ns6 = (document.getElementById && !document.all) ? 1 : 0;
function showMenu(menuNo, menuTop, menuLeft) {
if(ie4up) {
Menu[menuNo].style.pixelTop = menuTop; Menu[menuNo].style.pixelLeft = menuLeft;
Menu[menuNo].style.visibility = 'visible';
}
if(ns6) {
document.getElementById("Menu[menuNo]").style.top = menuTop; document.getElementById("Menu[menuNo]").style.left = menuLeft;
document.getElementById("Menu[menuNo]").style.visibility = 'visible';
}
}
function hideMenu(menuNo) {
if(ie4up) {
Menu[menuNo].style.visibility = 'hidden';
}
if(ns6) {
document.getElementById("Menu[menuNo]").style.visibility = 'hidden';
}
}
//--> </script>
</head> <body bgcolor="#8F8F8F" scroll="no">
<table width="100%" bgcolor="#7F7F7F" cellspacing="0" cellpadding="0" style="border-bottom: 1px solid #FFFFFF;"> <tr> <td width="100" align="right"><a href="index.htm" onMouseOver="changePic(1, Startseite); showMenu(0, 20, 0);"><img src="pictures/startseite_1.bmp" border="0" name="Startseite"></a></td> <td width="100" align="right"><a href="web-design.htm" onMouseOver="changePic(3, WEB_Design); showMenu(1, 20, 171);" onMouseOut="changePic(2, WEB_Design);"><img src="pictures/web-design_1.bmp" border="0" name="WEB_Design"></a></td> <td width="100" align="right"><a href="downloads.htm" onMouseOver="changePic(5, Downloads);" onMouseOut="changePic(4, Downloads);"><img src="pictures/downloads_1.bmp" border="0" name="Downloads"></a></td> <td width="100" align="right"><a href="referenzen.htm" onMouseOver="changePic(7, Referenzen);" onMouseOut="changePic(6, Referenzen);"><img src="pictures/referenzen_1.bmp" border="0" name="Referenzen"></a></td> <td width="100" align="right"><a href="kontakt.htm" onMouseOver="changePic(9, Kontakt);" onMouseOut="changePic(8, Kontakt);"><img src="pictures/kontakt_1.bmp" border="0" name="Kontakt"></a></td> <td width="100" align="right"></td> </tr> </table>
</body> </html>
jetzt nur ein kleines prob bzw. 2.
ich möchte, wenn ich das menü verlasse, das es verschwindet.
ich möchte, dass auch wenn ich im menü grad bin das es den ommouseover effekt beim image macht
gruss dsf
Hallo,
- ich möchte, wenn ich das menü verlasse, das es verschwindet.
beim onMouseOut noch eine Funktion einfügen, die das Menü ausblendet
- ich möchte, dass auch wenn ich im menü grad bin das es den ommouseover effekt beim image macht
Wie meinst du das? Einfach noch eine Funktion die die Bilder einblendet aufrufen.
es wäre einfacher, wenn du eine Seite hochlädst, auf der man sich das ganze mal anschauen kann.
Grüße aus Nürnberg
Tobias