nicht angemeldet
Hintergrundbild ändern
Hallo!
Ich möchte in einer Seite das Hintergrundbild ändern. Dies ist in einer Tabelle aufgeteilt.
Ich hab jedem Bild eine id zugewiesen (image_1, image_2, ...).
Die Dateinamen der Bilder haben die form image_01, image_02, ..., image_10, ...
Meine funktion sieht so aus:
var ImageCount = 42;
var HomePageName = "mta";
var ActiveSection = "_home";
for (var x = 1; x <= ImageCount; x++)
{
//Does the id exists?
if (document.getElementById("image_" + x))
{
if (x <= 9) //To the umbers 0-9 will be added a 0
{
document.getElementById("image_" + x).style.backgroundImage = "url(/naeff/" + HomePageName + "/" + ActiveSection + "/image/main_0" + x + ".jpg)";
}
else //To the others not
{
document.getElementById("image_" + x).style.backgroundImage = "url(/naeff/" + HomePageName + "/" + ActiveSection + "/image/main_" + x + ".jpg)";
}
}
}
Dies funktioniert auch, sind die Bilder aber nicht im Browser cache werden sie entweder sehr langsam, oder erst nach ein paar mal Seite neu laden angezeigt.
Hier in SELFHTML habe ich das Beispiel mit den Buttons gefunden: http://de.selfhtml.org/javascript/beispiele/buttons.htm#quelltext
hier wird jeweils mit my_image = new Image(); die neue Instanz erzeugt und anschliessend mit my_image.scr der Pfad zugewiesen. Ich brauche aber bei der Hintergrundgrafik als Pfad backgroundImage = "url(...". Kann ich meine Funktion dann einfach wie folgt abändern? was bewirkt new Image() genau?
for (var x = 1; x <= ImageCount; x++)
{
//Does the id exists?
if (document.getElementById("image_" + x))
{
if (x <= 9) //To the umbers 0-9 will be added a 0
{
new_image = new Image();
new_image.src = "url(/naeff/" + HomePageName + "/" + ActiveSection + "/image/main_0" + x + ".jpg)";
document.getElementById("image_" + x).style.backgroundImage = new_image.src;
}
else //To the others not
{
new_image = new Image();
new_image.src = "url(/naeff/" + HomePageName + "/" + ActiveSection + "/image/main_" + x + ".jpg)";
document.getElementById("image_" + x).style.backgroundImage = new_image.src;
}
}
Das ergebnis mit der unveränderten (der ersten hier gelisteten) Funktion kann auf www.mytinyarchive.ch.vu angesehen werden.
mfg
-
Hallo mabuhay,
Ich möchte in einer Seite das Hintergrundbild ändern. Dies ist in einer Tabelle aufgeteilt.
Eine Seite hat einen <body>-Tag, der kann ein Hintergrundbild haben (z.B. per CSS gesetzt). Plötzlich redest du von Tabellen. Vormuliere dich deutlich :)
Dies funktioniert auch, sind die Bilder aber nicht im Browser cache werden sie entweder sehr langsam, oder erst nach ein paar mal Seite neu laden angezeigt.
selbstverständlich, sie werden ja auch erst runtergeladen, wenn die Funktion aufgerufen wird (was scheinbar erst nach einer Benutzeraktion passiert).
[...] hier wird jeweils mit my_image = new Image(); die neue Instanz erzeugt und anschliessend mit my_image.scr der Pfad zugewiesen.
und genau dann fängt er an zu Laden, jep.
Ich brauche aber bei der Hintergrundgrafik als Pfad backgroundImage = "url(...". Kann ich meine Funktion dann einfach wie folgt abändern? was bewirkt new Image() genau?
new_image = new Image();
new_image.src = "url(/naeff/" + HomePageName + "/" + ActiveSection + "/image/main_0" + x + ".jpg)";
document.getElementById("image_" + x).style.backgroundImage = new_image.src;Nein! Das eine sind Bild-Objekte, das andere ist CSS und dessen Eigenschaft Hintergrundbilder. Letztere kannst du nicht "initialisieren".
Zumindest nicht wirklich. Einen kleinen Trick könnte ich mir allerdings vorstellen: Du initialisierst ein Image-Objekt (wie du das bereits gemacht hast), dann wird das Bild runtergeladen. Jedoch benutzt du es nirgends, sondern setzt das Hintergrundbild später per CSS. Wenn der Browser seinen Cache benutzt, hat er das Bild nun schon runtergeladen und das Laden geht erheblich schneller (aber immernoch langsamer als die Methode, wie sie in SELFHTML steht, weil er erst nochmal beim Server vorbeischaut, ob sich das Bild geändert hat).
Wenn du also die Geschwindigkeit brauchst, geht nichts dran vorbei - du musst das Bild als <img> einbinden.
Grüße,
Sven
-
Hallo mabuhay,
Ich möchte in einer Seite das Hintergrundbild ändern. Dies ist in einer Tabelle aufgeteilt.
Eine Seite hat einen <body>-Tag, der kann ein Hintergrundbild haben (z.B. per CSS gesetzt). Plötzlich redest du von Tabellen. Vormuliere dich deutlich :)
*g* hier im Forum wird scheinbar sehr direkt auf ungereimtheiten oder missverständliches eingegangen wie ich schon bei anderen Threads gesehen habe, find ich aber ganz ok ;)
Ich hab halt sozusagen ein Hintergrundbild (ein Bild im Hintergrund, hinter dem Text :p ), welches ich aber aufgrund von Menu und Text usw. in kleine Bilder aufgeteilt habe und in einer Tabelle zusammengesetzt... - alles klar? :)Zumindest nicht wirklich. Einen kleinen Trick könnte ich mir allerdings vorstellen: Du initialisierst ein Image-Objekt (wie du das bereits gemacht hast), dann wird das Bild runtergeladen. Jedoch benutzt du es nirgends, sondern setzt das Hintergrundbild später per CSS. Wenn der Browser seinen Cache benutzt, hat er das Bild nun schon runtergeladen und das Laden geht erheblich schneller (aber immernoch langsamer als die Methode, wie sie in SELFHTML steht, weil er erst nochmal beim Server vorbeischaut, ob sich das Bild geändert hat).
Wenn du also die Geschwindigkeit brauchst, geht nichts dran vorbei - du musst das Bild als <img> einbinden.
Vielen dank, werd dann mal sowas ausprobieren. Also eine schlaufe mit
new_image = new Image();
new_image.src = "naeff/" + HomePageName + "/" + ActiveSection + "/image/main_0" + x + ".jpg";
würde reichen? oder muss ichs zum Beispiel mit einem Array machen damit die url nicht gleich überschrieben wird? z.B. so?
new_image = new Array();
new_image[x] = new Image();
new_image[x].src = "naeff/" + HomePageName + "/" + ActiveSection + "/image/main_0" + x + ".jpg";mfg
mabuhay-
Hallo mabuhay,
new_image = new Array();
for(int x = 0; x < WasWeißIch; x++) {
new_image[x] = new Image();
new_image[x].src = "naeff/" + HomePageName + "/" + ActiveSection + "/image/main_0" + x + ".jpg";}
ganz genau. Jetzt musst du nur noch dafür sorgen, dass die <img>s hinter den Text kommen (als "Hintergrund") und letztenendes dann auch das Image-Objekt angewendet bekommen (siehe SELFHTML).
Grüße,
Sven
--
ich hatte mal meterlange signs, die sind alle weg
-
-