Verweissensitive Grafiken (Image-Maps)

Änderungs- und Erweiterungswünsche für TNG
Antworten
salsa
VIP Mitglied
Beiträge: 232
Registriert: 20.06.2007 21:24

Verweissensitive Grafiken (Image-Maps)

Beitrag von salsa »

Liebe TNG-User/innen,
wie wär's mit einer verweis-sensitiven Grafik, sog. Image-Map, auf der TNG-Homepage?
Wenn man ein Gruppenfoto (z.B. Klassenfoto; Konfirmationsfoto; Hochzeitsfoto; Fußballverein; Kohl- und Pinkelfahrt); oder eine Häuserzeile, in der man die Häuser bezeichnen möchte; oder verschiedene Tiere eines Zoos; oder verschiedene Gegenstände seines Hobbys u.v.m. präsentieren möchte, schreibt man die Erläuterungen meist über oder unter das Bild. Die Erläuterungen, wo welche Person steht, wo welches Haus steht, wo des Tier steht, welcher Gegenstand beschrieben wird, sind dann meist sehr umfangreich. der Betrachter muß dann immer wieder die Erläuterung lesen und dann das zugehörige Bild betrachten.

Man kann in TNG so etwas einfacher haben. Man hält den Mauszeiger z.B. auf den Kopf einer Person und schon erscheint eine kurze Erklärung zu dieser Person.
Wenn man nun die linke Maustaste drückt, wird zum Personenblatt dieser Person verzweigt. Dort kann man dann weitere Einzelheiten erfahren.

Wie so etwas aussehen könnte, kann auf folgendem Link betrachtet werden.
Klick auf einen der Köpfe bringt Namen. Klick mit Maustaste verzweigt zu einer entsprechenden Eintragung (nur Beispiele).
Bei der dort abgebildeten Gruppe handelt es sich um mir unbekannte Menschen. Wenn sich jemand auf dem Foto wiedererkennen sollte, bitte Bescheid sagen, dann wird Seite sofort vom Netz genommen.
Hier der Link:
http://www.nord-com.net/heitow/mustermann_gruppe.html

So wird's gemacht :

1. TNG starten;
2. gewünschte Person laden;
3. auf ein Gruppenfoto dieser Person klicken;
4. Klick auf "Medium bearbeiten";
5. Man merkt sich die Personen-Kennung der Person, die man weiter unten auf der TNG-Personenseite unter "Bestehende Verknüpfung:" findet (z.B. I35) - evtl. auf einem Zettel notieren;
6. unten zum Bereich "Erzeugung einer Verweis-sensitiven Graphik (Image Map)" gehen; hier ist genau beschrieben, wie vorzugehen ist;
7. man wählt die "Form des Bereiches" (Kreis ist markiert);
8. man führt nun den Mauszeiger (der sich zu einem Kreuz gewandelt hat) auf den Kopf der ersten zu markierenden Person, und zwar in die Mitte des Kopfes; dort klickt man einmal mit der linken Maustaste;
9. dann führt man den Mauszeiger an den linken (oder rechten) Rand des Kopfes und klick nochmal mit der linken Maustaste;
es öffnet sich ein Fenster "Suche Personen-Kennung";
10. In das Feld "Personen-Kennung" tippt man die Personen-Kennungs-Nr (z.B. I35) ein;
man kann aber auch den Nachnamen und Vornamen der Person eingeben und auf "Suche" klicken; es wird die gesuchte Person bzw. weitere Personen ähnlicher Namen aufgelistet;
11. man klickt auf den Namen der gewünschten Person - fertig;
12. das Ergebnis dieser Prozedur sieht man im Bereich "Verweis-sensitive Graphik (Image Map):" über dem Bild; es ist dort automatisch Code eingefügt worden.
13. Klick auf die Schaltfläche "Speichern";
14. in dem sich öffnenden Fenster Klick auf "Ja";
15. Funktionstaste F5 auf der PC-Tastatur drücken;
16. wenn man nun auf das Gruppenfoto klickt und den Mauszeiger auf den Kopf der eben bearbeiteten Person hält, wird der Name der Person angezeigt.
Klickt man nun mit der linken Maustaste auf diese Stelle, wird zu den Daten dieser Person verzweigt.
17. Für weitere Personen verfährt man wie unter den Ziffern 8 bis 15 beschrieben.
18. Hinweis:
Bei teilverdeckten Köpfen muß man den Markierungskreis entsprechend versetzen; die Kreismarkierungen zweier Personen sollten sich nicht überdecken.
19. Man kann in dem Bereich "Verweis-sensitive Graphik (Image Map):" über dem Bild (siehe zu Ziff. 12) vorsichtig Änderungen oder Ergänzungen vornehmen - z.B. soll nicht nur der Mädchenname einer Frau, sondern auch ihr Ehename erscheinen. Dann ergänzt man z.B. "Erna Schulze" so: "Erna Meier, geb. Schulze". An dem übrigen Code darf keinesfalls etwas verändert werden!

