HTML5 Verlinkung

grOOvekill@

Legend
Vienna Badass

Registered: Nov 2001
Location: @home
Posts: 2306

15.04.2016 - 11:04

S'Gott,

Frage: als ich vor einigen Jahren noch munter Flashbanner rausgeknallt habe, musste ich die immer mit einem clicktag verlinken, damit die Adserver da mittracken können. Das ging mit Flash anhand getURL.

Nun, Flash ist endlich tot.

Adobe hat Flash nun in Animate umgebaut und das Tool ermöglicht es, HTML5 Banner zu basteln. Geile Sache. Ich hab mir das Teil also mal installiert und mich ein wenig rumgespielt. Was ich nur ums Verrecken nicht herausbekommen habe ist, wie verlinkt man auf eine externe Seite? Also das, was früher mittels getURL erledigt wurde.

Mache ich das, indem ich einen Movieclip mit getURL versehe? (vermutlich nicht)

Kommt das ins exportierte html File hinein? Oder wird das im Javascript-File, das mitexportiert wird, eingebaut?

Würde mich echt interessieren, wie das funzt. Mag mich da ein wenig einarbeiten, aber scheitere schon bei einer simplen Verlinkung.

Wäre dankbar für jeden Hinweis!

tia

-=Willi=-

The Emperor protects

Registered: Aug 2003
Location: ~
Posts: 1624

15.04.2016 - 11:32

Pff ich klick voller Freude auf den Thread weil ich vielleicht helfen könnte und dann gehts gar nicht um HTML sondern Adobe Animate

. Was ist ein Clicktag?

XeroXs

Vereinsmitglied
doh

Registered: Nov 2000
Location: Lieboch
Posts: 10345

15.04.2016 - 11:34

Hilft das?

Adobe Edge Animate Lesson #23 - Open Link

In this quick how to lesson. We are going to create a link on Adobe Edge Animate. Thank You Wayne Barron Dark Effects Production http://www.darkeffects.net h...

Beim Abspielen dieses Videos werden Daten an YouTube übermittelt. Durch einen Klick auf das Video wird es automatisch abgespielt und du akzeptierst damit die Datenschutzerklärung von YouTube bzw. Google.

grOOvekill@

Legend
Vienna Badass

Registered: Nov 2001
Location: @home
Posts: 2306

15.04.2016 - 11:34

Nein, nein, es geht schon um HTML5, bei ich Animate ja nur verwende, um die Animation zu basteln. Das Resultat ist ja dann eh ein ganzes Set an HTML5 Files. Die Frage ist einfach nur, wie und WO ich in HTML 5 verlinke.

Ich kann ja durchaus auch per Texteditor Änderungen am HTML File vornehmen. Animate verwende ich lediglich, um die ANimationen timelinebasiert zu erstellen.

Ein clicktag ist einfach nur eine Variable, damit Adserver da irgendwelche Klick-Statistiken erstellen können. die Variable kann im Grunde auch eine url sein.

Bearbeitet von grOOvekill@ am 15.04.2016, 11:36

grOOvekill@

Legend
Vienna Badass

Registered: Nov 2001
Location: @home
Posts: 2306

15.04.2016 - 11:35

Zitat von XeroXs
Hilft das?
Adobe Edge Animate Lesson #23 - Open Link

In this quick how to lesson. We are going to create a link on Adobe Edge Animate. Thank You Wayne Barron Dark Effects Production http://www.darkeffects.net h...

Beim Abspielen dieses Videos werden Daten an YouTube übermittelt. Durch einen Klick auf das Video wird es automatisch abgespielt und du akzeptierst damit die Datenschutzerklärung von YouTube bzw. Google.

Leider nicht. Da geht's um Edge Animate, das vergangenes Jahr eingestellt wurde. Dürfte im gleichen Atemzug passiert sein, wie die Änderung von Flash zu Animate. Ist nicht das gleiche Tool.

XeroXs

Vereinsmitglied
doh

Registered: Nov 2000
Location: Lieboch
Posts: 10345

15.04.2016 - 11:37

Zitat von grOOvekill@
Leider nicht. Da geht's um Edge Animate, das vergangenes Jahr eingestellt wurde. Dürfte im gleichen Atemzug passiert sein, wie die Änderung von Flash zu Animate. Ist nicht das gleiche Tool.

Doh :/

-=Willi=-

The Emperor protects

Registered: Aug 2003
Location: ~
Posts: 1624

15.04.2016 - 11:40

Naja wie macht man einen Link in HTMl...mit dem klassischen <a href="https://google.com"></a> halt, oder kann ich dir nicht ganz folgen

?

grOOvekill@

Legend
Vienna Badass

Registered: Nov 2001
Location: @home
Posts: 2306

15.04.2016 - 11:51

Zitat von -=Willi=-
Naja wie macht man einen Link in HTMl...mit dem klassischen <a href="https://google.com"></a> halt, oder kann ich dir nicht ganz folgen ?

Naja, wie ein einfacher Link funktioniert, das weiß ich. Die Frage lautete, wie man zb. bei einem Banner, der ja als ganzes verlinkt ist, einen link einfügt und wo.

Wie gesagt, bei Flash hat man da immer an oberster Ebene einen Movieclip als invisible Layer verwendet und da dann den getURL Code draufgeknallt. Das geht ja aber jetzt nicht mehr. Deswegen die Frage, an welcher Position ich die Verlinkung angebe. Und ob diese in HTML Form oder gar Javascript Form stattfindet.

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

15.04.2016 - 11:54

Code: HTML

<a href="…">
  <div id="banner">…</div>
</a>

Oder verstehe ich die Frage auch falsch?

AdRy

Auferstanden

Registered: Oct 2002
Location: Wien
Posts: 5239

15.04.2016 - 11:54

Du packst einfach das ganze HTML canvas tag/element (oder was auch immer das adobe animate generiert) in den <a> tag

Bearbeitet von AdRy am 15.04.2016, 11:54

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

15.04.2016 - 11:55

Ah, vielleicht denkst du, das wäre invalid. Ist es aber unter HTML5 nicht (unter HTML4 schon).

XeroXs

Vereinsmitglied
doh

Registered: Nov 2000
Location: Lieboch
Posts: 10345

15.04.2016 - 11:56

Schau dir das mal an

How to create and publish an HTML5 Canvas document | Adobe Animate CC tutorials

Learn how to create and publish an HTML5 canvas document.

Link: helpx.adobe.com

Da werden auf mehrere Objekte immer wieder mal Links geknallt

Das würde ja dann deiner Anwendung entsprechen und genauso funktionieren

Bearbeitet von XeroXs am 15.04.2016, 11:56

grOOvekill@

Legend
Vienna Badass

Registered: Nov 2001
Location: @home
Posts: 2306

15.04.2016 - 13:09

Danke für euren Input, hat mich scheinbar auf die richtige Fährte gebracht!

Ich hab' das jetzt mal so gemacht und es scheint zu funktionieren:

Code: HTML

<div onclick="window.open('http://www.google.com/', '_blank')" style="cursor: pointer">
<canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</div>

Neues Fenster geht, auf und Google wird angezeigt! :-)

Mal schauen, ob ich das mit einer clickTAG Variante auf irgendeinem Adserver testen kann.

Daeda

Here to stay

Registered: Aug 2007
Location: Graz
Posts: 1566

15.04.2016 - 13:21

Zitat von grOOvekill@
Danke für euren Input, hat mich scheinbar auf die richtige Fährte gebracht!

Ich hab' das jetzt mal so gemacht und es scheint zu funktionieren:
Code: HTML
<div onclick="window.open('http://www.google.com/', '_blank')" style="cursor: pointer">
<canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</div>
Neues Fenster geht, auf und Google wird angezeigt! :-)

Mal schauen, ob ich das mit einer clickTAG Variante auf irgendeinem Adserver testen kann.

Solang das extra div keine weitere, hier nicht ersichtliche Funktion erfüllt, kannst du ihn auch weglassen und die onclick und style Attribute gleich der canvas geben

Hab mir gerade einen Banner von meinem Kollegen angesehen, der ihn auch mit Animate erstellt hat. Er hat offenbar auch im Nachhinein einfach händisch ein <a> um die canvas gebaut:

Code: HTML

<a href="undefined" id="IAB_clicktag" target="“_blank“"> 
  <canvas id="canvas" width="728" height="90" style="background-color: rgb(255, 255, 255);">
</a>

Bearbeitet von Daeda am 15.04.2016, 13:21

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

15.04.2016 - 13:34

Zitat von grOOvekill@
Danke für euren Input, hat mich scheinbar auf die richtige Fährte gebracht!

Ich hab' das jetzt mal so gemacht und es scheint zu funktionieren:
Code: HTML
<div onclick="window.open('http://www.google.com/', '_blank')" style="cursor: pointer">
<canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</div>
Neues Fenster geht, auf und Google wird angezeigt! :-)

Mal schauen, ob ich das mit einer clickTAG Variante auf irgendeinem Adserver testen kann.

Warum so kompliziert und nicht einfach

Code: HTML

<a href="http://www.google.com/" target="_blank">
    <canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</a>

?

Bearbeitet von Spikx am 15.04.2016, 13:34

