Wie geht das?

Ich will auf einer HP ein Gruppenfoto unterbringen…das ist ja so kein Problem. Nun möchte ich zu den einzelnen Personen noch Informationen hinterlegen. Um an diese Infos zu gelangen, soll der Betrachter der Seite mit der Maus über das Bild fahren und dann z.b. die Köpfe anklicken. Schön wäre es zudem, wenn automatisch um den Kopf, auf dem sich der Mauspfeil befindet ein roter Kringel etc. auftauchen würde, damit der Besucher der Seite sofort sieht, welche Person er auswählt, wenn er ‚jetzt‘ klickt.

Wie geht das? :smile:

CIAO und DANKE!!!

Carsten

Ich glaube du meinst mouseover tags, d.h dass sich ein bild ändert wenn man mit der maus drüber fährt. dazu würde ich das gruppenfoto erstmal aufteilen und zu jedem kopf einzeln das mouse out foto (wenn die maus ned drüber is) und ein mouse over foto (wenn die maus drüber is) erstellen. dann diesen code einfügen:

wenn du mehr davon machst einfach bei allen pic1 die zahl ändern (2,3,4 usw.)
es gibt noch mehr mouse over codes aber die sind alle ziemlich lang… weiß nich wo ich obigen her hab aber er is ziemlich kurz und wirksam.
hoffe ich konnte helfen,
chriZ

Ich will auf einer HP ein Gruppenfoto
unterbringen…das ist ja so kein
Problem.

Hallo,

doch das ist ein Problem :smile:

Nun möchte ich zu den einzelnen
Personen noch Informationen hinterlegen.
Um an diese Infos zu gelangen, soll der
Betrachter der Seite mit der Maus über
das Bild fahren und dann z.b. die Köpfe
anklicken.

Nun, wenn diese Personen-Daten unterhalb oder neben dem Bildstehen sollen, könnte man mit versteckten Layern arbeiten.

Schön wäre es zudem, wenn
automatisch um den Kopf, auf dem sich der
Mauspfeil befindet ein roter Kringel etc.
auftauchen würde, damit der Besucher der
Seite sofort sieht, welche Person er
auswählt, wenn er ‚jetzt‘ klickt.

Hierzu empfiehlt sich ein Pfeil/Punkt mit transparentem Ramen, der dann eingeblendet wird. Allerdings ist das ÜBER dem Foto auch nur mit dhtml zu machen.

Mein Vorredner hatte ja schon kurz erwähnt das es die Möglichkeit des Foto-Zerschneidens gibt, allerdings ist diese Vorgehensweise meist bei Gruppenfotos kaum praktikabel, da man ja leider nur gerade schneiden kann.

Um das ganze in DHTML zu lösen bedarf es allerdings einiges an wissen, (welches hier nicht global im Forum erklärt werden kann), welches Du anscheinend nicht hast (sonst wäre es wohl kaum zu der Frage gekommen :smile:).

Es empfiehlt sich diesbezüglich für „Starter“ entweder das tagelange rumärgern mit inkompatiblen DHTML-Scripts oder die Aktion zu vergessen.

Was noch „relativ“ einfach zu machen wäre ist ein Image-Map und das öffnen eines neuen Fensters mit der Information bzw. alternativ das Updaten eines Framesets.

Allerdings Pfeile/Kreise IM Bild ist etwas schwierig. Vielleicht wäre es denkbar Pfeile OBERHalb des Bildes zu installieren, das könnte man dann auch mit einem mouseover im ImageMap aktualisieren. Das geht allerdings nur dann, wenn das Gruppenfoto von links nach rechts einreihig ist. (bzw. wenn zweireihig, dann ein Pfeil UNTER dem Bild und ein Pfeil über dem Bild).

Einen ersten Ansatz zum programmieren von Image-Map’s Mouseover findest Du hier: http://internet-partner.de/webmaster/java-script/mou… und/oder hier: http://internet-partner.de/webmaster/java-script/map…

Ich hoffe, daß es Dir ersteinmal etwas weiterhilft.

Gruß aus Hamburg
http://internet-partner.de

Hi,

Ich will auf einer HP ein Gruppenfoto
unterbringen…das ist ja so kein
Problem. Nun möchte ich zu den einzelnen
Personen noch Informationen hinterlegen.
Um an diese Infos zu gelangen, soll der
Betrachter der Seite mit der Maus über
das Bild fahren und dann z.b. die Köpfe
anklicken.

bis hierhin ist das eine klassische Anwendung einer Image-Map. Wie das geht erfährst Du bei http://www.teamone.de/selfhtml. Es ist am Anfang ein wenig ungewöhnlich, aber anschließend recht einfach.

Schön wäre es zudem, wenn
automatisch um den Kopf, auf dem sich der
Mauspfeil befindet ein roter Kringel etc.
auftauchen würde, damit der Besucher der
Seite sofort sieht, welche Person er
auswählt, wenn er ‚jetzt‘ klickt.

Das wiederum ist nicht ganz so einfach. Knuds Lösung habe ich nicht genau durchgelesen, aber eigentlich weiß er schon, wovon er redet :wink:

Am einfachsten wäre es vermutlich, onMouseOver (ähnlich der Antwort von criZ; weiteres findest Du auch bei obigem Link) die gesamte Grafik auszutauschen. Das geht dann aber leider zu Ungunsten der Ladezeit, von daher ist eine DHTML-Lösung (s. Knud) besser - diese funktioniert aber nur bei einem relativ geringem Teil der Browser (grob: 4er-Versionen). (Anmerkung: Der Austausch der kompletten Grafik funktioniert natürlich auch nur bei einem Teil, aber bei spürbar mehr.)

Einen kleinen Bereich der Grafik kannst Du jedenfalls nur dann austauschen, wenn Du sie in Stücke schneidest und mit einer Tabelle wieder zusammenfügst. Dann kannst Du übrigens auch ganz „normale“ Links über die Grafikteile legen.

Cheatah
http://cheatah.net