Text auf einer JPG einbinden.

[Auge]

Hallo

Bin nebenbei am Arbeiten kann nicht immer sofort zurück schreiben :P

Das ist normal und dies hier kein Chat.

Also die Testseite ist immernoch online. http://southtown.de/testi.html

Oh, dann war die wohl kurz (zumindest von mir aus) nicht erreichbar.

Die Zitate sollen am besten in den unteren linken Bereich der orange ist.

Ok, fangen wir damit an.

1. Wo ist der orangene Bereich auf dem Bild?
2. Ein Element für die Zitate

zu 1. Wo und wie groß dieser Bereich ist, kannst du ja z.B. mit einem Grafikprogramm oder mit passenden, im Browser laufenden Entwicklertools auslesen. Du brauchst den Abstand des Bereichs von links und oben sowie die Breite und Höhe des Bereichs.

zu 2. Über den orangenen Bereich gehört, wie hier von Gunnar angesprochen (siehe: letzter Absatz), ein HTML-Blockelement mit einer ID hin. Damit es sich auf dem Bild befinden kann, muss es positioniert und in den Vordergrund geholt werden.

Beispiel für einen möglichen Aufbau:

<header>
 <img src="landing.png" usemap="#map" border="0" height="740" width="1420">
 <div id="zitatbox"></div>
</header>

 /*
Nimmt den header aus dem Elementfluss, belässt ihn ohne weitere
Angaben zur Position aber an der Stelle, wo er sowieso steht.
*/
header {
position: relative;
}
/* Angaben zur Zitatbox */
#zitatbox {
position: absolute; /* positioniert die Box absolut innerhalb von header */
left: XXXpx; /* Abstand der Box von links */
top: XXXpx; /* Abstand der Box von oben */
width: XXXpx; /* Breite der Box */
height: XXpx; /* Höhe der Box */
z-index: 1; /* hole die Box in den Vordergrund */
}

Warte aber mal kurz ab, es kommen bestimmt noch Verbesserungsvorschläge zum Code. Zum JavaScript-Teil, der das schlussendlich mit Leben erfüllen soll, soll sich bitte jemand anderer äußern. Da bin ich nicht firm genug.

Nun noch ein paar grundsätzliche Worte zum Aufbau der Seite. Du hast eine große Grafik, die sich offensichtlich über die gesamte Breite der Seite erstrecken soll. Das tut sie dann nicht, wenn der Viewport des Browsers (die zur Anzeige der Seite zur Verfügung stehende Fläche im Browser) breiter ist. Die Grafik steht dann einfach links oben in der Ecke.

Sinnvoll aufgebaut wäre es z.B., wenn die Welle eine einzelne Grafik als Hintergrundbild wäre, weil damit sichergestellt wäre, dass sie die ganze Seite ausfüllt. Wenn dann auch das Logo und der Link zum Fernwartungstool eigene Grafiken wären, hättest du als Imagemap nur noch das Hauptbild selbst.

Das bedeutet zwar einen etwas größeren Aufwand beim positionieren der einzelnen Grafiken, damit sie an der gewünschten Stelle angezeigt werden, macht dich aber flexibler in Sachen Code und Anzeigegröße der Seite.

Tschö, Auge