Marcus M.: mouse popup menü

Na ihr lieben leutz,

mache seit zwei jahren eine ausbildung zum webdesigner, aber trotz allem bin ich noch nie hinter dieses problem gekommen. also ich will ein einfaches rollover menü machen. auf gut deutsch: soll sobald ich mit dem mauszeiger über dieses button gehe, ein rollover erscheinen, das mehrere schaltflächen enthält. aber sobald das rollover größer ist als die normale schaltfläche zerlegt html logischer weiße mir die ganze tabelle in einzelne stücke, weil das rollover zu groß ist und nicht in die <td> reinpaßt. also wie ich hier so gelesen habe habt ihr (die meißten) SEHR viel ahnung, hoffe das mir jemand helfen kann.....hier ist mal mein quelltext

<html>

<head>
  <title>MEBUS online</title>
  <csscriptdict>
   <script><!--
CSInit = new Array;
function CSScriptInit() {
if(typeof(skipPage) != "undefined") { if(skipPage) return; }
idxArray = new Array;
for(var i=0;i<CSInit.length;i++)
 idxArray[i] = i;
CSAction2(CSInit, idxArray);}
CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10);
function IsIE() { return CSAg.indexOf("MSIE") > 0;}
function CSIEStyl(s) { return document.all.tags("div")[s].style; }
function CSNSStyl(s) { return CSFindElement(s,0); }
function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];
 var curDoc = ly ? ly.document : document; var elem = curDoc[n];
 if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {
  elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
 return elem;
}

function CSClickReturn () {
 var bAgent = window.navigator.userAgent;
 var bAppName = window.navigator.appName;
 if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
  return true; // dont follow link
 else return false; // dont follow link
}

function CSButtonReturn () {
 var bAgent = window.navigator.userAgent;
 var bAppName = window.navigator.appName;
 if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
  return false; // follow link
 else return true; // follow link
}

CSIm = new Object();
function CSIShow(n,i) {
 if (document.images) {
  if (CSIm[n]) {
   var img = (!IsIE()) ? CSFindElement(n,0) : document[n];
   if (img && typeof(CSIm[n][i].src) != "undefined") {img.src = CSIm[n][i].src;}
   if(i != 0)
    self.status = CSIm[n][3];
   else
    self.status = " ";
   return true;
  }
 }
 return false;
}
function CSILoad(action) {
 im = action[1];
 if (document.images) {
  CSIm[im] = new Object();
  for (var i=2;i<5;i++) {
   if (action[i] != '') { CSIm[im][i-2] = new Image(); CSIm[im][i-2].src = action[i]; }
   else CSIm[im][i-2] = 0;
  }
  CSIm[im][3] = action[5];
 }
}
CSStopExecution = false;
function CSAction(array) {
 return CSAction2(CSAct, array);
}
function CSAction2(fct, array) {
 var result;
 for (var i=0;i<array.length;i++) {
  if(CSStopExecution) return false;
  var actArray = fct[array[i]];
  if(actArray == null) return false;
  var tempArray = new Array;
  for(var j=1;j<actArray.length;j++) {
   if((actArray[j] != null) && (typeof(actArray[j]) == "object") && (actArray[j].length == 2)) {
    if(actArray[j][0] == "VAR") {
     tempArray[j] = CSStateArray[actArray[j][1]];
    }
    else {
     if(actArray[j][0] == "ACT") {
      tempArray[j] = CSAction(new Array(new String(actArray[j][1])));
     }
    else
     tempArray[j] = actArray[j];
    }
   }
   else
    tempArray[j] = actArray[j];
  }
  result = actArray0;
 }
 return result;
}
CSAct = new Object;

// --></script>
  </csscriptdict>
  <csactiondict>
   <script><!--
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button',/*URL*/'../images/index_05.jpg',/*URL*/'../buttons/balken_oben.jpg',/*URL*/'','');

// --></script>
  </csactiondict>
 </head>