grOOvekill@ Legend Vienna Badass Registered: Nov 2001 Location: @home Posts: 2306	15.04.2016 - 11:04 S'Gott, Frage: als ich vor einigen Jahren noch munter Flashbanner rausgeknallt habe, musste ich die immer mit einem clicktag verlinken, damit die Adserver da mittracken können. Das ging mit Flash anhand getURL. Nun, Flash ist endlich tot. Adobe hat Flash nun in Animate umgebaut und das Tool ermöglicht es, HTML5 Banner zu basteln. Geile Sache. Ich hab mir das Teil also mal installiert und mich ein wenig rumgespielt. Was ich nur ums Verrecken nicht herausbekommen habe ist, wie verlinkt man auf eine externe Seite? Also das, was früher mittels getURL erledigt wurde. Mache ich das, indem ich einen Movieclip mit getURL versehe? (vermutlich nicht) Kommt das ins exportierte html File hinein? Oder wird das im Javascript-File, das mitexportiert wird, eingebaut? Würde mich echt interessieren, wie das funzt. Mag mich da ein wenig einarbeiten, aber scheitere schon bei einer simplen Verlinkung. Wäre dankbar für jeden Hinweis! tia
-=Willi=- The Emperor protects Registered: Aug 2003 Location: ~ Posts: 1624	15.04.2016 - 11:32 Pff ich klick voller Freude auf den Thread weil ich vielleicht helfen könnte und dann gehts gar nicht um HTML sondern Adobe Animate . Was ist ein Clicktag?
XeroXs Vereinsmitglied doh Registered: Nov 2000 Location: Lieboch Posts: 10345	15.04.2016 - 11:34 Hilft das? Adobe Edge Animate Lesson #23 - Open Link In this quick how to lesson. We are going to create a link on Adobe Edge Animate. Thank You Wayne Barron Dark Effects Production http://www.darkeffects.net h... Beim Abspielen dieses Videos werden Daten an YouTube übermittelt. Durch einen Klick auf das Video wird es automatisch abgespielt und du akzeptierst damit die Datenschutzerklärung von YouTube bzw. Google.
grOOvekill@ Legend Vienna Badass Registered: Nov 2001 Location: @home Posts: 2306	15.04.2016 - 11:34 Nein, nein, es geht schon um HTML5, bei ich Animate ja nur verwende, um die Animation zu basteln. Das Resultat ist ja dann eh ein ganzes Set an HTML5 Files. Die Frage ist einfach nur, wie und WO ich in HTML 5 verlinke. Ich kann ja durchaus auch per Texteditor Änderungen am HTML File vornehmen. Animate verwende ich lediglich, um die ANimationen timelinebasiert zu erstellen. Ein clicktag ist einfach nur eine Variable, damit Adserver da irgendwelche Klick-Statistiken erstellen können. die Variable kann im Grunde auch eine url sein. Bearbeitet von grOOvekill@ am 15.04.2016, 11:36
grOOvekill@ Legend Vienna Badass Registered: Nov 2001 Location: @home Posts: 2306	15.04.2016 - 11:35 Zitat von XeroXs Hilft das? Adobe Edge Animate Lesson #23 - Open Link In this quick how to lesson. We are going to create a link on Adobe Edge Animate. Thank You Wayne Barron Dark Effects Production http://www.darkeffects.net h... Beim Abspielen dieses Videos werden Daten an YouTube übermittelt. Durch einen Klick auf das Video wird es automatisch abgespielt und du akzeptierst damit die Datenschutzerklärung von YouTube bzw. Google. Leider nicht. Da geht's um Edge Animate, das vergangenes Jahr eingestellt wurde. Dürfte im gleichen Atemzug passiert sein, wie die Änderung von Flash zu Animate. Ist nicht das gleiche Tool.
XeroXs Vereinsmitglied doh Registered: Nov 2000 Location: Lieboch Posts: 10345	15.04.2016 - 11:37 Zitat von grOOvekill@ Leider nicht. Da geht's um Edge Animate, das vergangenes Jahr eingestellt wurde. Dürfte im gleichen Atemzug passiert sein, wie die Änderung von Flash zu Animate. Ist nicht das gleiche Tool. Doh :/
-=Willi=- The Emperor protects Registered: Aug 2003 Location: ~ Posts: 1624	15.04.2016 - 11:40 Naja wie macht man einen Link in HTMl...mit dem klassischen <a href="https://google.com"></a> halt, oder kann ich dir nicht ganz folgen ?
grOOvekill@ Legend Vienna Badass Registered: Nov 2001 Location: @home Posts: 2306	15.04.2016 - 11:51 Zitat von -=Willi=- Naja wie macht man einen Link in HTMl...mit dem klassischen <a href="https://google.com"></a> halt, oder kann ich dir nicht ganz folgen ? Naja, wie ein einfacher Link funktioniert, das weiß ich. Die Frage lautete, wie man zb. bei einem Banner, der ja als ganzes verlinkt ist, einen link einfügt und wo. Wie gesagt, bei Flash hat man da immer an oberster Ebene einen Movieclip als invisible Layer verwendet und da dann den getURL Code draufgeknallt. Das geht ja aber jetzt nicht mehr. Deswegen die Frage, an welcher Position ich die Verlinkung angebe. Und ob diese in HTML Form oder gar Javascript Form stattfindet.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	15.04.2016 - 11:54 Code: HTML `<a href="…"> <div id="banner">…</div> </a>` Oder verstehe ich die Frage auch falsch?
AdRy Auferstanden Registered: Oct 2002 Location: Wien Posts: 5239	15.04.2016 - 11:54 Du packst einfach das ganze HTML canvas tag/element (oder was auch immer das adobe animate generiert) in den <a> tag Bearbeitet von AdRy am 15.04.2016, 11:54
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	15.04.2016 - 11:55 Ah, vielleicht denkst du, das wäre invalid. Ist es aber unter HTML5 nicht (unter HTML4 schon).
XeroXs Vereinsmitglied doh Registered: Nov 2000 Location: Lieboch Posts: 10345	15.04.2016 - 11:56 Schau dir das mal an How to create and publish an HTML5 Canvas document \| Adobe Animate CC tutorials Learn how to create and publish an HTML5 canvas document. Link: helpx.adobe.com Da werden auf mehrere Objekte immer wieder mal Links geknallt Das würde ja dann deiner Anwendung entsprechen und genauso funktionieren Bearbeitet von XeroXs am 15.04.2016, 11:56
grOOvekill@ Legend Vienna Badass Registered: Nov 2001 Location: @home Posts: 2306	15.04.2016 - 13:09 Danke für euren Input, hat mich scheinbar auf die richtige Fährte gebracht! Ich hab' das jetzt mal so gemacht und es scheint zu funktionieren: Code: HTML `<div onclick="window.open('http://www.google.com/', '_blank')" style="cursor: pointer"> <canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas> </div>` Neues Fenster geht, auf und Google wird angezeigt! :-) Mal schauen, ob ich das mit einer clickTAG Variante auf irgendeinem Adserver testen kann.
Daeda Here to stay Registered: Aug 2007 Location: Graz Posts: 1566	15.04.2016 - 13:21 Zitat von grOOvekill@ Danke für euren Input, hat mich scheinbar auf die richtige Fährte gebracht! Ich hab' das jetzt mal so gemacht und es scheint zu funktionieren: Code: HTML `<div onclick="window.open('http://www.google.com/', '_blank')" style="cursor: pointer"> <canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas> </div>` Neues Fenster geht, auf und Google wird angezeigt! :-) Mal schauen, ob ich das mit einer clickTAG Variante auf irgendeinem Adserver testen kann. Solang das extra div keine weitere, hier nicht ersichtliche Funktion erfüllt, kannst du ihn auch weglassen und die onclick und style Attribute gleich der canvas geben Hab mir gerade einen Banner von meinem Kollegen angesehen, der ihn auch mit Animate erstellt hat. Er hat offenbar auch im Nachhinein einfach händisch ein <a> um die canvas gebaut: Code: HTML `<a href="undefined" id="IAB_clicktag" target="“_blank“"> <canvas id="canvas" width="728" height="90" style="background-color: rgb(255, 255, 255);"> </a>` Bearbeitet von Daeda am 15.04.2016, 13:21
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	15.04.2016 - 13:34 Zitat von grOOvekill@ Danke für euren Input, hat mich scheinbar auf die richtige Fährte gebracht! Ich hab' das jetzt mal so gemacht und es scheint zu funktionieren: Code: HTML `<div onclick="window.open('http://www.google.com/', '_blank')" style="cursor: pointer"> <canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas> </div>` Neues Fenster geht, auf und Google wird angezeigt! :-) Mal schauen, ob ich das mit einer clickTAG Variante auf irgendeinem Adserver testen kann. Warum so kompliziert und nicht einfach Code: HTML `<a href="http://www.google.com/" target="_blank"> <canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas> </a>` ? Bearbeitet von Spikx am 15.04.2016, 13:34

HTML5 Verlinkung

Forum Index > Software > Coding Stuff

grOOvekill@

-=Willi=-

XeroXs

grOOvekill@

grOOvekill@

XeroXs

-=Willi=-

grOOvekill@

Spikx

AdRy

Spikx

XeroXs

grOOvekill@

Daeda

Spikx