Paule: fünfzehnmal klappt es und dann ist Schluß

SELF-Forum

fünfzehnmal klappt es und dann ist Schluß

Paule
– Informationen zu den Bewertungsregeln

Hallo !

Ich habe folgendes Problem.
Ich möchte Stylesheets durch eventhandler verändern.
In einer Tabelle möcht ich beim überfahren eines Links
das Hintergrundbild dieser Zelle austauschen.

Ich habe ein Script gefunden, daß die Hintergrundfarbe
bei Überschriften verändert, wenn man die Maus darüber bewegt und habe dies umgeschrieben.

Im Kopf steht:

<style type="text/css">
<!--
td { background-image:url(bild1.gif) }
//-->
</style>

<script language="JavaScript" Type="Text/Javascript">
<!--

function nB(Nr)
{
var Bild;
if (document.all)
{
Bild = document.createStyleSheet();
Bild.addRule("td"+Nr,"Background-image:url(bild2.gif)");
}
}

function nB2(Nr)
{
var Bild;
if (document.all)
{
Bild = document.createStyleSheet();
Bild.addRule("td"+Nr,"Background-image:url()");
}
}
//-->

Im Körper steht:

<table>
<tr><td class="1">
<a href="......." onmouseover="nB(1)" onmouseout="nB2(1)">...........</a>
</td></tr>

<tr><td class="2">
<a href="......." onmouseover="nB(2)" onmouseout="nB2(2)">...........</a>
</td></tr>
.
.
.
.
</table>

Mit Hilfe von (Nr)wird erreicht das wirklich nur die Zelle verändert wird, die ach überfahren wird.
Beim verlassen der Zelle mit dem Courser wird
die zweite Funktion aufgerufen.
Da diese kein Bild definiert, erscheint das Original
wieder, das mit Hilfe von Stylesheets im Kopf
festgelegt wurde.

"creatstylesheet" ist vom InternetExplorer
eingeführt worden und wird auch nur von ihm
interpretiert.

Alles ist schön und gut, aber bei der fünfzehnten
Wiederholung von MouseOver und MouseOut,
wird plötzlich eine Fehlermeldung gebracht.

die Zeile:
Bild = document.createStyleSheet();
die in beiden Funktionen enthalten ist,
soll plötzlich einen Fehler enthalten.

Aber Warum, wenn es doch erst mal klappt?

Ich habe leider noch nicht so die Ahnung von JavaScript
und war deshalb auch froh das nach der Umstellung
alles klappte.
Deshalb wäre ich froh, sei es auch nur ein beschissener
Anfängerfehler, wenn mir jemand
den Fehler nennen und berichtigen könnte.

Vielleicht gibt es aber auch eine andere Möglichkeit diese Aufgabe zu lösen.

Vielen Dank

Paule

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. fünfzehnmal klappt es und dann ist Schluß

    Eeye
    – Informationen zu den Bewertungsregeln

    halli, hallo

    hab leider noch keine lösung gefunden, da ich das problem noch nicht so recht eingrenzen konnte...
    (dein gepostetets beispiel läuft so nicht, wg. ein paar tippfehlern :-), aber selbst als ich es frei hand verbessert habe, lief es bei mir nicht richtig (er lädt das zweite bild einfach nicht).
    vielleicht hab ichs ja auch kaputt gemacht wer weiss?
    hast du vielleicht ne URL damit ichs mir mal im original anschauen kann?

    übrigens kommt der von dir beschriebene fehler bei mir auch vor !!
    trotz fehlerhaften scripts.
    nach exakt 15 mal ist jedesmal schluss.
    keine ahnung warum.
    <gedankengang>
    du legst ja quasi bei jedem funktionsaufruf neue CSS na.
    bzw. neue CSS regeln.
    gibts da vielleicht so 'ne art obergrenze, dass es sich also um ne art überlauf handelt ?!
    (nur so ne idee)
    </gedankengang>

    ich meld mich sobald ich was handfesteres weiss, cu Eeye

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. fünfzehnmal klappt es und dann ist Schluß

      Paule
      – Informationen zu den Bewertungsregeln

      Hallo,

      und danke schon mal für die Arbeit.
      Leider habe ich dies noch nicht im Netz,
      da es halt nach dem fünfzehntenmal ......

      Hier noch mal richtig (hoffentlich)

      Kopf:

      <style type="text/css">
      <!--
      td table{ background-image:url(bilder/rasen2.gif); border:4px ridge; padding:2px }
      //-->
      </style>

      <SCRIPT LANGUAGE="JavaScript1.2" Type="TEXT/JAVASCRIPT">
      <!--
      function nBild(nr)
      {
      var Bild;
      if (document.all)
      {
      Bild=document.createStyleSheet();
      Bild.addRule ("td."+nr,"Background-Image:url(bilder/rasen3.gif)");
      }
      }

      function aBild (nr)
      {
      var Bild;
      if (document.all)
      {
      Bild=document.createStyleSheet();
      Bild.addRule ("td."+nr,"Background-Image:url()");
      }
      }
      //-->
      </script>

      Im Körper:

      <table height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>

      <table border cellspacing="2">  
