nicht angemeldet
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