<body bgcolor="#ffffff" onload="CSScriptInit();">
  <table border="0" cellpadding="0" cellspacing="0" width="220">
   <tr>
    <td rowspan="3"><img src="file:///Z:/homepage/hp/index/index/Abstandhalter.gif" width="1" height="1" border="0"><img src="file:///Z:/homepage/hp/index/images/index_01.jpg" width="110" height="133" border="0"></td>
    <td width="63"><img src="file:///Z:/homepage/hp/index/images/index_02.jpg" width="63" height="92" border="0"></td>
    <td colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="601" height="92">
      <param name="movie" value="../animation/animation2.swf">
      <param name="quality" value="best">
      <param name="play" value="true">
      <embed src="../animation/animation2.swf" type="application/x-shockwave-flash" width="601" height="92" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="best" play="true">
     </object></td>
   </tr>
   <tr>
    <td colspan="7"><img src="file:///Z:/homepage/hp/index/images/index_04.jpg" width="690" height="21" border="0"></td>
   </tr>
   <tr>
    <td width="63" bgcolor="white" background="(Empty Reference!)"><csobj w="63" h="20" t="Button" ht="../buttons/balken_oben.jpg"><a href="#" onmouseover="return CSIShow(/*CMP*/'button',1)" onmouseout="return CSIShow(/*CMP*/'button',0)" onclick="return CSButtonReturn()"><img src="../images/index_05.jpg" width="63" height="20" name="button" border="0"></a></csobj></td>
    <td><img src="file:///Z:/homepage/hp/index/images/index_06.jpg" width="117" height="20" border="0"></td>
    <td><a href="../../3neuheiten/nueheiten.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_07.jpg" width="97" height="20" border="0"></a></td>
    <td><a href="../../4kontakt/anfahrtsplan/herschbach/herschbach.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_08.jpg" width="85" height="20" border="0"></a></td>
    <td><img src="file:///Z:/homepage/hp/index/images/index_09.jpg" width="117" height="20" border="0"></td>
    <td><img src="file:///Z:/homepage/hp/index/images/index_10.jpg" width="185" height="20" border="0"></td>
    <td><img src="file:///Z:/homepage/hp/index/images/index_11.jpg" width="26" height="20" border="0"></td>
   </tr>
  </table>
  <p></p>
 </body>