<tr>

      <td class="1" align=center width="65"><a href="index.html" target="_parent" onMouseOver="nBild('1');
      status='Öffnet die Hauptseite'; return true;" onMouseOut="aBild('1'); status=''; return true;">Hauptseite</a></td>
      </tr>
      </table>
      </td></tr>
      .
      .
      .
      .
      .

      So läuft die Sache bei mir, zumindest 15 mal.

      Es handelt sich um ein Menü.
      In einer Tabelle befinden sich in den Zellen jeweils wieder eine Tabelle.

      Mit diesem Script sollte eigentlich der Aufwand erspart werden jeweils ein Bild für den Normalzustand und eins für den "MouseOver" Zustand, für jeden Menüpunkt, zu erstellen.
      Der Link (Farbe beim anklicken usw.)bleibt somit erhalten und
      zwei Bilder reichen aus, um den oftmals im Netz zu sehenden Effekt
      bei Menüs zu erzielen.

      Wenn man eine Variable in die Klammer schreibt, in der Zeile,
      wo das Problem auftritt,
      erscheint eine Fehlermeldung: Arbeitsspeicher ...
      Vielleicht hilft das ja weiter.

      Ich hoffe es gibt 'ne Lösung.

      Paule

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. fünfzehnmal klappt es und dann ist Schluß

        Antje Hofmann
        – Informationen zu den Bewertungsregeln

        Hallo Paule,

        endlich mal ein interessantes Problem :-)

        und danke schon mal für die Arbeit.
        Leider habe ich dies noch nicht im Netz,
        da es halt nach dem fünfzehntenmal ......

        Diesen Fehler kann ich ebenfalls nachvollziehen. Die Ursache kann ich nur vermuten:

        td table{ background-image:url(bilder/rasen2.gif); border:4px ridge; padding:2px }

        hier legst du css-Instanz Nr.1 an

        Bild=document.createStyleSheet();
        Bild=document.createStyleSheet();

        hier folgen insgesamt 30 weitere Instanzen. Keine Ahnung wie der Browser das verarbeitet. Aber es wirkt so, als ob er eine Art Speicherüberlauf bekommt. Also die vorhergehenden Instanzen intern speichert. Beim Aufruf der 32. Instanz, dein 16. Mal kommt es zur Fehlermeldung. Die Zahl 32 gibt mir irgendwie zu denken und deine Meldung bezüglich dem Arbeitsspeicher auch. :-)
        Aber ich baue den Gedanken mal nicht weiter aus.

        Dafür kann ich dir ein Workaround bieten.

        <script language="JavaScript1.2" type="text/javascript">
        <!--
        var Bild;
        Bild=document.createStyleSheet();

        function nBild(nr)
        {
        if (document.all)
        {
        Bild.addRule ("td."+nr,"background-image:url(bg1.gif)");
        }
        }

        function aBild (nr)
        {
        if (document.all)
        {
        Bild.addRule ("td."+nr,"background-image:url()");
        }
        }
        //-->
        </script>

        Du erzeugst also nur eine Instanz vom Bild und änderst dann jeweils nur deren Eigenschaften.

        Das funktioniert bei mir (IE5) fehlerfrei, wesentlich mehr als 15 mal.

        Viele Grüße

        Antje

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. fünfzehnmal klappt es und dann ist Schluß

        CirTap
        – Informationen zu den Bewertungsregeln

        Tach Paule,

        Ich hab dir mal 2 weitere Möglichkeiten gebastelt, die ohne ein neues STYLE-Objekt auskommen.

        Wie Antje geschrieben hat, produzierst du bei jedem Rollover neue "STYLE"-Objekte in der styleSheets-Collection und tatsächlich: bei 32 Stück ist Schluß. Man kann zwar "manuell" mit <style> wesentlich mehr hinzufügen, aber sobald per JS ein weiteres angelegt werden soll motzt IE.

        Was aber die Lösung deines eigentlichen Problems angeht, den Hintergrund auszutauschen, gibtz hier mehrere Möglichkeiten:

        Möglichkeit 1:
        definiere in *einem* hundsordinärem <STYLE>-Element (oder extern) soviele Classes wie "hintergrundbilder" erforderlich sind, du kannst sie natürlich auch zur Laufzeit per Script erstellen wenn du unbedingt willst/mußt (s. Möglichkeit 2)

        In Deiner Mausroutine kannst du dann einfach die CLASS ändern (ID ändern geht nicht):

        CSS-Datei oder <style>:
        ------------------------
        /* die Klasse für nix */
        td.blanko {background-image:url()}
        /* die Klassen für die Bilder */
        td.back1  {background-image:url(images/bild1.gif)}
        td.back2  {background-image:url(images/bild2.gif)}
        td.back3  {background-image:url(images/bild3.gif)}
        ..
        td.back99 {background-image:url(images/bild99.gif)}

        HTML-Datei:
        ------------------------
        <td class="back1" ID="tdNr1"
           onMouseOver="bildAnAus('1');" onMouseOver="bildAnAus('');">
        <td class="back2" ID="tdNr2"  
           onMouseOver="bildAnAus('2');" onMouseOver="bildAnAus('');">
        <td class="back3" ID="tdNr3"  
           onMouseOver="bildAnAus('3');" onMouseOver="bildAnAus('');">
        ...

        SCRIPT-Block
        ------------------------
        function bildAnAus(nummer) {
        var dasA  = window.event.srcElement; // das A-Element ermitteln
        var dasTD = dasA.parentElement;      // via DOM zum TD hochhangeln
        if(nummer!="")
           dasTD.className="back"+nummer; // CLASS-Name ändern
        else
           dasTD.className="blanko";
        }

        window.event.srcElement
          enthält einen Verweis auf das A von wechem das Maus-Ereignis ausgelöst wurde.

        .parentElement
          liefert das Element, in welchem sich das A direkt befindet. Sollten hier noch andere Element dazwischenliegen <td><div><b><a>  mußt du entsprechend viele .parentElement's dranhängen um z.B. vom A zum B zum DIV und zum TD zu gelangen.
          dasA.parentElement.parentElement.parentElement

        Möglichkeit 2:
        Verwende ein bestehendes STYLE-Element und schreib dort per JS die neuen rules hinein, anstelle jedesmal ein ganzes neues STYLE anzulegen, wenn du "nur" eine neue Angabe (rule) benötigst.

        Der IE unterstützt das ID-Attribut für <STYLE>
        <style id="reinschreibteil">
        <!--
        // kann völlig leer sein,  sollte aber NACH allen anderen
        // STYLES kommen, damit die Reihenfolge stimmt
        // -->
        </style>

        Dann via
          document.styleSheets["reinschreibteil"].addRule("td... ")
        oder auch
          document.styleSheets[0].addRule("td... ")
        die Teile reinhauen.

        Wieviele "rules" in einer "rules-Collection" erlaubt sind, weiß ich nicht.
        Grundsätzlich würde ich aber sagen, das Möglichkeit Nr. 1 genügen sollte.

        Viel Spaß

        CirTap

        PS: nettes Problem für hübsches Fiedscha

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. fünfzehnmal klappt es und dann ist Schluß

          Paule
          – Informationen zu den Bewertungsregeln

          N'abend  Antje, Eeye und CirTap

          Also ich hätte nicht geglaubt das so schnell Rettung in Sicht ist.
          Danke für die Scripte, die ich mir erstmal als Neuling näher anschauen muß.
          Ich traue es mir fast nicht zu schreiben , aber ich habe selbst im laufe des
          Tages im Buch etwas entdeckt, was mein Problem löst.
          Hier und da was abgewandelt und es scheint erst mal zu funktionieren.

          Da ich nur zwei Bilder jeweils miteinander tausche, scheint diese Lösung auch ganz akzeptabel zu sein.

          im Kopf steht:

          <SCRIPT LANGUAGE="JavaScript">
          <!--
          function nBild(z)
          {
          document.all.tags("td")[z].style.backgroundImage = "url(bilder/rasen3.gif)";
          }

          function aBild (z)
          {
          document.all.tags("td")[z].style.backgroundImage = "url()";
          }
          //-->
          </script>

          und im Körper:

          Gleicher Aufruf wie im alten Beispiel, aber class=".. " fällt sogar noch weg.
          Dafür muß man nun zählen, an wievielter Stelle das Tag <td> verändert werden soll und halt bei der Funktion in die Klammern eintragen.

          Es funktioniert zwar wieder nur mit dem InternetExplorer, aber dies stört mich nicht.

          Ich glaub, oder besser gesagt ich weiß, daß ich mich mit diesem Gebiet mal etwas näher beschäftigen sollte und werde dies in Angriff nehmen. HTML ist da zumindest mit Hilfe(Buch) wesentlich einfacher.
          Es ist echt toll, wenn etwas funktioniert was man selbst zusammen geschustert hat. Aber wenn hier was wesentliches falsch sein sollte, würde ich mich über weitere Hilfe freuen.

          Also nochmals dank an alle für eure Mühe.

          hängt lose
          Paule

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln