Animation mit Hyperlink

[alfredo99]

Hallo,
nachdem ich nun alles durchsucht habe und keine Antwort auf mein Problem gefunden habe, versuche ich es nun über diesen Weg.
Ich arbeite mit Photoshop CS5 und möchte gerne eine Animation erstellen, wobei einzelne Elemente mit einem Link hinterlegt sein sollen. Das Ganze ist ein großes, drehendes Zahnrad um welches sich mehrere kleine Zahnräder drehen. Die kleinen Räder sollen einzelne Abteilungen/Bereiche darstellen und diese sollte man auch anklicken können um auf den Inhalt der Abteilung zu gelangen. Die Animation sollte ich hinbekommen, aber die einzelnen Elemente mit einem Link zu versehen, da komme ich nicht weiter.
Wenn mir jemand weiterhelfen könnte, wäre ich sehr dankbar.

Vielen Dank im Voraus !

Alfredo99

 

[lipsum media]

Das sollte mit Image-Maps funktionieren... Sollte es einen besseren bzw. einfacheren Weg geben, lasse ich mich gern eines Besseren belehren

 

[alfredo99]

Hallo Wheelie86,

erst einmal vielen Dank für Deine Antwort.
Kann ich also die fertige Animation als Image Map erstellen ?
Geht das auch mit Photoshop CS 5 ?

Vielen Dank !

Alfredo99

 

[cuba_g1]

Hallo alfredo99!

Nein das geht nicht mit Photoshop. Image map ist ein HTML Element "<map>.


edit
Obwohl... man könnte die Grafiken mit PS "Slicen" ist aber auch nicht zu empfehlen.

 

[alfredo99]

hallo Cuba_g1,
sorry, dass ich nochmals frage, aber kann ich dann die Animation mit PS erstellen, als GIF-Datei abspeichern und mit Image Map weiter bearbeiten ?

Vielen Dank für Deine Unterstützung.

Gruß,

Alfredo99

 

[cuba_g1]

Klar das geht. Aber mit Image Map bearbeitest du nichts. Du setzt mit image map Verweise auf eine bestimmte stelle des Bildes oder in deinem Fall eines .gif's

Ich denke das hilft dir weiter:
HTML/Multimedia und Grafiken/verweissensitive Grafiken

 

[alfredo99]

Hallo Cuba_g1,

Du hast sicher bemerkt, daß ich nicht der absolute Profi bin, aber seit ich meine erste Website mit Joomla erstellt habe, bin ich auf den Geschmack gekommen und mir macht das Ganze unheimlich Spaß. Aber mir fehlt leider noch viel Wissen & Knowhow, deshalb bin ich froh, daß es solche Plattformen wie hier gibt. Deshalb entschuldige bitte auch meine etwas laienhafte Fragen.
Trotzdem vielen Dank, auch an wheelie86, für Eure Hilfe.

Viele Grüße,

Alfredo99

 

[cuba_g1]

Du musst dich nicht entschuldigen. Dafür ist das Forum ja da.
Ich bin auch eher ein Laie was das Thema Webdesign angeht.

Hat es dir denn etwas gebracht?


Wenn du Interesse und Spaß daran hast, gibt es hier eine Menge Tutorials in dem Bereich.
Vielleicht ist das hier auch was für dich.

 

[alfredo99]

Hallo Cuba_g1,

vielen Dank für den Tipp, ich werde mir dieses Paket zulegen.

Ich habe gestern Abend eine einfache Animation mit PS erstellt und dann mit "Fast Image Map" einen Verweis auf das Bild gelegt, hat prima funktioniert. Jetzt werde ich die gewünschte Animation mit den vielen Zahnrädern erstellen, muss ich auch erst noch schauen wie ich das Ganze umsetze, aber das bekomme ich schon hin.

Nochmals vielen Dank für Deine Hilfe, ich werde mich bestimmt noch öfters hier melden.

Viele Grüße,

Alfredo99

 

[Aelfry]

aber seit ich meine erste Website mit Joomla erstellt habe, bin ich auf den Geschmack gekommen und mir macht das Ganze unheimlich Spaß.

Ich weiß ja nicht was genau du beim Erstellen gemacht hast, aber wenn du häufiger solche interaktiven Elemente erstellen möchtest (was wie du festgestellt hast mit PS alleine nicht geht), solltest du dich unbedingt mit den Grundlagen in Sachen HTML, CSS und JavaScript befassen.

Dann müsstest du sowas nicht mit Image Maps zusammen schustern, sondern würdest es "richtig" programmieren. Ohne deine Animation zu kennen, bin ich trotzdem ziemlich sicher, dass es sich auch mit Javascript / CSS3 umsetzen ließe.

Dadurch wärst du flexibler und hättest vor allem eine deutlich geringere Ladezeit.
Im Moment wechselst du ja ständig GIFs die vermutlich mehre MBs groß sind, was sich sehr negativ auf die Performance auswirkt.
Bei meinem beschriebenen Weg würdest mit PS nur statische Bilder machen und den Rest programmieren.

 

[patrick_l]

Ohne deine Animation zu kennen, bin ich trotzdem ziemlich sicher, dass es sich auch mit Javascript / CSS3 umsetzen ließe.

Mich dem anschließe. Ergänzend zu JavaScript und CSS3 sei auch noch SVG als Grafikformat erwähnt. Gerade in der Kombination kann man knack scharfe Animationen zaubern, die Appetit auf mehr machen.

Bei meinem beschriebenen Weg würdest mit PS nur statische Bilder machen und den Rest programmieren.

That's right! Je nach Inhalt der Bilder/Grafiken auch SVG (Vektor) in frage kommen kann.

Hier noch zwei Links zu SVG Animation:
- CSS-Tricks » A Guide to SVg Animation
- Mediaevent » SVG Animate


Liebe Grüße, Patrick

 

[alfredo99]

Vielen Dank für den Hinweis und die fachliche Aufklärung.
Mir ist schon klar, dass meine Vorgehensweise nicht unbedingt der eines Fachmanns entspricht, aber da ich bis vor ca. 1 Jahr noch nicht wusste, wie man eine Internetseite erstellt und dies mittlerweile sehr ansehnlich umsetzen kann, werde ich mir so noch behelfen müssen.
Ihr habt sicherlich Recht und ich habe mir ja auch schon Lernmaterial gekauft, ich muss mich aber noch intensiver mit dieser Materie beschäftigen, bevor ich die Dinge so umsetzen kann, wie Ihr es hier angesprochen habt. Außerdem gehöre ich hier in dieser Gemeinschaft wahrscheinlich schon zu der etwas älteren Generation, aber da ich festgestellt habe, dass man im Webdesign sehr viele kreative Dinge umsetzen kann, werde ich dieses "Hobby" weiter intensivieren und so auch meine Gehirnzellen am laufen halten.
Trotzdem werde ich Euren Ratschlag befolgen und mich mit der Materie eindringlicher beschäftigen.

Vielen Dank nochmals !

Viele Grüße,
Alfredo99