Ist eine Person nicht in der Datenbank enthalten, weil es sich z.B. um einen Klassenkameraden oder überhaupt um eine fremde Person handelt, könnte man diese nicht verweissensitiv behandeln.
Dazu kann man sich eines Tricks bedienen:
Man erstellt einen Personendatensatz für "unbekannt". Es wird ja für diesen Datensatz eine "Personen-Kennungs-Nr" erstellt.
Nun verfährt man für eine unbekannte bzw. nicht in der DB enthaltene Person gemäß Ziff. 8 bis 15.
Dann ändert man den Eintrag wie unter Ziff. 19 beschrieben.
Schon erscheint später beim Zeigen mit dem Mauszeiger auf den Kopf des Klassenkameraden dessen Name.
Bei Klick mit der linken Maustaste wird allerdings zu dem Datensatz "unbekannt" verzweigt, der ja leer ist.

Viele Güße
salsa
willyman
Mitglied
Beiträge: 42
Registriert: 14.07.2007 21:58
Wohnort: München
Kontaktdaten:

RE: Verweissensitive Grafiken (Image-Maps)

Beitrag von willyman »

Und wenn man den Parameter href auch noch bedient, dann kann durch Klicken auf die Person (bei mir durch ein Polygon umschrieben) ein individuelles Foto hochpoppen lassen. Siehe mein Beispiel: http://reunion.tafel-family-association ... ge_27.html
Zuletzt geändert von willyman am 14.01.2008 18:18, insgesamt 1-mal geändert.
salsa
VIP Mitglied
Beiträge: 232
Registriert: 20.06.2007 21:24

Re: RE: Verweissensitive Grafiken (Image-Maps)

Beitrag von salsa »

willyman hat geschrieben:Und wenn man den Parameter href auch noch bedient, dann kann durch Klicken auf die Person (bei mir durch ein Polygon umschrieben) ein individuelles Foto hochpoppen lassen. Siehe mein Beispiel: http://tfa.macdisk.de/reunion/pages/page_27.html
Hallo Willymann,
ich habe mir deine Seite mal angesehen.
Gratulation. Ist wunderbest gestaltet. Respekt.
Das mit den Links zu den größeren Bildern finde ich eine gute Idee.
Besonders dann, wenn man keine entsprechenden Datensätze in der Ahnenliste hat (bei Klassenfotos usw).
Allerdings würde mich interessieren, ob du das auch mit der in TNG integrierten Image-Map-Funktion realisiert hast.
Ich denke eher nicht, da TNG nur mit Kreis oder Quadrat arbeiten kann - du aber ein Polygon benutzt hast.
Ich weiß, dass man das mit der Image-Map-Funktion in HTML realisieren kann. Habe ich jedenfalls früher mal so gemacht.
Naja - und dein HTML-Code sieht sich auch so an :-)
Jedenfalls hast du den shape="poly"-Tag benutzt.

Jetzt würde mich noch interessieren, ob Du das zunächst alles in HTML realisiert und dann den gesamten HTML-Code in das entsprechende TNG-Code-Feld hineinkopiert hast?

Beste Grüße
salsa
willyman
Mitglied
Beiträge: 42
Registriert: 14.07.2007 21:58
Wohnort: München
Kontaktdaten:

RE: Re: RE: Verweissensitive Grafiken (Image-Maps)

Beitrag von willyman »

Ich habe alle Bilder von unseren zweijährig stattfindenden Familientreffen dergestalt nachgearbeitet, daß beim Darüberfahren mit der Maus über eine Person deren Name dargestellt wird (wie bei Dir). Natürlich habe ich dafür nicht den Html-Code selbst geschrieben, sondern ein Programm namens HtmlMapMaker benutzt, womit man die jeweiligen Objekte mittels der üblichen geometrischen Figuren und auch einem Polygon umschreiben kann. Der generierte Code wird dann in das jeweilige aktuelle Html-File eingesetzt. So präsentiere ich mit dieser Technik auch meine Urlaubsbilder. Man muss nur auf den entsprechenden rotmarkierten Ort klicken: http://manchot.name/Home/reiseimp.htm
Antworten