Harte Nuss - Per html transparente Bilder übereinander legen um Gesamtbild zu erzeuge

Tob

Hallo Gemeinde,
ich sitze an einer harten Nuss:
Wir wollen eine Schnittzeichnung (schwarz-weiß, Hintergrund) eines technischen Produktes erzeugen, bei der einzelne Komponenten farbig angezeigt werden sollen (transparente Bilder, mit farbigen Feldern). Hierfür haben wir ein Excel-Makro geschrieben, welches aus einer Teilestückliste und der Auswahl, welche Komponenten in der Schnittzeichnung farbig angezeigt werden sollen, automatisch ein html-file erzeugt.
Dieses html-file soll erst die Schnittzeichnung im Hintergrund laden, danach die Komponentenzeichnungen (hintergrund transparent) darüber legen. In unserem Fall gibt es ca. 400 Komponenten. Die Bilder (.png) haben eine Datengröße von 370 kb (Hintergrundbild) und ca. 80kb (Komponentenbild).
Der html-code sieht beispielhaft folgendermaßen aus (ich bin html-Neuling):

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- diese Datei wurde über eine Excel-VBA-Prozedur erstellt-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML Schnittzeichnung</title>
</head>


<body bgcolor="#ffffff">


<img style="position: absolute; width: 100%; height: auto; z-index:1;" src="basiszeichnung.png"; alt="basiszeichnung.png">
<img style="position: absolute; width: 100%; height: auto; z-index:2;" src="0072-0010.png"; alt="0072-0010.png">
<img style="position: absolute; width: 100%; height: auto; z-index:3;" src="0072-0020-0010.png"; alt="0072-0020-0010.png">
<img style="position: absolute; width: 100%; height: auto; z-index:4;" src="0072-0020-0020.png"; alt="0072-0020-0020.png">
<img style="position: absolute; width: 100%; height: auto; z-index:5;" src="0072-0030.png"; alt="0072-0030.png">
<img style="position: absolute; width: 100%; height: auto; z-index:6;" src="0072-0040.png"; alt="0072-0040.png">
<img style="position: absolute; width: 100%; height: auto; z-index:7;" src="0118-0010-0010.png"; alt="0118-0010-0010.png">
<img style="position: absolute; width: 100%; height: auto; z-index:8;" src="0118-0030.png"; alt="0118-0030.png">
<img style="position: absolute; width: 100%; height: auto; z-index:9;" src="0118-0040.png"; alt="0118-0040.png">
<img style="position: absolute; width: 100%; height: auto; z-index:10;" src="0118-0050.png"; alt="0118-0050.png">
<img style="position: absolute; width: 100%; height: auto; z-index:11;" src="0118-0180.png"; alt="0118-0180.png">
<img style="position: absolute; width: 100%; height: auto; z-index:12;" src="0150-0900-0200.png"; alt="0150-0900-0200.png">
<img style="position: absolute; width: 100%; height: auto; z-index:13;" src="0150-0900-0220-0010.png"; alt="0150-0900-0220-0010.png">
<img style="position: absolute; width: 100%; height: auto; z-index:14;" src="0150-0900-0240.png"; alt="0150-0900-0240.png">
<img style="position: absolute; width: 100%; height: auto; z-index:15;" src="0150-0900-0270.png"; alt="0150-0900-0270.png">
<img style="position: absolute; width: 100%; height: auto; z-index:16;" src="0150-0910-0900-0010-0010.png"; alt="0150-0910-0900-0010-0010.png">
<img style="position: absolute; width: 100%; height: auto; z-index:17;" src="0150-0910-0900-0010-0020.png"; alt="0150-0910-0900-0010-0020.png">
<img style="position: absolute; width: 100%; height: auto; z-index:18;" src="0150-0910-0900-0010-0030.png"; alt="0150-0910-0900-0010-0030.png">
<img style="position: absolute; width: 100%; height: auto; z-index:19;" src="0150-0910-0900-0020.png"; alt="0150-0910-0900-0020.png">
<img style="position: absolute; width: 100%; height: auto; z-index:20;" src="0150-0910-0900-0026.png"; alt="0150-0910-0900-0026.png">
<img style="position: absolute; width: 100%; height: auto; z-index:21;" src="0150-0910-0900-0030.png"; alt="0150-0910-0900-0030.png">
<img style="position: absolute; width: 100%; height: auto; z-index:22;" src="0150-0910-0900-0080.png"; alt="0150-0910-0900-0080.png">
<img style="position: absolute; width: 100%; height: auto; z-index:23;" src="0150-0910-0900-0090.png"; alt="0150-0910-0900-0090.png">
<img style="position: absolute; width: 100%; height: auto; z-index:24;" src="0150-0910-0900-0100.png"; alt="0150-0910-0900-0100.png">
<img style="position: absolute; width: 100%; height: auto; z-index:25;" src="0150-0910-0900-0110.png"; alt="0150-0910-0900-0110.png">
<img style="position: absolute; width: 100%; height: auto; z-index:26;" src="0150-0910-0900-0160.png"; alt="0150-0910-0900-0160.png">
<img style="position: absolute; width: 100%; height: auto; z-index:27;" src="0150-0910-0900-0180.png"; alt="0150-0910-0900-0180.png">
<img style="position: absolute; width: 100%; height: auto; z-index:28;" src="0150-0910-0910-0030-0010.png"; alt="0150-0910-0910-0030-0010.png">
<img style="position: absolute; width: 100%; height: auto; z-index:29;" src="0150-0910-0910-0030-0020.png"; alt="0150-0910-0910-0030-0020.png">
<img style="position: absolute; width: 100%; height: auto; z-index:30;" src="0150-0910-0910-0050.png"; alt="0150-0910-0910-0050.png">
</body>
</html>

