Überichtskarte erstellen

[SkEaToN]

ich hab ne einfache jpg als übersichtskarte von pcs in nem büro. hab eine <map> erstellt und wenn man auf die pcs klickt bekommt man infos aus ner datenbank geliefert.
mit php hab ich eine methode, um zu sehen ob ein rechner an ist oder nicht, dazu habe ich entweder nen kleinen roten oder grünen punkt.
kann ich den irgendwie über die map legen damit er genau an den stellen der pcs ist? oder gibt es eine andere möglichkeit den status auf der jpg anzuzeigen und gleichzeitig diese als links zu benutzen?

[Sven Rautenberg]

Moin!

ich hab ne einfache jpg als übersichtskarte von pcs in nem büro. hab eine <map> erstellt und wenn man auf die pcs klickt bekommt man infos aus ner datenbank geliefert.
mit php hab ich eine methode, um zu sehen ob ein rechner an ist oder nicht, dazu habe ich entweder nen kleinen roten oder grünen punkt.
kann ich den irgendwie über die map legen damit er genau an den stellen der pcs ist? oder gibt es eine andere möglichkeit den status auf der jpg anzuzeigen und gleichzeitig diese als links zu benutzen?

Du kannst das Bild, das die Imagemap bildet, verändern. Entweder generierst du dir vorgreifend alle möglichen Kombinationen von eingeschalteten und ausgeschalteten PCs als rote und grüne Punkte in der Grafik und wählst beim HTML-Generieren nur noch die Grafik, die die passenden Punkte hat. Das wird allerdings bei mehr als 8 Computern schon extrem aufwendig (8 Computer erlauben 256 verschiedene Einschaltzustände)

Oder du generierst live mit PHP und den GD-Lib-Grafikfunktionen eine aktuelle Grafik. Das kann aber eventuell etwas zu viel Performance oder RAM kosten, das jedesmal neu zu generieren.

Alternativ kannst du natürlich auch HTML benutzen, um rote oder grüne verlinkte Grafiken als Layer über einer normalen Grafik zu positionieren. Setze die Grafik selbst in ein _RELATIV_ positioniertes Element (z.B. <div>), die Punkte müssen dann Unterelemente dieses <div> sein und werden absolut positioniert (ihre Position richtet sich dann nach der oberen linken Ecke des relativen DIV, dort ist 0/0!), damit sie am richtigen Platz auf der Grafik erscheinen. Das Positionssuchen mußt du nur einmal machen (bzw. da kannst du sehr wahrscheinlich direkt die Infos aus deiner Imagemap verwenden, eventuell plus/minus einem konstanten Faktor).

- Sven Rautenberg

[SkEaToN]

danke, der letzte tip hilft mir glaub ich weiter. werde das mal versuchen

[Chris]

Hallo,

nur als Alternative:

Das große Bild fein genug zerschneiden.
Dann muss immer nur ein Teilbildchen ausgetauscht werden, wenn sich ein Zustand ändert.

Allerdings erhöht die Zerlegung in ein Raster aus <img>-Tags enorm die gesamte Ladezeit, da die Subrequests alle serialisiert ausgeführt werden (die meisten Browser lassen nur zwei gleichzeitig aktive Requests an eine Domain zu). Eine mitgelieferte CSS-Information wäre aber nur ein einziger Ladevorgang.

LG
chris

[Sven Rautenberg]

Moin!

nur als Alternative:

Aber auch wirklich nur der Vollständigkeit halber. :)

Das große Bild fein genug zerschneiden.
Dann muss immer nur ein Teilbildchen ausgetauscht werden, wenn sich ein Zustand ändert.

Stimmt. Zusammensetzen muß man das Bild dann allerdings per Tabelle (andere Methoden funktionieren zwar grundsätzlich eventuell auch, aber sicher ist sicher).

Und als Nachteil: Ändert sich was an der Positionierung der Computer, so muß man das Zerschneiden noch mal komplett von vorn beginnen. Da ist eine Positionierung über CSS doch wesentlich schlichter und schöner. :)

Allerdings erhöht die Zerlegung in ein Raster aus <img>-Tags enorm die gesamte Ladezeit, da die Subrequests alle serialisiert ausgeführt werden (die meisten Browser lassen nur zwei gleichzeitig aktive Requests an eine Domain zu). Eine mitgelieferte CSS-Information wäre aber nur ein einziger Ladevorgang.

Ich denke, dieser Aspekt ist zwar grundsätzlich korrekt, im Intranet aber nicht so gravierend zu spüren. Zum einen vermute ich einen ziemlich unterbeschäftigten Server, zum anderen hohe Bandbreite. Aber auch deshalb sollte man grundsätzlich Bilder nicht unnötig zerschneiden, wenn man es auch ganz lassen kann.

- Sven Rautenberg