PDA

Vollständige Version anzeigen : Web-Design Teamfoto Tagging für Webseite!!!


zangge
14.11.13, 20:29
Hallo liebe CS Freunde!

Ich hoffe ich bin hier richtig bez. ihr könnt mir ein paar Lösungsansätze verraten!
So jetzt werde ich euch mal mein Problem bestmöglich darstellen....

1) Es wurde ein Teamfoto von unserer Sportmannschaft gemacht - soweit so gut!

2) Jetzt möchte ich das Foto online stellen und jeder Person einen Link? verpassen damit man auf detaillierte Personenbeschreibungen oder ein Porträtfoto kommt - jetzt kommt der schwierige Part!
Ist so etwas möglich???

TESTBILD
http://www.thinglink.com/scene/456787029519237120

Ich habe schon Tagelang das Inet durchforstet und bin auf einen Dienst gestoßen der meinen Vorstellungen im Grunde schon recht nahe kommt aber ich möchte das nicht extern auslagern sonder direkt auf meiner Webseite einbauen - ohne html code (das dieser von Joomla nicht unterstützt wird)

uwe367
17.11.13, 12:39
Das ist durchaus machbar, aber nicht ohne HTML Code. Ein Link besteht IMMER aus Code der in der Regel, vereinfacht, so aussieht:
<a href="http://www.example.com">Mein Link</a>
Um verschiedene Personen in einem Foto zu verlinken mußt du mit sogenannten Hotspots (http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm) arbeiten. Anders wird dein Vorhaben nicht zu realisieren sein.
Das sollte aber von Joomla unterstützt werden. Ich jedenfalls kenne kein CMS welches eigenen HTML Code nicht unterstützt bzw. zuläßt. Ansonsten einfach mal im Joomla Supportforum nachfragen.

heikehk
18.11.13, 11:26
Da kann ich Uwe nur zustimmen.
Um HTML und Hotsopts wirst Du nicht herum kommen.
Gruß
Heike

Gotcha
18.11.13, 17:22
Hotspots? Okay, kann man natürlich machen, wäre mir persönlich aber zu oldskool. Für so etwas gibt es doch etliche Framework-Plugins, die den Job besser und bequemer erledigen. Für jQuery kenne ich z.B. das hier:
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Creating-Interactive-Descriptions-For-Images-PicTip/
Keine Ahnung, ob Joomla von Haus aus immer noch mit Mootools ankommt, aber dafür gibt es sicher ähnliche Plugins. Und zur Not kann man ja beide Frameworks einbinden bzw. Mootools ganz abschalten, wenn es nicht benötigt wird... :emo_biggr

tefascos
18.11.13, 23:01
Ist problemlos möglich. Einfach um die Links einen div packen. Ein Div mit dem Bild als Hintergrund und dann alles innerhalb von diesem div platzieren. So machen wir das mit ganz vielen Sachen und es funktioniert auch sehr gut.

Gotcha
18.11.13, 23:41
Ja, oder so, wenn es wirklich nur um einen Link geht. Völlig easy...
Beispiel: http://jsfiddle.net/f9t5g/

heikehk
19.11.13, 00:35
Letztendlich bleibt es dabei, dass ohne html und CSS nichts machbar ist...
Und die stelle des Bildes, wo der link sitzen soll, muss man definieren...
Gruß
Heike

Gotcha
19.11.13, 08:25
Naja, das es nicht ohne HTML und CSS geht, dürfte wohl klar sein, Heike... :emo_biggr
Und die Definition der Platzierung würde ich - weil ich bequem bin - ebenfalls über ein kleines jQuery-Script per Mausklick machen:

http://jsfiddle.net/bLXf8/

Wenn man dann alle Links per Klick platziert hat, kann man z.B. im Firefox per Inspektor oder Firebug den so erzeugten HTML-Code kopieren und weiterverarbeiten... :ok:

