Einsatz von Grafiken und Imagemaps

[Daniela Schulz]

Einen schönen Sonntag,

heute frag ich endlich mal, was ich schon immer wissen wollte...

1. Wenn ich eine graphisch aufwendig gestaltete Webpage aufrufe und sie
sich langsam aufbaut, dann sehe ich zunächst (im Ladeprozeß) viele
einzelne Bildplatzhalter. Wenn die Seite dann vollständig geladen ist,
sieht die Oberfläche aber aus wie "aus einem Guß", also wie ein einziges
Bild. Weisen diese einzelnen Bildplatzhalter darauf hin, daß hier eine
Imagemap vorhanden ist? Ich habe mal versucht, darauf zu achten,
meine aber, daß dies nicht unbedingt der Fall ist. Was ist also mit diesen
zahlreichen Platzhaltern?

2. Ich möchte gerne eine Webpage erstellen, wo auf der ersten Seite ein
Bild die Navigation erleichtert. Einerseits soll es eine Spalte mit Links
geben, die, wenn man mit der Maus darüberfährt, leuchten. Mit einem
Javascript habe ich das sogar zustande bekommen. Schön wäre es aber,
wenn nun rechts neben dieser Link-Spalte eine kleine Erläuterung zu den
einzelnen Links auftauchen würde, ebenfalls in dem Moment, in dem ich
mit dem Cursor über den Link fahre und dieser leuchtet. Mir fällt nicht ein,
wie ich das hinkriegen soll. Ich sollte vielleicht noch erwähnen, daß ich
Javascript nur anpassen nicht aber programmieren kann.

3. Ist es möglich, eine Imagemap zu konstruieren, bei der sensitive
Bildelemente bei "on mouse over" durch andere, gleichgroße Bildelemente
ausgetauscht werden können, oder geht das nur mit Einzelbildern?

Danke für hilfreiche Antworten!!
Daniela

[Frank Schönmann]

hi!

1. Wenn ich eine graphisch aufwendig gestaltete Webpage aufrufe und sie
   sich langsam aufbaut, dann sehe ich zunächst (im Ladeprozeß) viele
   einzelne Bildplatzhalter. Wenn die Seite dann vollständig geladen ist,
   sieht die Oberfläche aber aus wie "aus einem Guß", also wie ein einziges
   Bild. Weisen diese einzelnen Bildplatzhalter darauf hin, daß hier eine
   Imagemap vorhanden ist?

Nein, genau das nicht. Wenn vorher viele Platzhalter erscheinen, wird für jeden dieser Platzhalter ein Bild geladen. Die einzelnen Bilder sind an den passenden Stellen "zerschnitten" und dann, z.B. durch Einsatz von Tabellen, wieder an diesen Stellen zusammengefügt. Jeder oder einige, aber immer ganze, Bilder von den geladenen sind dann mit irgendeiner URL verlinkt.
Bei Imagemaps ist es anders: es wird nur ein einziges Bild geladen - also auch nur ein Platzhalter angezeigt - und dann auf diesem Bild bestimmte Bereiche definiert, die mit URLs verlinkt sind.

2. Ich möchte gerne eine Webpage erstellen, wo auf der ersten Seite ein
   Bild die Navigation erleichtert. Einerseits soll es eine Spalte mit Links
   geben, die, wenn man mit der Maus darüberfährt, leuchten. Mit einem
   Javascript habe ich das sogar zustande bekommen. Schön wäre es aber,
   wenn nun rechts neben dieser Link-Spalte eine kleine Erläuterung zu den
   einzelnen Links auftauchen würde, ebenfalls in dem Moment, in dem ich
   mit dem Cursor über den Link fahre und dieser leuchtet.

Das geht genauso wie die andere Technik und du kannst beide beliebig kombinieren. An der Stelle, an der die Erläuterung erscheinen soll, setzt du ein anderes Bild hin - entweder als Platzhalter, also komplett transparent, oder als andere Grafik, die ersetzt wird. Dann erstellst du die Grafiken mit der Erläuterung, die am besten genauso groß sein sollten, wie die Platzhaltergrafik.
Der Rest funktioniert genauso wie bei den erleuchteten Menüpunkten. Im onMouseOver-Event definierst du nur eine weitere Funktion, die neben der Menüpunkt-Grafik auch die Erläuterungsgrafik austauscht. Die Funktionen sehen sind dann wahrscheinlich identisch, bis auf den Namen des auszutauschenden Bildes.
Wenn du das nicht ganz verstanden hast, poste einfach mal die entscheidenden Code-Ausschnitte, dann kann ich es evtl. anpassen.

3. Ist es möglich, eine Imagemap zu konstruieren, bei der sensitive
   Bildelemente bei "on mouse over" durch andere, gleichgroße Bildelemente
   ausgetauscht werden können, oder geht das nur mit Einzelbildern?

Weniger, da eine Imagemap ja ein einziges Bild ist, und wie willst du da einzelne Bereiche des Bildes austauschen? Es sei denn, du lädst das komplette Bild neu, was aber aufgrund der Größe sicherlich kaum sinnvoll wäre.
Das funktioniert nur, wenn du statt eine Imagemap zu verwenden, das komplette Bild in Einzelgrafiken aufspaltest und diese aneinanderhängst (siehe Antwort 1), dann kannst du einzelne Grafiken austauschen.
Allerdings sollte es möglich sein, beim Überfahren einzelner Bereiche der Imagemap andere Grafiken auszutauschen, z.B. für eine Erläuterung wie in Frage 2.

Danke für hilfreiche Antworten!!

Hoffe, es hilft.

bye, Frank!

[Patrick]

Einen schönen Sonntag,

heute frag ich endlich mal, was ich schon immer wissen wollte...

1. Wenn ich eine graphisch aufwendig gestaltete Webpage aufrufe und sie
   sich langsam aufbaut, dann sehe ich zunächst (im Ladeprozeß) viele
   einzelne Bildplatzhalter. Wenn die Seite dann vollständig geladen ist,
   sieht die Oberfläche aber aus wie "aus einem Guß", also wie ein einziges
   Bild. Weisen diese einzelnen Bildplatzhalter darauf hin, daß hier eine
   Imagemap vorhanden ist?

Oder ein in vielen Tabellenzellen geteiltes Bild! Außerdem erscheinen Platzhalter nur dann, wenn der Autor die Attributen WIDTH und HEIGHT im IMG SRC-Tag nicht vergessen hat... Diese helfen die Ladezeiten klein zu halten, da der Browser dann schon vorher "weiß" wo und wie groß die Bilder sind, die noch geladen werden.

2. Ich möchte gerne eine Webpage erstellen, wo auf der ersten Seite ein
   Bild die Navigation erleichtert. Einerseits soll es eine Spalte mit Links
   geben, die, wenn man mit der Maus darüberfährt, leuchten. Mit einem
   Javascript habe ich das sogar zustande bekommen. Schön wäre es aber,
   wenn nun rechts neben dieser Link-Spalte eine kleine Erläuterung zu den
   einzelnen Links auftauchen würde, ebenfalls in dem Moment, in dem ich
   mit dem Cursor über den Link fahre und dieser leuchtet. Mir fällt nicht ein,
   wie ich das hinkriegen soll. Ich sollte vielleicht noch erwähnen, daß ich
   Javascript nur anpassen nicht aber programmieren kann.

Du brauchst nur im IMG TAG einen sogenannten "alternate name" (ALT)anzugeben, etwas so:

<IMG SRC="Bild.gif" Border=0 Width=14 Height =145 Alt="Dies ist ein Bild, hätten Sie es gewußt?">

Ob der kleine Tooltext jetzt rechts, links, oben oder unten erscheint, kann ich Dir nicht sagen. Die Information jedenfalls, auf die es ankommt, wird angezeigt, sowohl bevor das Bild geladen ist als auch beim Drüberfahren mit der Maus.

3. Ist es möglich, eine Imagemap zu konstruieren, bei der sensitive
   Bildelemente bei "on mouse over" durch andere, gleichgroße Bildelemente
   ausgetauscht werden können

