Hi
Ich generiere mittels PHP eine Navigation aus einer DB heraus. Diese Buttons sollen auch schöne Hover Effekte durch Javascript erhalten. Irgendwie krieg ich das einfach nicht hin. Keine Ahnung wieso, genau das Javascript (aber ohne PHP) habe ich schon auf anderen Seiten verwendet.
Hier der Code der Navigation:
PHP-Code:
<?php
$sql = "SELECT * FROM mainmenu WHERE position <=" . $TopNav_MaxMainmenu . " ORDER BY position ASC";
$sql_submenu_1 = "SELECT * FROM submenu WHERE position <=" . $TopNav_MaxSubmenu;
$sql_submenu_2 = " ORDER BY position ASC";
$result = mysql_query($sql);
if (!$result) {
die("Failed to load main navigation");
} else {
while($row = mysql_fetch_array($result)){
echo('<div id="' . $TopNav_MainmenuStyle . $row["position"] . '">' . "\n");
echo("<a href=\"#\" onMouseOver=\"menustart(" . $row["position"] . ");status='';return true;\" onMouseOut=\"menufadeout(" . $row["position"] . ");status='';return true\">");
//echo("<a href=\"#\" onMouseOver=\"menustart(" . $row["position"] . ");rolldown(" . $row["position"] . ");status='';return true;\" onMouseOut=\"menufadeout(" . $row["position"] . ");rollup(" . $row["position"] . ");status='';return true\">");
echo('<img src="' . $ImageFolder . $row["imagename"] . $TopNav_ImageType . '" alt="" border="0" height="' . $TopNav_ImageHeight . '" width="' . $TopNav_ImageWidth . '" name="' . $TopNav_ImagePrefix . $row["position"] . '" />');
echo("</a>");
echo('</div>' . "\n");
$result_submenu = mysql_query($sql_submenu_1 . " AND mainmenuid = " . $row["id"] . $sql_submenu_2);
if(!$result_submenu) {
die("Failed to load sub navigation");
} else {
$num = mysql_num_rows($result_submenu);
if ($num != 0){
echo('<div id="' . $TopNav_SubmenuStyle . $row["position"] . '">' . "\n");
while($row_submenu = mysql_fetch_array($result_submenu)){
echo("<a href=\"#\" onMouseOver=\"menuhold(" . $row["position"] . ");status='';return true;\" onMouseOut=\"menufadeout(" . $row["position"] . ");status='';return true\">");
//echo("<a href=\"#\" onMouseOver=\"menuhold(" . $row["position"] . ");rolldown(" . ($TopNav_MultiplierSubmenu * $row["position"] + $row_submenu["position"]) . ");status='';return true;\" onMouseOut=\"menufadeout(" . $row["position"] . ");rollup(" . ($TopNav_MultiplierSubmenu * $row["position"] + $row_submenu["position"]) . ");status='';return true\">");
echo('<img src="' . $ImageFolder . $row_submenu["imagename"] . $TopNav_ImageType . '" alt="" border="0" height="' . $TopNav_ImageHeight . '" width="' . $TopNav_ImageWidth . '" name="' . $TopNav_ImagePrefix . ($TopNav_MultiplierSubmenu * $row["position"] + $row_submenu["position"]) . '" />');
echo("</a>" . "\n");
}
echo('</div>' . "\n");
}
mysql_free_result($result_submenu);
}
}
mysql_free_result($result);
}
?>
Die auskommentierten echos resultieren eben genau in Fehlern. Es sieht danach so aus wie unten im HTML code, welcher meines Erachtens aber korrekt ist. Die nicht auskommentierten Echos (ohne den Hover) funktionieren jedoch einwandfrei...
Ein generiertes Menü mit Submenu nach diesem Code sieht folgendermassen aus:
HTML-Code:
<div id="menu_1">
<a href="#" onMouseOver="menustart(1);rolldown(1);status='';return true;" onMouseOut="menufadeout(1);rollup(1);status='';return true"><img src="img/nav_kdgmbh.gif" alt="" border="0" height="17" width="180" name="image1" /></a></div>
<div id="submenu_1">
<a href="#" onMouseOver="menuhold(1);rolldown(11);status='';return true;" onMouseOut="menufadeout(1);rollup(11);status='';return true"><img src="img/sub_kontakt.gif" alt="" border="0" height="17" width="180" name="image11" /></a>
<a href="#" onMouseOver="menuhold(1);rolldown(12);status='';return true;" onMouseOut="menufadeout(1);rollup(12);status='';return true"><img src="img/sub_platzhalter.gif" alt="" border="0" height="17" width="180" name="image12" /></a>
<a href="#" onMouseOver="menuhold(1);rolldown(13);status='';return true;" onMouseOut="menufadeout(1);rollup(13);status='';return true"><img src="img/sub_platzhalter.gif" alt="" border="0" height="17" width="180" name="image13" /></a>
<a href="#" onMouseOver="menuhold(1);rolldown(14);status='';return true;" onMouseOut="menufadeout(1);rollup(14);status='';return true"><img src="img/sub_platzhalter.gif" alt="" border="0" height="17" width="180" name="image14" /></a>
</div>
Und das javascript
:
Code:
<script language="JavaScript" type="text/javascript">
// browsercheck
var newDHTML = (document.getElementById) ? true : false;
var ns = (navigator.appName.indexOf('Netscape')!=-1) ? true : false;
var ie = (document.all) ? true : false;
var mac = (navigator.platform.indexOf('Mac') !=-1) ? true : false;
// init
var menu_fadeout = 250;
gfx=new Array();
gfx_over=new Array();
preload(1,"img/nav_kdgmbh");
preload(11,"img/sub_kontakt");
preload(12,"img/sub_platzhalter");
preload(13,"img/sub_platzhalter");
preload(14,"img/sub_platzhalter");
preload(2,"img/nav_funktional");
preload(21,"img/sub_platzhalter");
preload(22,"img/sub_platzhalter");
preload(23,"img/sub_platzhalter");
preload(3,"img/nav_authentisch");
preload(31,"img/sub_platzhalter");
preload(32,"img/sub_platzhalter");
preload(33,"img/sub_platzhalter");
preload(4,"img/nav_seriell");
menutimeout1 = window.setTimeout("dummy()",10);
menutimeout2 = window.setTimeout("dummy()",10);
menutimeout3 = window.setTimeout("dummy()",10);
menutimeout4 = window.setTimeout("dummy()",10);
function dummy()
{
return true;
}
//pre-load
function preload (idx,image_ref)
{
gfx[idx] = new Image();
gfx[idx] = image_ref+'.gif';
gfx_over[idx] = new Image();
gfx_over[idx] = image_ref+'_ov.gif';}
//roll-over
function rolldown(nr)
{
window.document.images['' + eval('"image' + nr +'"')].src = gfx_over[nr].src;
}
function rollup(nr)
{
window.document.images['' + eval('"image' + nr +'"')].src = gfx[nr].src;
}
// Bottom row text
function menustart(layer_no)
{
if (layer_no == 1) {
window.clearTimeout(menutimeout1)
layer_name = "submenu_1";
} else if (layer_no == 2) {
window.clearTimeout(menutimeout2);
layer_name = "submenu_2";
} else if (layer_no == 3) {
window.clearTimeout(menutimeout3);
layer_name = "submenu_3";
} else if (layer_no == 4) {
window.clearTimeout(menutimeout4);
layer_name = "submenu_4";
}
showLayer(layer_name);
}
function menuhold(layer_no)
{
if (layer_no == 1) window.clearTimeout(menutimeout1);
else if (layer_no == 2) window.clearTimeout(menutimeout2);
else if (layer_no == 3) window.clearTimeout(menutimeout3);
else if (layer_no == 4) window.clearTimeout(menutimeout4);
}
function menufadeout(layer_no)
{
if (layer_no == 1) {
menutimeout1 = window.setTimeout("hideLayer('submenu_1')", menu_fadeout);
} else if (layer_no == 2) {
menutimeout2 = window.setTimeout("hideLayer('submenu_2')", menu_fadeout);
} else if (layer_no == 3) {
menutimeout3 = window.setTimeout("hideLayer('submenu_3')", menu_fadeout);
} else if (layer_no == 4) {
menutimeout4 = window.setTimeout("hideLayer('submenu_4')", menu_fadeout);
}
}
// Basic layer functions
function showLayer(layer_to_show)
{
if (newDHTML)
{
document.getElementById(layer_to_show).style.visibility ="visible";
}
else if (ns)
{
document.layers[layer_to_show].visibility="show";
}
else
{
document.all[layer_to_show].style.visibility="visible";
}
}
function hideLayer(layer_to_hide)
{
if (newDHTML)
{
document.getElementById(layer_to_hide).style.visibility ="hidden";
}
else if (ns)
{
document.layers[layer_to_hide].visibility="hide";
}
else
{
document.all[layer_to_hide].style.visibility="hidden";
}
}
Sorry für die langen Codeabschnitte, aber sonst ists ja nicht klar
Die ganzen Preloadanweisungen habe icha uch nicht direkt ins Javascript geschrieben, sondern das Javascript in eine PHP Seite eingefügt und dort lese ich die einzelnen Buttons aus der DB raus, genau wie beim Erstellen der Navigation. Aber irgendwie klappt es einfach nicht. Ich sitze den ganzen Tag schon dran und bin auf keine Lösung gekommen. Teilweise verschwinden die Buttons, teilweise verschieben sie sich etc.