heikehk
19.11.13, 08:50
Ich seh schon. Ich bin Old Fashion.
Wenn ich mal zeit hab, Les ich mich mal rein, wobei ich icht glaube, dass Java & jquery jemals enge Freunde von mir werden ;)

Gotcha
19.11.13, 09:32
Ich weiss gar nicht, wie man ohne Javascript und jQuery leben kann... :bleh:
Hier die Luxus-Ausgabe...

http://jsfiddle.net/zPw6H/

Da kann man die URL direkt eingeben, die Tags kann man wieder löschen und das HTML wird als Text ausgegeben... :emo_biggr

heikehk
19.11.13, 10:20
Das ist lieb ;)
Mal schauen, ob ich da mal irgendwann Lust bekomme. immerhin hab ich ein InDesign-Skript geschrieben, dass auch funktioniert und einen HTML 5 Kurs im Bootcamp besucht, bei dem ich sogar nach Vorgaben ein Javascript zur Seitenanzeige geschrieben habe, aber irgendwie sind Java und ich, egal in welcher form auch immer, keine Freunde :bleh:

Gotcha
19.11.13, 10:58
Naja, aller Anfang ist schwer, aber wenn man mal ein Grundwissen besitzt, geht es dann schon recht gut. Mit JS habe ich mir die Basis geschaffen und in jQuery bin ich inzwischen schon relativ fit und möchte das auch nicht mehr missen. Man kann damit einfach geile Sachen machen... :emo_biggr
Ich kenne auch Leute, die direkt mit jQuery eingestiegen sind, die haben allerdings hin und wieder ein Problem, weil man dann doch ab und zu auf das reine JS zurückgreifen muss.
Es gibt Bootcamps für HTML5? Wow...
Steht da dann einer mit der Peitsche hinter Dir und sorgt dafür, das Du die Tags auch ordentlich und korrekt schreibst?... :emo_biggr

heikehk
19.11.13, 14:19
Ne da steht ein Erzählbär vor Dir und erklärt total nett, was zu tun ist. Allerdings Hardcore 4 Stunden lang am Stück mit kleiner Kaffeepause ;)

Gotcha
19.11.13, 14:56
Was kostet denn der Spass? Nicht das ich jemals Geld für so etwas ausgeben würde, aber schaden kann es nicht, wenn man weiss, was da so verlangt wird...

heikehk
19.11.13, 17:19
Oh, da müsste ich nachschauen, Billig war es ncht, aber es hat immens viel Spaß gemacht. Wer hat schon die Chance mal ein ganzes Wochenende hardcore Photoshop, Illustrator HTML & Co und InDesign von Profis wie Uli Staiger, Monika Gause und Stefan Kröner zu lernen...
Das Waren dei Tage im Hotel mit zwei Kursen pro Tag + Event ...
Gibts das nächste Jahr wieder und wenn alles klappt bin ich da auch wieder:
http://www.publishing-bootcamp.de/

