Grafik mit Javascript im Hintergund anlegen
0 
molily
0
Grafik mit Javascript im Hintergund anlegen
Der MartinHallo Forum,
gerne möchte ich diverse Grafiken (png) über eine onload Event-Handler als Hintergrund-Bilder in diversen pages verankern. Bisweilen habe ich mit CSS jedes einzelne Bild über BODY ID und die IMAGE ID individuell als background-image wie folgt aufgerufen:
#main1 #disc { background-image:url(../images/main1.png); }
#pulse1 #disc { background-image:url(../images/pulse1.png); }
etc.
Das funktioniert auch bestens. Da es sich jedoch um eine große Zahl von Bildern handelt, habe ich nun JS aus organisatorischen Gründen eingesetzt. Bislang funktioniert es auch problemlos über JS. Allerdings nicht als background-image.
Anbei der code:
html:
<body id="main1" onload="picture()">
<img id="disc" alt="please enable JavaScript">
JS script:
<!--
function picture() {
var file = '../../../../images/' + document.body.id + '.png';
document.getElementById("disc").src = [file];
}
// -->
CSS stylesheet:
#disc {
position: absolute;
margin: 0;
padding: 0;
left:249px; top:224px;
height: 148px; width: 142px; }
Ist das Vorhaben unter JS überhaupt möglich, die Bilder auf diese Weise im background anzulegen?
Über Eure Ideen würde ich mich freuen
Viele Grüße ins Forum
Matthias
-
Ist das Vorhaben unter JS überhaupt möglich, die Bilder auf diese Weise im background anzulegen?
Klar:
document.getElementById("disc").http://de.selfhtml.org/javascript/objekte/style.htm@title=style.<http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=backgroundImage >= "url(pfad/zur/datei/" + document.body.id + ".png)";Allerdings brauchst und solltest du nicht auf das load-Ereignis warten, weil dann das Bild erst geladen wird, wenn das Dokument schon fertig aufgebaut ist.
Du kannst obige Zeile auch in ein script-Element einfügen, das direkt hinter dem Element mit der ID disc liegt. Der Zugriff auf die body-ID sollte schon möglich sein. So wird die Grafik schon sehr früh vom Server geladen, als wäre sie direkt im Code eingebunden.Mathias
-
Hallo Mathias,
vielen Dank für Deine Hilfe. Klappt wunderbar :-)
Habe es bereits mit (.style.backgroundImage =) ausprobiert. Bin aber nicht auf die Idee mit der (="url(pfad/datei"). Die Formulierung war mir schlichtweg nicht bekannt. Dein Tipp mit dem script-Element probier ich auch gleich aus!Nochmals vielen herzlichen Dank für Deine Hilfe, und Dir ein tolles Wochenende.
Matthias-
Hallo,
Habe es bereits mit (.style.backgroundImage =) ausprobiert. Bin aber nicht auf die Idee mit der (="url(pfad/datei"). Die Formulierung war mir schlichtweg nicht bekannt.
nanu, dabei benutzt du diese Notation doch selbst schon, wie du in deinem Eröffnungsposting zeigst:
#main1 #disc { background-image:url(../images/main1.png); }
#pulse1 #disc { background-image:url(../images/pulse1.png); }Da kann ich dein Verständnisproblem im Moment nicht nachvollziehen ...
So long,
Martin--
Solange der Nagellack nicht trocken ist,
ist eine Frau praktisch wehrlos.
(Burt Reynolds, US-Schauspieler)-
Hallo Martin,
Du hast natürlich recht. Doch muss ich zu meiner Schande gestehen, dass ich in Sachen JS noch nicht so ganz sicher bin, nicht immer von Anfang den richtigen Ansatz verfolge und vielfach erst mal ausprobiere. Insofern bin ich zunächst mit der Eigenschaft .src im JS festgehakt.
Viele Grüße
Matthias
-
-
-