Auch das ist möglich, allerdings mit dem jeweils ganzen Imagemap. Hier ein Beispiel, zu sehen unterhttp://www.fortunecity.com/tinpan/floyd/692/pac/paf4.htm, ganz unten, das sogenannte "Fehler-Mail-dung"-Bild. Dort wird mit dem OK-Button mit dem "onClick"-Event durch ein Bild mit dem jetzt eingedrückten OK-Button ersetzt, sobald auf OK geklickt wird. Was mit onClick geht, geht auch mit onMouseOver.

Bis danndann

PAF(patrickausfrankfurt)
Im Streik und heute über ARCOR

[Frank Schönmann]

hi!

1. Wenn ich eine graphisch aufwendig gestaltete Webpage aufrufe und sie
   sich langsam aufbaut, dann sehe ich zunächst (im Ladeprozeß) viele
   einzelne Bildplatzhalter. Wenn die Seite dann vollständig geladen ist,
   sieht die Oberfläche aber aus wie "aus einem Guß", also wie ein einziges
   Bild. Weisen diese einzelnen Bildplatzhalter darauf hin, daß hier eine
   Imagemap vorhanden ist?

Oder ein in vielen Tabellenzellen geteiltes Bild! Außerdem erscheinen Platzhalter nur dann,
wenn der Autor die Attributen WIDTH und HEIGHT im IMG SRC-Tag nicht vergessen hat...
Diese helfen die Ladezeiten klein zu halten, da der Browser dann schon vorher "weiß" wo
und wie groß die Bilder sind, die noch geladen werden.

Das ist so nicht ganz richtig!

1. Manche Browser zeigen IMHO auch Platzhalter an, wenn das Bild noch nicht geladen und die Größe trotzdem nicht bekannt ist. Die Platzhalter sind dann eben nicht so groß wie das eigentliche Bild.

2. Die Ladezeiten sind gleich groß, egal ob width und height angegeben sind oder nicht - theoretisch sogar etwas länger, weil ja diese Attribute mit übertragen werden müssen ;-)) Die Angabe dieser Attribute verkürzt nur die Zeit bis zur Anzeige der kompletten Seite.
Das gilt aber vor allem für Tabellen. Ohne Tabellen zeigt z.B. Internet Explorer (AFAIR) verkleinerte Platzhalter an und lässt dann den Text an den Seiten "auseinanderspringen", sobald das Bild geladen ist. Angezeigt wird er aber schon vorher.

bye, Frank!

[Patrick]

Hallo Thomas!

Das ist so nicht ganz richtig!

1. Manche Browser zeigen IMHO auch Platzhalter an, wenn das Bild noch nicht geladen und die Größe trotzdem nicht bekannt ist. Die Platzhalter sind dann eben nicht so groß wie das eigentliche Bild.

Du hast natürlich recht! Mit Platzhaltern meinte ich aber solche, die bereits die Größe der zu ladenden Grafik einnehmen....
Sicher, ansonsten, also ohne WIDTH und HEIGHT-Angaben kommt ein kleines Viereck mit einem "N" (Netscape) oder einem 3-Farben-Icon (IE).

Die Angabe dieser Attribute verkürzt nur die Zeit bis zur Anzeige der kompletten Seite.

Genau das habe ich sagen wollen...

Das gilt aber vor allem für Tabellen. Ohne Tabellen zeigt z.B. Internet Explorer (AFAIR) verkleinerte Platzhalter an und lässt dann den Text an den Seiten "auseinanderspringen", sobald das Bild geladen ist. Angezeigt wird er aber schon vorher.

Jedoch nicht, wenn WIDTH und HEIGHT angegeben wurden, oder?

Danke für die Richstigstellung! Hatte mich nicht präzis genug ausgedrückt!

PAF

[Dennis Minnich]

Hallo!

die ersten beiden Fragen wurden von Patrick und Frank schon ausreichend beantwortet, nun zu Frage drei:

3. Ist es möglich, eine Imagemap zu konstruieren, bei der sensitive
   Bildelemente bei "on mouse over" durch andere, gleichgroße Bildelemente
   ausgetauscht werden können, oder geht das nur mit Einzelbildern?

JA, ES IST MÖGLICH!

Schau mal unter http://www.webreference.com/dhtml/column2/ nach.

Da steht ausführlichst beschrieben, wie man das für MSIE4 und NN4 hinbekommt!

Schau mal rein, ich hoffe, es hilft Dir,

Dennis