</html>

  1. Hi,

    also um Solch nette Menüeffekte zu realisieren würde ich mit div's arbeiten. Pack eine Tabelle wo deine Untermenüpunkte drin sind in ein div und lass diesen bei onMouseover bzw. out ein/und ausblenden.

    Gruß

    ueps

    p.s.: auf meiner HP ist das Menü genauso gemacht.

    1. hey das geht ja richtig schnell hier, thx schonmal für die antwort.

      sorry aber ich weiß net was du meinst mit "div", bin nur so ein dummer webdesigner und hab ne soviel ahnung in sachen programmierung. habe es aber auch schon mit flashMX probiert. habe auf deiner page mal nach geguckt. und so sollte es ungefähr auch aussehen.

      1. Hi,

        hey das geht ja richtig schnell hier, thx schonmal für die antwort.

        Bitte.

        sorry aber ich weiß net was du meinst mit "div", bin nur so ein dummer webdesigner und hab ne soviel ahnung in sachen programmierung. habe es aber auch schon mit flashMX probiert. habe auf deiner page mal nach geguckt. und so sollte es ungefähr auch aussehen.

        Was habt ihr denn in den 2 Jahren gemacht wo du nun schon lernst?
        JavaScript und HTML sollten glaube ich schon Inhalt einer Webdesign ausbildung sein. Naja ist ja auch egal.

        <div> sind Tags für Bereiche in HTML die formatiert werden können.

        Bsp.:

        <div class="menu" id="menu1">
        ...Meine Tabelle...
        </div>

        Mit CSS wird die Menüposition festgelegt:

        CSS Definiton:

        div.menu {position:abolute; left:100px; height;50px....; visibility:hidden}

        Mit JS kannst du nun den div anzeigen oder verstecken

        document.getElemetNyId("menu1").style.visibility='visible';
        document.getElemetNyId("menu1").style.visibility='hidden';

        Das mal so als Grundlage.

        Das Ganze lässt sich natürlich noch optimieren.
        Das Menü auf meiner Seite ist recht einfach gehalten, du kannst dir die Datei menu.js ja mal runterladen und das Prinzip anschauen.

        Gruß

        ueps

        1. thx nochmal

  2. Hallo Marcus,

    hier ist mal mein quelltext

    bitte reduziere den Quelltext auf die wirklich relevanten Teile und
    poste die dann hier. Ferner sollte es sich dabei nicht um Quelltext
    handeln, der von einem WYSIWYG-Editor erzeugt wurde, so etwas ist
    in den meisten Fällen extrem unleserlich und da wird Dir dann kaum
    jemand helfen können.

    Also schau mal, welche Teile wirklich wichtig sind, um Dein Problem
    zu verdeutlichen, schreibe Deine bisherigen Bemühungen zur Lösung
    dazu und dann bekommst Du sicher hier einen brauchbaren Tipp.

    Viele Grüße,
    Stefan

    PS: Du sprichst selbst von einer zweijährigen "Webdesign-Ausbildung"
        und trotzdem postest Du diese Sache im Themenbereich HTML. Da
        bin ich dann schon etwas ... sagen wir mal "erstaunt" ;-)

    1. sorry, aber ich bin das erste mal hier. normal hat immer mein selfhtml7.0.zip daheim gereicht. aber darüber ich habe ich nicht gefunden. mit dem quelltext geht klar....lag aber wahrscheinlich daran, das ich schon seit 5 stunden im büro sitze und versuche eine lösung zu finden, dann hat man irgendwann keine lust mehr für nichts. aber das nächste mal werde ich meine angaben reduzieren....bis denne

  3. hi

    mache seit zwei jahren eine ausbildung zum webdesigner, [...]

    wo und wie kann man sich denn zu webdesigner ausbilden lassen? ich habe noch nie von einer solchen ausbildung gehört, gelesen oder ähnliches.
    oder ist das wieder so ein pseudo-lehrgang von irgendeinem maßnahmenträger der das anbietet und mit dem man nachher genauso dasteht wie vorher weils keiner anerkennt?

    würd mich ja mal interessieren.

    so long
    ole
    (8-)>

    1. ich mache ein schulische ausbildung zum mediengestalter im schwerpunkt medienkommunikation für digitale medien oder so ähnlich...

      1. hi

        ich mache ein schulische ausbildung zum mediengestalter im schwerpunkt medienkommunikation für digitale medien oder so ähnlich...

        hmm....du solltest schon wissen was du machst, ist ab und zu wirklich von vorteil ;)

        ferner solltest du dir vieleicht mal den unterschied zwischen javascript und html aneignen und dir anlesen was ein <div> ist :)
        ...nur mal so als kurzes fazit aus den bisher geschriebenen postings :)

        so long
        ole
        (8-)>

        1. klar weiß ich wie mein beruf heißt, aber wer bitte schön sagt heut zutage denn schon mediengestalter im schwerpunkt mediekommunikation für digitale medien zu einem webdesigner???

  4. Na ihr lieben leutz,

    hallo.

    mache seit zwei jahren eine ausbildung zum webdesigner, aber trotz allem bin ich noch nie hinter dieses problem gekommen. also ich will ein einfaches rollover menü machen. auf gut deutsch: soll sobald ich mit dem mauszeiger über dieses button gehe, ein rollover erscheinen, das mehrere schaltflächen enthält. aber sobald das rollover größer ist als die normale schaltfläche zerlegt html logischer weiße mir die ganze tabelle in einzelne stücke, weil das rollover zu groß ist und nicht in die <td> reinpaßt. also wie ich hier so gelesen habe habt ihr (die meißten) SEHR viel ahnung, hoffe das mir jemand helfen kann.....hier ist mal mein quelltext

    <html>

    <head>
      <title>MEBUS online</title>
      <csscriptdict>
       <script><!--
    CSInit = new Array;
    function CSScriptInit() {
    if(typeof(skipPage) != "undefined") { if(skipPage) return; }
    idxArray = new Array;
    for(var i=0;i<CSInit.length;i++)
    idxArray[i] = i;
    CSAction2(CSInit, idxArray);}
    CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10);
    function IsIE() { return CSAg.indexOf("MSIE") > 0;}
    function CSIEStyl(s) { return document.all.tags("div")[s].style; }
    function CSNSStyl(s) { return CSFindElement(s,0); }
    function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];
    var curDoc = ly ? ly.document : document; var elem = curDoc[n];
    if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {
      elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
    return elem;
    }

    function CSClickReturn () {
    var bAgent = window.navigator.userAgent;
    var bAppName = window.navigator.appName;
    if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
      return true; // dont follow link
    else return false; // dont follow link
    }

    function CSButtonReturn () {
    var bAgent = window.navigator.userAgent;
    var bAppName = window.navigator.appName;
    if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
      return false; // follow link
    else return true; // follow link
    }

    CSIm = new Object();
    function CSIShow(n,i) {
    if (document.images) {
      if (CSIm[n]) {
       var img = (!IsIE()) ? CSFindElement(n,0) : document[n];
       if (img && typeof(CSIm[n][i].src) != "undefined") {img.src = CSIm[n][i].src;}
       if(i != 0)
        self.status = CSIm[n][3];
       else
        self.status = " ";
       return true;
      }
    }
    return false;
    }
    function CSILoad(action) {
    im = action[1];
    if (document.images) {
      CSIm[im] = new Object();
      for (var i=2;i<5;i++) {
       if (action[i] != '') { CSIm[im][i-2] = new Image(); CSIm[im][i-2].src = action[i]; }
       else CSIm[im][i-2] = 0;
      }
      CSIm[im][3] = action[5];
    }
    }
    CSStopExecution = false;
    function CSAction(array) {
    return CSAction2(CSAct, array);
    }
    function CSAction2(fct, array) {
    var result;
    for (var i=0;i<array.length;i++) {
      if(CSStopExecution) return false;
      var actArray = fct[array[i]];
      if(actArray == null) return false;
      var tempArray = new Array;
      for(var j=1;j<actArray.length;j++) {
       if((actArray[j] != null) && (typeof(actArray[j]) == "object") && (actArray[j].length == 2)) {
        if(actArray[j][0] == "VAR") {
         tempArray[j] = CSStateArray[actArray[j][1]];
        }
        else {
         if(actArray[j][0] == "ACT") {
          tempArray[j] = CSAction(new Array(new String(actArray[j][1])));
         }
        else
         tempArray[j] = actArray[j];
        }
       }
       else
        tempArray[j] = actArray[j];
      }
      result = actArray0;
    }
    return result;
    }
    CSAct = new Object;

    // --></script>
      </csscriptdict>
      <csactiondict>
       <script><!--
    CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button',/*URL*/'../images/index_05.jpg',/*URL*/'../buttons/balken_oben.jpg',/*URL*/'','');

    // --></script>
      </csactiondict>
    </head>

    <body bgcolor="#ffffff" onload="CSScriptInit();">
      <table border="0" cellpadding="0" cellspacing="0" width="220">
       <tr>
        <td rowspan="3"><img src="file:///Z:/homepage/hp/index/index/Abstandhalter.gif" width="1" height="1" border="0"><img src="file:///Z:/homepage/hp/index/images/index_01.jpg" width="110" height="133" border="0"></td>
        <td width="63"><img src="file:///Z:/homepage/hp/index/images/index_02.jpg" width="63" height="92" border="0"></td>
        <td colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="601" height="92">
          <param name="movie" value="../animation/animation2.swf">
          <param name="quality" value="best">
          <param name="play" value="true">
          <embed src="../animation/animation2.swf" type="application/x-shockwave-flash" width="601" height="92" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="best" play="true">
         </object></td>
       </tr>
       <tr>
        <td colspan="7"><img src="file:///Z:/homepage/hp/index/images/index_04.jpg" width="690" height="21" border="0"></td>
       </tr>
       <tr>
        <td width="63" bgcolor="white" background="(Empty Reference!)"><csobj w="63" h="20" t="Button" ht="../buttons/balken_oben.jpg"><a href="#" onmouseover="return CSIShow(/*CMP*/'button',1)" onmouseout="return CSIShow(/*CMP*/'button',0)" onclick="return CSButtonReturn()"><img src="../images/index_05.jpg" width="63" height="20" name="button" border="0"></a></csobj></td>
        <td><img src="file:///Z:/homepage/hp/index/images/index_06.jpg" width="117" height="20" border="0"></td>
        <td><a href="../../3neuheiten/nueheiten.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_07.jpg" width="97" height="20" border="0"></a></td>
        <td><a href="../../4kontakt/anfahrtsplan/herschbach/herschbach.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_08.jpg" width="85" height="20" border="0"></a></td>
        <td><img src="file:///Z:/homepage/hp/index/images/index_09.jpg" width="117" height="20" border="0"></td>
        <td><img src="file:///Z:/homepage/hp/index/images/index_10.jpg" width="185" height="20" border="0"></td>
        <td><img src="file:///Z:/homepage/hp/index/images/index_11.jpg" width="26" height="20" border="0"></td>
       </tr>
      </table>
      <p></p>
    </body>

    </html>

    ist das alles an quelltext?

    lg /.\^/