Buttons mit Sound, hoover und animierte Bildwechsel - noch möglich?

[Jens_1701]

Ich bin traurig, dass Flash nicht mehr geht.

Ich hatte auf meiner Homepage mit dem Programm SwishMax tolle interaktive (Flash-)Animationen erstellt, die dann in meine Homepage eingebunden werden konnten.

Da hatte ich auch jede Menge animierter Buttons in meinem Wunschdesign erstellt.
Diese Buttons hatten gleichzeitig folgende Eigenschaften:

• Farbwechsel, wenn unberührt
• Hoover-Effekte (Farbwechsel bei Mouseover, und Klick)
• Sound bei Mouseover und anderer Sound bei Klick.
• Mit den Buttons andere Webseiten bzw. Unterseiten (URL’s) angesteuert.

War mit Swishmax ein Kinderspiel so etwas zu erstellen und in die Homepage zu implementieren - weil halt Flash.

Frage 1: Ist es überhaupt noch möglich solche Buttons mit den genannten Funktionen (in HTML5 o.ä.) zu erstellen, die in allen Browsern funktionieren?

Frage 2: Gibt es dafür WYSIWYG-Tools für den Laien, damit auch ich es hinbekomme?
Also freies designen mit eigenen Bildern/Grafiken.
(So stelle ich es mir vor: Nimm animiertes Gif oder Bild 1, 2 und drei, nimm Sounddatei 1 und 2 und bestimme die Ziel-URL => animierter Soundbutton, den ich beliebig in meine Homepage einbauen kann.)
Ich bin nämlich kein Programmierer und benutze daher nur WYSIWYG-Tools und ich möchte auch nicht damit anfangen codes zu schreiben

Ich würde mich über fundierte Antworten freuen.
Vielen Dank

[anon36066145]

@Jens_1701

Ist es überhaupt noch möglich solche Buttons mit den genannten Funktionen (in HTML5 o.ä.) zu erstellen, die in allen Browsern funktionieren?

Nicht alles, beschäftige dich mit CSS (Cascading Style Sheets).

• Farbwechsel, wenn unberührt

Das wäre ein Fall für animierte Grafik. Mit einem Grafik-Programm (z.B. dem kostenlosen Gimp) kannst du mehrere Bilder als Ebenen übereinanderlegen, jeder Ebene eine Zeit zuordnen und das Ganze als *.gif speichern.

• Hoover-Effekte (Farbwechsel bei Mouseover, und Klick)

Denke dran, dass Mouseover bei Tablets und Smartphones nicht funktionieren kann. Ansonsten geht das mit CSS für Buttons sehr einfach:

<style>
button:hover {
    background-color: yellow;
}
</style>

• Sound bei Mouseover und anderer Sound bei Klick.

Habe ich bisher mit Javascript gemacht, ob das mit CSS geht, weiß ich nicht.

• Mit den Buttons andere Webseiten bzw. Unterseiten (URL’s) angesteuert.

Da brauchst du nichtmal CSS, das ist der HTML-Tag A:

<a href=unterseite.html"><button>zur Unterseite</button></a>
(füge zwischen = und u noch ein " ein, hier wird es zu „ geändert)

Gruß, Kurti

[Jens_1701]

Danke Kurti,

und wie sähe ein Button aus, der gleichzeitig mit CSS und Javascript erstellt wurde?
Du sagts ja, Mouseover mit CSS und Sound mit Javascript.
Hast du denn auch schon mal einen Button erstellt, der Animation, Mouseover und Sound hat?

Ich suche ja nach einem Tool - von mir auch Beispielscript, der genau so einen Button erstellt.

[anon36066145]

@Jens_1701

Hast du denn auch schon mal einen Button erstellt, der Animation, Mouseover und Sound hat?

Ersetze jeweils das führende Zeichen „ durch das Zeichen "

Du kannst jedem HTML-Tag einen title mitgeben, der erscheint bei Mouseover:

<button title=„nicht für Moralapostel“>zum FKK-Club</button>

Bei professionellen Seiten flackert eher nichts, bei Mouseover poppt ggf. eine Information auf und für Sound nutze ich den <audio> Tag von HTML5

<div style=„font-size:50%;text-align:left“>Instrumental (Master)</div>
<audio controls preload=„none“>
<source src="…/mp3/i_see_a_boat_on_the_river_instrumental.mp3" type=„audio/mpeg“>
</audio>

Gruß, Kurti

[Jens_1701]

Danke Dir, Kurti,

das funktioniert bestimmt, bekomme es aber nicht umgesetzt.
Weil ich da erst meine Bild und Sounddatei reinbasteln muss - was mir nicht gelungen ist.

Vielleicht machen wir es mal so:
Ich gebe dir hier mal drei Bilder , die du runterladen kannst.

Das erste Bild ist ein animiertes GIF

Das zweite Bild soll das Hooverbild sein:

Das dritte Bild ist das, welches bei Klick kommen soll

Die Bilder sind nur ein Beispiel und sie passen auch nicht wirklich zueinander - das sollte aber unerheblich sein.

Der Hooversound soll eine beliebige kurze *.wav Datei sein
Der Klicksound soll eine andere *.wav Datei sein.

Bei Klick natürlich eine beliebige URL.

Könntest du mir daraus einen Beispielbutton basteln, bei dem ich nur die Sounddateien austauschen müsste, damit es funktioniert?

Ich würde mich sehr freuen

Jens

[PrestonA]

Ich finde die Diskussion echt gut, macht bitte unbedingt weiter damit. Aber ich möchte @Jens_1701 einmal kurz an die aktuelle Jahreszahl erinnern. Blinki, Blitzi und automatische Sounds sind eher nicht mehr der aktuelle Designstil. Das ist übrigens der Grund, warum es für sowas keine WYSIWYG-Lösung gibt. Sowas braucht die breite Masse einfach nicht mehr.

Und - mit Verlaub - eine Seite, die ungefragt Töne abspielt mache ich unverzüglich zu.

Dennoch ist das eine prima Übung, um seinen Horizont in Sachen HTML, JS und CSS zu erweitern. Also bitte wirklich nicht aufhören mit Diskutieren. Aber bitte das Ergebnis auch nicht in den Produktivbetrieb nehmen.

[anon36066145]

@Jens_1701

Könntest du mir daraus einen Beispielbutton basteln, bei dem ich nur die Sounddateien austauschen müsste, damit es funktioniert?

Nein, wenn nur Sound getauscht wird, funktioniert der Bildwechsel noch nicht.

Hier der HTML-Code, ersetze jedes Zeichen „ durch "

<!DOCTYPE html>
<html lang=„de“>
<head>
<meta charset=„utf-8“>
</head>

<body>
<p>Bitte einmal auf diese Seite klicken, um das Abspielen des Sounds zu erlauben.</p>
<audio id=poop controls preload=„none“ style=„display:none“><!-- audio-tag unsichtbar machen -->
<source src=„poop.mp3“ type=„audio/mpeg“>
</audio>
<audio id=count controls preload=„none“ style=„display:none“><!-- audio-tag unsichtbar machen -->
<source src=„FinalCountdown.wav“ type=„audio/wav“>
</audio>
<!-- onmouseover: Bild wechseln, Sound abspielen -->
<!-- onclick: Bild wechseln, Sound abspielen -->
<!-- onmouseout: Bild wechseln, Sounds stoppen und auf Anfang -->
<img id=bild src=„2001.gif“
onmouseout=„this.src=‚2001.gif‘;document.getElementById(‚poop‘).pause();document.getElementById(‚poop‘).currentTime=0;document.getElementById(‚count‘).pause();document.getElementById(‚count‘).currentTime=0“
onclick=„this.src=‚2019_or.GIF‘;document.getElementById(‚count‘).play()“
onmouseover=„this.src=‚2013_be.GIF‘;document.getElementById(‚poop‘).play()“
/>
</body>
</html>

Gruß, Kurti

[anon36066145]

Auch jedes Zeichen ‚ durch ’ ersetzen

[anon36066145]

Das hier ist überhaupt nicht für die Code-Anzeige geeignet, weil viele Zeichen vertauscht werden. Also als Bild, must es halt abtippen:

3 x versucht, 3 x Entschuldige, es gab einen Fehler beim Hochladen der Datei. Bitte versuche es noch einmal.

Ich gebe auf.

Gruß, Kurti

[Jens_1701]

Hallo Kurti,

OK, ich werde es mal so versuchen…
Du könntest es mir den Code auch per Mail schicken…das funktioniert vermutlich besser - zum Beispiel in einer ZIP-Datei
Du findest meine Email-Adresse auf meiner Homepage im Impressum
https://www.gtjlcars.de/

Da siehst du auch, warum ich solche Buttons gerne hätte

Vielen Dank bisher

Jens

[Jens_1701]

Lieber PrestonA,

danke auch für deine Antwort.
Eigentlich wollte ich bei meiner Anfrage schon drunterschreiben, dass ich nur meine Frage beantwortet, aber keine grundsätzlichen Diskussionen führen möchte - hab’s aber nicht gemacht - und schon bist du der erste, der den Grundsatz in Frage stellt

Ich weiß aber, was du meinst - trifft aber für meine Webseite nicht zu. Blitzi und Blinki ist dort essentiell, sonst ergibt meine Homepage keinen Sinn.
Meine Seite ist auch nicht für die breite Masse gedacht, sondern für Fans, die genau das, was ich biete, wollen - und zwar genau so! Der „aktuelle Designstil“ ist für meine Seite sowas von irrelevant, denn ich bilde einen bestimmten Stil nach - und darauf kommt es mir an. Der aktuelle Designstil ist eine Modeerscheinung und in ein paar Jahren wieder obsolet. Wie alles. Und nicht jeder muss alles fraglos mitmachen. Meine Seite behält den Stil, solange ich sie noch betreiben sollte.

Meine Homepage steht dieses Jahr seit fast 20 Jahren online und erfreut sich noch immer breiter Beliebtheit. Da es Flash nicht mehr gibt, musste ich tatsächlich alles wieder auf die herkömmliche Art machen - leider ist der Flair nun dadurch etwas raus. Das vermisse nicht nur ich, sondern auch meine Seitenbesucher.

Ich finde es schade, dass der gemeine Internet-User vermeintlich nur noch tote, stumme Seiten sehen will. Aber will er das, wer sagt das? Hat mich einer gefragt? Nö!
Das ist genauso, wie der Kunde abends um 22:00 gefälligst frische Brötchen haben will - wirklich?

Meine Homepage hat ohne Sounds echt was verloren. Die noch bis letztes Jahr laufende interaktive mit Sound und blink und blitz animierte Seite hatte genau das Feeling rübergebracht, das es sollte.

Mit HTML, JS, CSS usw. will und werde und möchte ich mich nicht befassen (nur, um ggf. etwas anzupassen), sonst verliere ich den Spaß an der Sache. Die letzten 20 Jahre bin ich mit guten WYSIWYG Tools klar gekommen. Wenns die nicht mehr geben sollte und ich somit meine Seite nicht mehr pflegen kann, seis drum.

Falls du dir meine Seite ansehen möchtest: https://www.gtjlcars.de

[KeinesHerrenKnecht]

@anon36066145

Das hier ist überhaupt nicht für die Code-Anzeige geeignet,

Du kannst Code-Beispiele in pre-Tags einschließen. dann sollte es (besser) gehen.

<pre>
Der Editor
    versteht nämlich einige HTML-Tags
      <strike>strike</strike>
         und HTML-Entities
              &amp; → &
              &lt; → <
              &xi; → ξ
              etc.
</pre>

[anon36066145]

@Jens_1701

Ich finde es schade, dass der gemeine Internet-User vermeintlich nur noch tote, stumme Seiten sehen will.

Das sind Sonntagsreden der Unwissenden. Aber die Stereo-Anlage ohne User-Aktion plötzlich losbrüllen zu lassen, womöglich noch nachts um zwei, ist wie eine Backpfeife.

Deshalb ist es richtig, dass zumindest der Firefox-Browser den Sound erst nach vorherigem Klick startet, der Button ist also trotz programmiertem mouseover vorher stumm.

@Jens_1701

Du könntest es mir den Code auch per Mail schicken … Die letzten 20 Jahre bin ich mit guten WYSIWYG Tools klar gekommen.

Und die Mitleser? WYSIWYG = What You See Is What You Get. Wieso kannst du damit Sound einbinden? Das wäre dann ja WYSIWYH = What You Sing Is What You Hear.

@KeinesHerrenKnecht

Du kannst Code-Beispiele in pre-Tags einschließen.

Sieht so aus, dass das funktioniert. Lediglich das Zeichen < muss als &lt; eingegeben werden. Wie kann ich Farbe in den Text bringen, um Zeichen hervorzuheben?

Neuer Versuch:

Habe auf CSS verzichtet, da ich nicht weiß, ob man damit Sound ein- und ausschalten kann.

Du kannst einen Audio-Tag einrichten und src="" ändern. Ich habe zwei genommen.

Der Lautsprecher brüllt los, wenn der Button geklickt wird. Deshalb habe ich - unverlangt - noch den Sound abgeschaltet beim Zurückziehen des Mauszeigers. Man kann mit Javascript auch die Lautstärke (.volume = 0.2) einstellen, vorwärts/rückwärts springen (.currentTime = 2.0) sec. Aber das mögest du dir selbst erarbeiten, um es zu verstehen.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
</head>

<body>
  <p>Bitte einmal auf diese Seite klicken, um das Abspielen des Sounds zu erlauben.</p>
  <audio id=poop controls preload="none" style="display:none"><!-- audio-tag unsichtbar machen -->
    <source src="poop.mp3" type="audio/mpeg">
  </audio>
  <audio id=count controls preload="none" style="display:none"><!-- audio-tag unsichtbar machen -->
    <source src="FinalCountdown.wav" type="audio/wav">
  </audio>
  <!-- onmouseover: Bild wechseln, Sound abspielen -->
  <!-- onclick:     Bild wechseln, Sound abspielen -->
  <!-- onmouseout:  Bild wechseln, Sounds stoppen und auf Anfang -->
  <img id=bild src="2001.gif"
  onmouseout="this.src='2001.gif';document.getElementById('poop').pause();document.getElementById('poop').currentTime=0;document.getElementById('count').pause();document.getElementById('count').currentTime=0"
  onclick="this.src='2019_or.GIF';document.getElementById('count').play()"
  onmouseover="this.src='2013_be.GIF';document.getElementById('poop').play()"
  />
</body>
</html>

Melde dich doch mal, wenn du die neuen Tricks auf deiner Seite eingebaut hast.

Gruß, Kurti

[Jens_1701]

… vielen Dank, nochmal. Kann es zwar gerade nicht ausprobieren, weil ich an diesem Wochenende anderweitig beschäftigt bin . Ich probiere es aber auf jeden Fall aus und melde mich natürlich dann.

@anon36066145

WYSIWYH = What You Sing Is What You Hear.

Das fand ich übrigens köstlich

[PrestonA]

@Jens_1701

Blitzi und Blinki ist dort essentiell, sonst ergibt meine Homepage keinen Sinn.

ja, cool. Hab ich jetzt auch gesehen. Aber sowas kann man auch vorher sagen. LCARS - wie geil ist das denn? Undbedingt weiter machen, das ist nicht das, was ich meine.

Ich hatte sowas befürchtet: https://envato.com/blog/90s-web-design-trends/

[Jens_1701]

LCARS - wie geil ist das denn?

Ah, ein Kenner

Dann weißt du, warum ich sowas brauche.

das ist nicht das, was ich meine.Ich hatte sowas befürchtet:

Ich hatte es mir schon gedacht. Solche fiesen Seiten kenne ich auch.

Jetzt muss ich mal sehen, dass ich das umsetze, was Kurti mir vorgeschlagen hat.

Jens_ - jetzt weißt du warum - 1701

[Jens_1701]

Hallo Kurti,

jaaa…das funktioniert perfekt!
Habe alles so angepasst, dass es funktionierte.

Warum funktioniert es, wenn ich erst irgendwo auf die Seite klicke - wo ist denn der Befehl dazu?

Als nächstes versuche ich, es in die Praxis - also in die aktive Seite einzubauen.
Wenn ich das bei jedem Button machen muss, wird es etwas dauern
Es wird aber das Look and Feel wieder etwas zurückbringen.
Ich muss meine Seitenbesucher nur dazu bringen irgendwohin zu klicken.
Aber das passiert vielleicht auch schon von selbst.

Aber vielen Dank, das funktioniert Ich freue mich

Jens_1701

[Jens_1701]

Jetzt müsste ich nur noch ein einfaches Tool haben, in dem ich die drei Buttons und die beiden Sounds sowei den Ziellink eintragen oder per Drag and Drop reinziehen könnte und das Script erstellt sich für jeden Button automatisch

Hach, das wär herrlich

[anon36066145]

@Jens_1701

Warum funktioniert es, wenn ich erst irgendwo auf die Seite klicke - wo ist denn der Befehl dazu?

Der Browser verlangt es.

Du kannst einen Klick irgendwo auf die Seite auch selber abfragen:

<!DOCTYPE html>
<html lang="de" onclick="alert('geklickt!')">

Kurti

[littlepinguin]

hi,

@Jens_1701

Jetzt müsste ich nur noch ein einfaches Tool haben

Excel.

Zerpflücke einfach das Script so oft, wie du irgendwas ersetzen musst und am Ende baust du es dann wieder zusammen, nur eben mit deinen Dateien schon drin.

kurzes Beispiel: A23=A16&B16&A17&B16&A18&B17&A19&B18&A20

Das Prinzip sollte klar sein. Mit etwas Glück kannst du die Bilder und Links sogar noch weiter automatisieren - etwa bei gleichartigen Dateinamen.

grüße
lipi