Alles anzeigen

Problem:
- Das Hintergrundbild und ca. 20 Komponentenzeichnungen werden problemlos angezeigt, weitere Komponenten werden nicht geladen (X am linken oberen Bildrand)
Fragen:
- Da ich ziemlicher html-Neuling bin, weiß ich nicht ob der Code alles beinhaltet, was benötigt wird.
- Warum werden ab 20 Bilder keine weiteren mehr geladen? (ich verwende den Internet Explorer 9)
Über jegliche Information bin ich dankbar!
Viele Grüße
Tob

threadi

Wie rufst Du die Datei auf? Lokal oder auf einem Webserver per http?
Liegen die Dateien denn auch alle da? Also auch die die nicht angezeigt werden?
Wenn sie vorliegen - wurde auf Groß-/Kleinschreibung geachtet (relevant wenn Du die Datei über http auf einem Linux-Server lädst)?

Und letztlich noch eine konzeptionelle Frage: warum HTML und nicht SVG?

Tob

Hallo threadi,

danke für deine Antwort!
Zu deinen Fragen:
Wie rufst Du die Datei auf? Lokal oder auf einem Webserver per http? Momentan liegen die Dateien lokal, sollen aber später auf einem webserver gespeichert werden, dass auch Nutzer von außerhalb zugreifen können. Beide Varianten habe ich ausprobiert, mit dem selben Fehler: Es werden Bilder beim einen Mal nicht angezeigt, wenn ich aber die Anzahl reduziere und die nicht angezeigten Bilder auswähle, werden diese angezeigt.

Liegen die Dateien denn auch alle da? Also auch die die nicht angezeigt werden? Alle Bilder liegen im gleichen Verzeichnis

Wenn sie vorliegen - wurde auf Groß-/Kleinschreibung geachtet (relevant wenn Du die Datei über http auf einem Linux-Server lädst)? Die Bildernamen wurden auch per Makro von der Stückliste erzeugt, entsprechen also 1:1 (inklusive Groß-/Kleinschreibung dem erzeugten html Code

Und letztlich noch eine konzeptionelle Frage: warum HTML und nicht SVG?
Ich muss zugeben, SVG kenne ich garnicht. Unser Ziel ist es, dass wir die erzeugten html-files verschicken können, jeder user kann diese mit dem Internet Explorer 9 ohne Zusatzinstallationen öffnen (ob das mit SVG geht weiß ich nicht). Das html-file greift dann auf die Bilder des Servers zu und zeigt das von uns generierte Schnittbild (übereinandergelegten Bilder) an. Wenn es dafür bessere Formate oder Werkzeuge gibt, bin ich für alle Vorschläge offen und dankbar!

Viele Grüße

Tobi

Tags