Hallo 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