Gotcha
19.11.13, 17:37
Boah, ich glaub`, ich steige um und gebe auch Seminare... :whistling
Nee, also dafür bin ich ja echt zu geizig und zu sehr Autodidakt. Ausserdem wäre, wenn überhaupt, nur PS für mich interessant. InDesign brauche ich nicht, Illustrator habe ich nicht und in HTML etc. bin ich fit...
Bringt das wenigstens etwas? Klingt mir doch sehr gebündelt, das Paket...
Und das findet nicht mal in der Südsee statt... :bleh:

heikehk
19.11.13, 18:55
Das war in diesem sommer as absolute Hammer. Da ich mit allem arbeite wunderbar und ich bin endlich mal im realen Leben unter die Leute gekommen, die auch mit allem arbeiten. Außerdem wollte ich schon immer mal Monika Gause live erleben und die anderen Teacher waren auch klasse. Hab viel von dort mitgenommen und fand das Ganze Paket absolut Preis/Leistungsgerecht.
Wenn ich überlege, was ich für Fachbücher etc. aus gebe, war das völlig OK...

Gotcha
19.11.13, 19:00
Na denn. Hauptsache, es macht Dir Spass... :-)
Für Fachbücher gebe ich inzwischen gar nichts mehr aus. Ich hab` irgendwann für mich festgestellt, das mir das alles meist zu theoretisch ist. Am liebsten schau` ich mir deshalb Videos an oder, wenn`s um`s Scripten geht, den Code von anderen Leuten...

heikehk
19.11.13, 19:02
Klar, aber manchmal muss man auch Gleichgesinnte im echten Leben treffen ;)

Gotcha
19.11.13, 19:12
Naja, beruflich bedingt treffe ich ja immer mal wieder Leute in Agenturen, weil ich ja zeitweise dort zu tun habe. Hast Du noch nie für Agenturen vor Ort gearbeitet?

heikehk
19.11.13, 19:42
Nein, ich bin ein armer kleiner Einzelkämpfer im Home Office und treffe wenn, dann nur Kunden ;)

zangge
19.11.13, 21:44
Danke Danke für eure tollen Ideen! Habe es jetzt umgesetzt und bin dabei auf das nächste Problem gestossen!

Kann mir jemand sagen wie ich den html code verändere damit sich das bild immer an die jeweilige bildschirmgröße anpasst!

anbei der link:
http://zangge.members.cablelink.at

uwe367
19.11.13, 21:44
Sicher gibt es schöne jQuery Scripte um sowas zu realisieren. Jedoch sollte der TE sich erstmal die wichitgsten Grundkenntnisse in HTML und CSS aneignen denn aus seiner Fragestellung heraus resultiere ich, daß er keinerlei oder nur sehr unzureichende Kenntnisse hat denn was nutzt es ihm wenn er sich mit einem jQuery Script beschäftigt, aber die Funktionsweisen und die Zusammenhänge und das Zusammenspiel von HTML und CSS nicht kennt. Das Script alleine nutzt nicht viel wenn ich nicht weiß wie ich Formatierungen vornehmen kann oder die Klassen im HTML Code aufrufe.

zangge
19.11.13, 21:47
ok danke aber ich brauche normal diese HTML sachen nicht darum habe ich mich an Profis wie euch gewendet ;)

tefascos
19.11.13, 22:24
Ey! jQuery war nicht gefragt. Aber es ist schon echt geil, was man mittlerweile damit alles machen kann. Wenn ich an die reinen JS Zeiten denke und an jQuery - Da liegen WELTEN zwischen, weil man einfach so unglaublich viel Zeit spart und weniger tippen muss.

Gotcha
19.11.13, 23:22
Natürlich war jQuery nicht gefragt. Aber mit dem von mir vorgestellten Script kann man das dafür nötige HTML schnell und bequem erstellen. Im Prinzip muss man ja nur das Hintergrundbild austauschen und die Breiten- und Höhenangabe anpassen. Und evtl. noch die die Grösse der Spots. Das Script selbst muss man gar nicht unbedingt verstehen...
Allerdings setze ich natürlich ein gewisses HTML/CSS-Grundwissen voraus. Falls das nicht vorhanden ist, hilft aber auch ein einfacher HTML-Hotspot nichts mehr - das wird nämlich dann ebenfalls nicht verstanden...
zangge hat zwar jetzt eine "Lösung" gefunden, aber wie sein Post #22 zeigt, bewirkt das nicht wirklich das, was er eigentlich möchte...

@zangge:
Leider ist eine Anpassung an eine beliebige Bildschirmgrösse mit dem von Dir erstellten HTML-Code nur recht mühsam umsetzbar, da Du ja absolute Werte - also Pixel - benutzt. Theoretisch könnte man diese px-Werte in prozentuale Werte umrechnen...

Gotcha
20.11.13, 01:07
@zangge:
Wenn Du mir Dein Bild schickst bzw. irgendwo hochlädst, kann ich mal versuchen, das Tagging in Deinem Sinne umzusetzen. Ich hab` nämlich mal spasshalber mein Script so umgeschrieben, das prozentuale Werte ausgegeben werden...