Menu mit highlights UND anzeige des gedrückten knopfes

S

SeN

0
hi

ich bin gerade dabei 'ne HP zu basteln und hab' das prob, dass ich nicht weiß, wie ich am geschicktesten ein menu schreiben kann, dass sowohl highlights beinhaltet als auch anzeigt, welchen menupunkt man gerade aktiviert hat!!

achja die seite ist im üblichen muster aufgebaut:
-links: menu-frame
-oben: titel-frame
-mitte: main-frame

bisher habe ich es so gelöst, dass ich für die highlights ganz normal JS benutze und beim drücken des knopfes('href') zwei frames gleichzeitig geändert werden; also das main-frame und das menu-frame. so muss ich aber für jeden einzelnen knopf eine eigene html-datei schreiben, die dann im menu-frame angezeigt wird...!

es muss doch noch andere lösungen geben, oder?
danke für lösungvorschläge im voraus.
 
dreamweaver bietet dafür eine sehr schöne vorgefertigte funktion.
die grafiken ändern sich jeweils bei up, down, over, over while down. gleichzeitig werden die grafiken die gerade nicht benötigt werden im hintergrund vorgeladen, so das sie sobald sie benötigt werden, z.b. beim drücken des buttons, zur verfügung stehen.

Code: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<script language=\"JavaScript\">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(\"#\")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(\"?\"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v3.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == \"init\" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == \"over\") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
      nbArr[nbArr.length] = img;
    }
  } else if (event == \"out\" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == \"down\") {
    if ((nbArr = document[grpName]) != null)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = args[i+1];
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>

<body bgcolor=\"#FFFFFF\" text=\"#000000\" onLoad=\"MM_preloadImages('home_down.gif','home_over.gif','home_down_while_over.gif','irgendwas_down.gif','irgendwas_over.gif','irgendwas_over_while_down.gif')\">
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
  <tr>
    <td><a href=\"home.htm\" target=\"main\" onClick=\"MM_nbGroup('down','group1','home','home_down.gif',1)\" onMouseOver=\"MM_nbGroup('over','home','home_over.gif','home_down_while_over.gif',1)\" onMouseOut=\"MM_nbGroup('out')\"><img name=\"home\" src=\"home_up.gif\" border=\"0\" onLoad=\"\" width=\"105\" height=\"18\"></a></td>
  </tr>
  <tr>
    <td><a href=\"irgendwas.htm\" target=\"main\" onClick=\"MM_nbGroup('down','group1','irgendwas','irgendwas_down.gif',1)\" onMouseOver=\"MM_nbGroup('over','irgendwas','irgendwas_over.gif','irgendwas_over_while_down.gif',1)\" onMouseOut=\"MM_nbGroup('out')\"><img name=\"irgendwas\" src=\"irgendwas_up.gif\" border=\"0\" onLoad=\"\" width=\"109\" height=\"18\"></a></td>
  </tr>
</table>
</body>
</html>

wenn du weitere menüpunkte hinzufügst ist darauf zu achten, die jeweiligen dateien im <body> bei "onload" anzugeben, damit sie vorgeladen werden können.
 
hmm sieht alles komplizierter aus, als es wahrscheinlich ist... X(

was mich ein wenig wundert ist, dass beim laden der seite alle menupunkte als aktiviert angezeigt werden und wenn ich dann über alle einmal gehe haben alle das bild, das für 'highlight von nicht aktiven buttons' reserviert ist! beim weiteren, also zweiten mal rübergehen kommt beim jeweiligen button das bild für 'highlight von aktiven button'!? also so als wären alle aktiv ?(

was ich ganz und gar nicht verstehe, ist die variable(?) MM_p! wofür steht sie und WO wird sie definiert?
 
also ich hab jetzt den code oben nochmal neu eingefügt, vielleicht war dort irgendwo ein fehler drin.
ich hab das script auch vorher ausprobiert und es funktioniert.

vielleicht hast du nicht alle grafiken angeben oder sie vielleicht versehentlich vertauscht !? probiers bitte einfach nochmal, vielleicht war der code auch fehlerhaft (kann ja mal passieren :) ).

MM_p ist ein array. ich würde aber nicht probieren dieses script verstehen zu wollen. wie gesagt wurde dieses script von dreamweaver generiert und enthält neben der eigentlichen "navibalken" funktion noch eine preload funktion.... davon mal abgesehen das es sehr kryptisch ist.

es ist für die funktionalität des scriptes vollkommen ausreichend die entsprechenden dateinamen zu ersetzen bzw im body einzufügen (-> preload).
 
ok problem erkannt! lag an der zeile:
<img name="home" src="home_down.bmp" border="0"
onLoad="MM_nbGroup('init','group1','home','home_down.bmp',1)"></a></td>

den teil in onLoad hast du im neuen code auch weggelassen...

noch 'ne andere frage: wie kann ich erreichen dass von anfang an ein knopf als 'gedrückt' initialisiert ist??
 
wie kann ich erreichen dass von anfang an ein knopf als 'gedrückt' initialisiert ist??
Zum Vergrößern anklicken....

indem du bei <img name="home" src="home_up.gif" border="0" onLoad="MM_nbGroup('init','group1','home','home_up.gif',1)" width="109" height="18"> z.b. statt home_up.gif , home_down.gif angiebst.
 
*g* klar! optisch ist das kein problem!! aber wenn man dann über diesen knopf geht wird nicht die das bild 'x_over_while_down' angezeigt sonder x_over'!! sonst hätte ich ja nicht nachgefragt! auf die optische variante war ich auch schon gekommen...
 
kannst du mir erklären, wie es sein kann, dass wenn ich genau den gleichen quellcode benutze (1:1 kopiert; ohne veränderungen!) und genau deine bilder kopiere, dass es trotzdem nicht so aussieht wie bei dir. ?( dein beispiel funktioniert einwandfrei...

zuerst zeigt er bei mir 'home_down' an, dann beim rübergehen wechselt er zu 'home_over', das auch dauerhaft bleibt!? beim weiteren rüber gehen zeigt er, wie er soll, 'home_over_while_down' an!

ich verstehe gar nichts mehr... X(
 
hm, das ist ja eigenartig. da hab ich im moment auch keine idee woran das liegen könnte :( ...
ich habe mal noch ein weiteres script ausgegraben, welches allerdings keine "over_while_down" funktion besitzt. vielleicht funktioniert das ja ... [demo]

bitte den zeilenumbruch bei <a> tag der buttons nach dem kopieren korregieren! (die boardsoftware macht den leider selbstständig).

Code: 
<html>
<title></title>
<BODY LINK=\"#000000\" TEXT=\"000000\" VLINK=\"#000000\" ALINK=\"#00FF00\" BGCOLOR=\"#ffffff\">
<SCRIPT language=\"Javascript\">
bild1=\"home_up.gif\";
bild2=\"home_over.gif\";
bild3=\"home_down.gif\";
bild4=\"irgendwas_up.gif\";
bild5=\"irgendwas_over.gif\";
bild6=\"irgendwas_down.gif\";



var stopnr=\"eins\";
var stopname=bild1
var hold=1;

function clickan(nr,name,name2)
{
stopnr=nr;
stopname=name2
this.document.images[nr].src=name;
}
function clickaus(nr,name)
{
if (nr==stopnr)
hold=0
if (hold==1)
{
this.document.images[stopnr].src=stopname;
}
hold=1
}
function change(nr,name)
{
if (nr==stopnr){}
else
this.document.images[nr].src=name
}
</script>
<table>
<tr>
<td>
<A HREF=\"http://\" target=\"main\" onClick=\"clickaus('eins',bild1),clickan('eins',bild3,bild1)\" onMouseOver=\"change('eins',bild2)\" onMouseOut=\"change('eins',bild1)\"><IMG SRC=\"home_down.gif\" ALT=\"Link 1\" BORDER=\"0\" name=\"eins\"></A>
</td>
</tr>
<tr>
<td>
<A HREF=\"http://\" target=\"main\" onClick=\"clickaus('zwei',bild4),clickan('zwei',bild6,bild4)\" onMouseOver=\"change('zwei',bild5)\" onMouseOut=\"change('zwei',bild4)\"><IMG SRC=\"irgendwas_up.gif\" ALT=\"Link 2\" BORDER=\"0\" name=\"zwei\"></A>
</td>
</tr>
</table>

</BODY>
</HTML>
 
...hmm das funzt jetzt einwandfrei!!??!!
ich hab' leider keine möglichkeit mein "prog" hochzuladen, sonst könnte ich dir ja zeigen was ich meine! wobei ich glaube, dass es bei dir dann funktionieren würde... ist ja klar :)
 
der neue code von dir ist echt super! den kann man wenigstens verstehen!!! ich hab' ihn mal erweitert, so dass auch das 'x_over_while_down' funktioniert. so ist der code ziemlich gut.

Code: 
<html>
<title></title>
<BODY LINK=\"#000000\" TEXT=\"000000\" VLINK=\"#000000\" ALINK=\"#00FF00\" BGCOLOR=\"#ffffff\">
<SCRIPT language=\"Javascript\">
bild1=\"home_up.gif\";
bild2=\"home_over.gif\";
bild3=\"home_down.gif\";
bild4=\"irgendwas_up.gif\";
bild5=\"irgendwas_over.gif\";
bild6=\"irgendwas_down.gif\";
bild7=\"home_over_while_down.gif\";
bild8=\"irgendwas_over_while_down.gif\";



var stopnr=\"eins\";
var stopname=bild1
var hold=1;

function clickan(nr,name,name2) {
  stopnr=nr;
  stopname=name2
  this.document.images[nr].src=name;
}

function clickaus(nr,name) {
  if (nr==stopnr)
    hold=0
  if (hold==1) {
    this.document.images[stopnr].src=stopname;
  }
  hold=1
}

function change(nr,name,name3) {

  if (nr==stopnr) {
    this.document.images[nr].src=name3
  }
  else
    this.document.images[nr].src=name
}

</script>
<table>
<tr>
<td><A HREF=\"http://\" target=\"main\" onClick=\"clickaus('eins',bild1),clickan('eins',bild3,bild1)\" 
                                    onMouseOver=\"change('eins',bild2,bild7)\" 
                                    onMouseOut=\"change('eins',bild1,bild3)\">
<IMG SRC=\"home_down.gif\" ALT=\"Link 1\" BORDER=\"0\" name=\"eins\"></A><BR>
<A HREF=\"http://\" target=\"main\" onClick=\"clickaus('zwei',bild4),clickan('zwei',bild6,bild4)\" 
                                onMouseOver=\"change('zwei',bild5,bild8)\" 
                                onMouseOut=\"change('zwei',bild4,bild6)\">

<IMG SRC=\"irgendwas_up.gif\" ALT=\"Link 2\" BORDER=\"0\" name=\"zwei\"></A><BR>



<A HREF=\"http://\" target=\"main\" onClick=\"clickaus('drei',bild4),clickan('drei',bild6,bild4)\" 
                                onMouseOver=\"change('drei',bild5,bild8)\" 
                                onMouseOut=\"change('drei',bild4,bild6)\">

<IMG SRC=\"irgendwas_up.gif\" ALT=\"Link 3\" BORDER=\"0\" name=\"drei\"></A>
</td>
</tr>
</table>

</BODY>
</HTML>

kann ich eigentlich den code so für meine site benutzen?

danke für deine bemühungen, Sen.
 
grrr es ist zwar jetzt alles wunderbar mit den buttons, nur will die preload-funktion bei mir nicht laufen!?
in deinem bsp läuft sie wunderbar, was man daran sehen kann, das einerseits nachdem 'alle' objekte geladen wurden und fertig erscheint, nochmals objekte geladen werden. vorallem aber merkt man es beim 'benutzen' der knöpfe! es müssen nicht erst die bilder runtergeladen werden, wie es ja eigentlich auch sein soll. woran könnte das liegen?
ich habs auch mal so versucht, ging aber auch nicht:
Code: 
...
  pic_home_up = new Image();
  pic_home_up   = \"./bilder/home_up.gif\";

  pic_home_over = new Image();
  pic_home_over = \"./bilder/home_over.gif\";

  pic_home_down = new Image();
  pic_home_down = \"./bilder/home_down.gif\";

  pic_home_over_while_down = new Image();
  pic_home_owd  = \"./bilder/home_over_while_down.gif\";

...
 
*g* das mit der preload-funktion hat sich erübrigt! hatte 'onLoad' nicht im 'body'-teil!! kommt davon wenn man nicht genau hinschaut!
aber warum der angegebene code nicht funktioniert verstehe ich trotzdem noch nicht... hab' das bsp aus 'nem web-design buch.
 
gelesen... Da ich moderator hier bin haben ich die Möglichkeit,, die informationen zu lesen, die dein Browser sendet. Heisst: Betriebssystem, Browser und IP. Natürlich werden wir diese daten nie missbrauchen, es ist mir bei dir halt nur aufgefallen...
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben