Alex Mair: Zwei übereinanderliegende Layer, L1 Grafik und L2 Text (FRAGE)

SELF-Forum

Zwei übereinanderliegende Layer, L1 Grafik und L2 Text (FRAGE)

Alex Mair
– Informationen zu den Bewertungsregeln

Hallo Ihr da draussen..

Zuerst muß ich ein dickes Lob anbringen, (Was man laut Forums-FAQ zwar nicht sollte, aber ich machs trotzdem)

Habe am 02.12.99 eine Frage gepostet, und innerhalb einer Stunde (!) Antwort bekommen. Und das Tollste dabei: Antwort = Lösung meines Problems.
Das ist ein tolles Forum, Danke an alle i.s. an Pepe.

So und nun zu einer neuen Frage ;-)

Ich habe mehrere Buttons, welche (wie Hoverbuttons funktionieren) sich jeweils in einer Zelle einer Tabelle befinden und zwei Frames gleichzeitig aktualisieren.
Mein Problem ist nun, daß die Grafik der Buttons wunderbar hoovert, ich aber nicht imstande bin, diese zu beschriften...

Ich habe es mit Layer probiert, aber nicht herausgefunden, wie diese sich

  1. ÜBEREINANDER legen lassen bei RELATIVEM Bezug.

  2. Ich beim Text in Layer ZWEI den bl**en Unterstrich, sprich LINK, wegbekomme.

Ich poste "meinen" Code, der in Wirklichkeit nur durch fleissiges Forschen, Fragen und Kopieren zustandegekommen ist, da ich ein blutender Java- bzw. Html- (ecc..) Anfänger bin..

Wenn mir jemand helfen könnte, wäre ich froh und verspreche, ihn in meine Gebete einzuschliessen..

ALEX

<tr>
  <td width="9" height="58"
   valign="middle" align="left" nowrap>
   <a
     href="javascript:zweiframes
     ('../Allgemein/nav_home.htm','Inhalt',
      '../home.htm','Hauptframe')"
     onmouseover="lighten(0,name1b);return
                                     true;"
     onmouseout="darken (0,name1a); return
                                     true;">

<div ID="bild1"
     STYLE="position:realative; top: 0;
     left: 0; z-index: 0">
    <dd>
    <img src="../images/sf-inaktiv.gif"
     alt="Home" border="0" align="left"
     WIDTH="120" HEIGHT="30">
    </dd>
    </div>
    
    <div ID="text1"
     STYLE="position:relative; top: 0;
     left: 0; z-index: 1">
    <dd>
     HOMEPAGE
    </dd>
    </div>
  </td>
</tr>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zwei übereinanderliegende Layer, L1 Grafik und L2 Text (FRAGE)

    holger kuehne
    – Informationen zu den Bewertungsregeln

    Hi
    Leider gibt es da mehrere Probleme.
    Zuerst zum Quelltext:
    1.) Das Verweistag <a href=....> ist nicht geschlossen. Das hat zur Folge, dass die ganze Tabellenzelle als Verweis angesehen wird. (Beide Layer und nicht etwa nur das Bild!!) Deshalb ist der Text im 2ten Layer auch unterstrichen, da Links per Defaulteinstellung immer unterstrichen sind.
    2. Du hast <dd> verwendet, was laut selfhtml eine Definition einleitet. Damit das ganze ueberhaupt einen Sinn hat muesstest du zuerst mit <dl> eine Definitionsliste starten und mit "<dt>Ausdruck</dt>" einen zu definierenden Ausdruck schreiben. Siehe:
    <../../tcdf.htm#a1>
    Meiner Meinung nach brauchst du aber gar keine Definition.
    3. Du hast die Tabellenzelle mit einer Breite von 8 definiert, dein Bild im ersten Layer ist aber schon 120 breit. Nicht das das den Browser stoert, aber wenn man schon Breiten definiert sollten sie auch einen Sinn machen :-)
    Zum Inhalt:
    Leider habe ich nicht ganz kapiert was du eigentlich machen willst. (Das liegt unter anderem daran, dass du die Funktionen lighten() und darken() "geheim" gehalten hast.)
    Ich "rate" mal: Wenn ich das ganze richtig verstehe willst du wenn der Anwender mit der Maus ueber das Bild faehrt soll der Inhalt vom Layer "text1" angezeigt werden?!?
    Wenn ja, dann wuerde ich den Inhalt von "text1" also: "Homepage" als Bild (gif/jpg) definieren und mit dem images Objekt einfach die zwei Bilder austauschen. (Soll heissen, dass dann ueberhaupt keine Layer gebraucht werden). Images Objekt siehe:
    1. <../../tedg.htm>
    2. <../../tecbbe.htm>
    Ein Problem mit den relativ positionierten Layern ist, dass Netscape mit ihnen nicht umgehen kann! Dynamisches html funktioniert (meines Wissens nach) nur mit absolut positionierten Layern.
    Fazit: Beschreib einfach noch mal genau was du erreichen willst. (z.B. was du mit Grafik beschriften meinst, vieleicht den alt text in <img src="" alt="">??) Der Grund warum du schon so elend lange ;-) auf eine Antwort wartest liegt naemlich meiner Meinung  nach nur daran, dass keiner so genau verstanden hat was du willst.
    Holger

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Zwei übereinanderliegende Layer, L1 Grafik und L2 Text (FRAGE)

      Alex Mair
      – Informationen zu den Bewertungsregeln

      Hallo Holger

      Vielen Dank für deine Mühe.
      Anschließend versuche ich, meine Frage besser zu formulieren..

      1.) Das Verweistag <a href=....> ist nicht geschlossen.

      Das Verweistag war geschlossen, die automatische Html - Korrektur (heißt doch so?) hat sich da selbstständig gemacht

      1. Du hast <dd> verwendet, was laut selfhtml eine Definition einleitet.

      Auch <dd> hab ich dieser automatischen Korrektur zu verdanken..

      1. Du hast die Tabellenzelle mit einer Breite von 8 definiert, dein Bild im ersten Layer ist aber schon 120 breit...

      Bin ich deiner Meinung :-)

      Zum Inhalt:

      Die Homepage mach ich (ohne Bezahlung - aus Interresse) "für" meinen Arbeitsgeber, der noch nichts von seinem Glück weis, einen derart motivierten, tadellosen Mitarbeiter zu haben, der in seiner Freizeit und in seiner "freien Zeit", an einer Website bastelt. ;-)
      Die Firma verkauft Hardware.

      Nun habe ich das ganze in FP 98 probiert, testen tu ichs momentan nur im IE 5.

      Ich hatte folgende Idee:
      Index.htm ist in 4 Frames aufgeteilt:

      1Frame: horizontal - oben -fungiert als Kopfzeile
      2Frame: vertikal - links - fungiert als Navigationsbereich
      3Frame: vertikal - rechts - dient als Hauptbereich
      4Frame: horizontal - unten - dient als Fußzeile

      Wenn ich im Navigationsframe auf den Hooverbutton "Hardware" drücke, muß ich
      sowohl eine NEUE Navigationsseite
      in Frame2 (für die versch. HARDWARE)
      als auch
      in Frame3 (für die HAUPTSEITE)
      öffnen.

      Da ich mit einem Hooverapplet nicht zwei Frames ansteuern kann habe ich, Dank Pepe, das Hoovern der Grafik (des Buttons) zustande bekommen - inklusive das Laden von zwei Frames.

      Das Problem an der Sache ist nun, daß diese "Buttons" zwar toll hoovern und auch die Frames laden, sie aber nicht beschriftet sind.

      Am Bildschirm stehen jetzt viele rechteckige Grafiken, die nur darauf warten, daß ÜBER oder IN sie ein Text geschrieben wird, um den jeweiligen "Button" zu erklären.

      Das Ganze schaut also so aus:

      **********
      *HARDWARE*
      **********

      * = Grafik

      Ich habe dieses mit Layer probiert - aber noch nicht herausgefunden, wie das ordentlich funktioniert.

      Ich könnte zwar jede Grafik einzeln "beschriften" - sprich in einem Grafikprogramm in die Grafik einen Text reinschreiben, habe aber
      1)-insgesamt knapp 20 verschiedene Buttons
      2)-pro Button zwei Grafiken, eine für mouseout, eine für mouseover.

      Meine einfältige Meinung war, daß, wenn diese "Buttons" alle gleich ausschauen - sprich alle die gleiche Grafik besitzen - und sich nur durch ihre "Beschriftung" unterscheiden, es

      1)- einen Geschwindigkeitsvorteil bringt, da
      der Browser nur zwei Grafiken für alle zwanzig Buttons laden muß (anstatt 40*2KB) und

      2)- ich der Meinung bin, daß mein "Beschriftungsproblem" sicherlich vielen bekannt sein müßte, da man ja ähnlich funktionierende Homepages sieht, und es im Sinne der Automatisierung kein allzugroßes Problem darstellen kann, einen Text über diese Buttons zu legen :-))

      Anschließend führe ich meinen Code an, wo alles funktioniert, nur noch keine Layer enthalten sind:

      <head><script language="javascript">
      <!--
      {
           name1a = new Image(); name1a.src = "../images/Sf-ia.gif";
           name1b = new Image(); name1b.src = "../images/Sf-a.gif";

      var index = 99;
           var iname;
      }

      function lighten (bildnr, bildobjekt)
      {
           window.document.images[bildnr].src = bildobjekt.src;
      }

      function darken (bildnr, bildobjekt)
      {
        if (bildnr != index)
        {
           window.document.images[bildnr].src = bildobjekt.src
        }
      }
      function zweiframes (URL1,F1,URL2,F2)
      {
           parent.frames[F1].location.href=URL1;
           parent.frames[F2].location.href=URL2;
      }
      // -->
      </script>

      <meta name="GENERATOR" content="Microsoft FrontPage 3.0">
      <base target="_self">
      <title>Navigation Home</title>
      <meta name="Microsoft Theme" content="none">
      <meta name="Microsoft Border" content="none">
      </head>

      <body background="../images/stahlmosaik.jpg" bgproperties="fixed" topmargin="0"
      leftmargin="7" link="#0000CC" vlink="#000099" alink="#0000FF">
      <div align="right">

      <table border="0" width="88" height="256" cellspacing="1"
      style="font-family: Tahoma; font-size: 10pt">
        <tr>
          <td width="9" height="58" valign="middle" align="left" nowrap><a
          href="javascript:zweiframes('../Allgemein/nav_home.htm','Inhalt','../home.htm','Hauptframe')"
          onmouseover="lighten(0,name1b);return true;"
          onmouseout="darken (0,name1a); return
          true;"><img src="../images/Sf-ia.gif"
          alt="Home" border="0" align="left" WIDTH="120" HEIGHT="30"></a></td>
        </tr>

      Für jede Hilfe bin ich tankbar :)

      Grüße Alex

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Zwei übereinanderliegende Layer, L1 Grafik und L2 Text (FRAGE)

        holger kuehne
        – Informationen zu den Bewertungsregeln

        Hi Alex
        Ich hab mal versucht eine Loesung fuer dein Problem zu finden. Das klappt allerdings nur mit den 4er Browsern (eigentlich duerfte bei den anderen gar nichts passieren!)
        Was habe ich gemacht:
        Zwei absolut positionierte div's definiert, die uebereinander liegen.
        Im ersten div stehen in einer Tabelle die Beschriftungen fuer deine Buttons (inhaltlich habe ich natuerlich nur Muell eingetragen :-)) Die Beschriftungen fungieren hierbei als die Links inklusive zweiframes Wechsel und onmouseout/over Effekten.
        Im zweiten div, dass im Hintergrund steht, sind die Grafiken in einer voellig identischen Tabelle untergebracht. Wenn man nun mit der Maus ueber die Beschriftungen faehrt, wird die jeweils darunter liegende Grafik ausgetauscht. Ein paar Kleinigkeiten hab ich im Quelltext geaendert, aber das wirst du sicher selber sehen.
        So jetzt zum Quelltext:
        <html>
        <head><script language="javascript">
        <!--
        {
             name1a = new Image(); name1a.src = "bild1a.gif";
             name1b = new Image(); name1b.src = "bild1b.gif";

        var index = 99;
             var iname;
        }

        function lighten (bildobjekt,bildnr)
        {
             if (document.layers){
        document.layers[0].document.images[bildnr].src=eval(bildobjekt+".src");
        }
        if (document.all){
        document.images[bildnr].src=eval(bildobjekt+".src");
        }
             }

        function darken (bildobjekt,bildnr)
        {
             if (document.layers){
        document.layers[0].document.images[bildnr].src=eval(bildobjekt+".src");
             }
             if (document.all){
        document.images[bildnr].src=eval(bildobjekt+".src");
        }
             }
        function zweiframes (URL1,F1,URL2,F2)
        {
             parent.frames[F1].location.href=URL1;
             parent.frames[F2].location.href=URL2;
        }
        // -->
        </script>
        <base target="_self">
        <title>Navigation Home</title>
        <meta name="Microsoft Theme" content="none">
        <meta name="Microsoft Border" content="none">
        <style type="text/css">
        <!--
        a {
        color: #000099;
        font-weight: bold;
        text-decoration:none;
        text-align:center;
        }
        -->
        </style>
        </head>
        <body background="../images/stahlmosaik.jpg" bgproperties="fixed" topmargin="0"
        leftmargin="7" link="#0000CC" vlink="#000099" alink="#0000FF">
        <div id="hintergrund" style="position:absolute; top:8; left:10; z-index:1;">
        <table border="0" width="120" height="160" cellspacing="2" cellpadding="0">
        <tr><td width="120" height="32"><img name="bild1" src="bild1a.gif" width=120 height=32></td></tr>
        <tr><td width="120" height="32"><img name="bild2" src="bild1a.gif" width=120 height=32></td></tr>
        <tr><td width="120" height="32"><img name="bild3" src="bild1a.gif" width=120 height=32></td></tr>
        <tr><td width="120" height="32"><img name="bild4" src="bild1a.gif" width=120 height=32></td></tr>
        <tr><td width="120" height="32"><img name="bild5" src="bild1a.gif" width=120 height=32></td></tr>
        </table>
        </div>

        <div id="text" style="position:absolute; top:8; left:10; z-index:2;">
        <table border="0" width="120" height="160" cellspacing="2"  cellpadding="0">
          <tr>
            <td width="120" height="32" nowrap><a href="javascript:zweiframes('../Allgemein/nav_home.htm','Inhalt','../home.htm','Hauptframe')" onmouseover="lighten('name1b',0);return true;" onmouseout="darken ('name1a',0); return true;">Homepage</a></td>
          </tr>
          <tr>
            <td width="120" height="32" nowrap><a href="javascript:zweiframes('../Allgemein/nav_home.htm','Inhalt','../home.htm','Hauptframe')" onmouseover="lighten('name1b',1);return true;" onmouseout="darken ('name1a',1); return true;">Infos</a></td>
          </tr>
          <tr>
            <td width="120" height="32" nowrap><a href="javascript:zweiframes('../Allgemein/nav_home.htm','Inhalt','../home.htm','Hauptframe')" onmouseover="lighten('name1b',2);return true;" onmouseout="darken ('name1a',2); return true;">Neuigkeiten</a></td>
          </tr>
          <tr>
            <td width="120" height="32" nowrap><a href="javascript:zweiframes('../Allgemein/nav_home.htm','Inhalt','../home.htm','Hauptframe')" onmouseover="lighten('name1b',3);return true;" onmouseout="darken ('name1a',3); return true;">Fun-Fun-Fun</a></td>
          </tr>
          <tr>
            <td width="120" height="32" nowrap><a href="javascript:zweiframes('../Allgemein/nav_home.htm','Inhalt','../home.htm','Hauptframe')" onmouseover="lighten('name1b',4);return true;" onmouseout="darken ('name1a',4); return true;">Wasweissich</a></td>
          </tr>
          </table> </div>
          </body>
          </html>

        Für jede Hilfe bin ich tankbar :)

        Oh Pitte Pitte!!
        Viel Spass damit
        Holger

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln