Bitte um Hilfe, trotz Nichterfüllung der Rahmenbedingungen :(

  • Hallo liebes Forum,

    demütig bitte ich hier um Hilfe, da ich wirklich nichts von HTML-Programmierung und allem was dazu gehört verstehe.

    Ich bin rein auf dem foto/grafischen Sektor gestalterisch tätig.

    Ich habe das folgend geschilderte Problem natürlich auch schon versucht selbstständig zu recherchieren, allerdings nur mit mäßigem Erfolg bzw. mußte ich feststellen, daß sich vermeintlich passende Lösungen doch nicht so einfach adaptieren lassen.
    Wenn die Grundmaterie schon eine böhmische Großstadt darstellt, ist die Fehlersuche ohne jeglichen Plan nahezu sinnlos.


    Im Grunde genommen geht es um eine wahrscheinlich wirklich simple Sache, welche hier den Meisten wohl nur ein müdes Lächeln entlocken wird.


    Für die Einkaufswelt von Shopware (die Startseite eines Onlineshops) hätte ich gerne die Kategoriebilder so animiert,

    daß bei Eintritt der Maus, BILD_A auf BILD_B wechselt und man mit einem Klick auf BILD_B

    via Verlinkung auf die entsprechende Seite des Shops gelangt.

    Bei Austritt der Maus aus BILD_B (ohne Klickereignis) soll natürlich wieder BILD_A erscheinen.


    Zu meiner Ehrenrettung:

    Ich habe natürlich zuerst versucht diese Aufgabenstellung selbstständig anzugehen, allein schon aus Neugier, Interesse und Ehrgeiz! Allerdings weiß ich auch meine Grenzen zu erkennen....

    Ich hatte das in Adobe Animate CC über eine Schaltfläche mit 2 Zustandsbildern + dem Link (vermeintlich) gelöst.
    Leider hat das ganze nur im Veröffentlichungs-Test funktioniert.

    Nachdem ich es hoffnungsvoll hochgeladen habe, funktionierte aber leider der Bildwechsel zurück nicht mehr, sprich bei Mausaustritt.

    Ich habe mich also wirklich um ein funktionierendes Ergebnis bemüht!!!

    Ich habe dann leicht frustriert und verzweifelt mit Dreamweaver weiterexperementiert.

    Wie man den Code für einen simplen Bildwechsel erstellt habe ich mit Hilfe des WWWs bereits umsetzen können, ob das so optimal ist, weiß ich natürlich nicht....es funktioniert halt.

    Wie man nun aber BILD_B zu einem weiterführenden Link macht, konnte ich leider nicht mehr nachvollziehbar recherchieren!


    Hier der HTML Code bei dem zumindest augenscheinlich der Bildwechsel so funktioniert, wie ich mir das wünsche.

    Wenn mir jemand Licht ans Fahrrad machen könnte und bei meinem Problem mit dem Link helfen würde, wäre ich überglücklich!!!
    Hier also mein rudimentärer Code....so far! Die beiden Bilder, mit denen ich arbeite, habe ich ebenfalls angehängt.


    Da ich im Angestelltenverhältnis bin und das für die Firma realisieren will, werde ich langsam nervös und bekomme bald Probleme den ergebnislosen Zeitaufwand zu rechtfertigen.

    Ich lerne immer gerne dazu, allerdings wird es jetzt gerade etwas eng ein so umfangreiches Thema von der Pike auf zu erlernen und das ist auch der Grund warum ich hier um Unterstützung bitte!


    Besten Dank an Jeden der mir helfen mag!


    Beste Grüße


    Jonas

    Dateien

  • Hallo Jonas74,


    würde Dir das weiterhelfen?


    Gruß,

    Felix

  • Hallo und Danke für eure schnellen Reaktionen.


    @ m.scatello

    Das stimmt...eigentlich geht mit shopware so ziehmlich nichts ohne sich die entsprechenden Plugins dazu zukaufen.

    Wir haben hier ein Plugin um animierte Banner in der Einkaufswelt nutzen zu können.

    Mit meinem Adobe Animate-Versuch habe ich den Wechsel von BILD_A (dem weichgezeichnetem Graustufenbild) zu BILD_B (dem scharfen, Farbbild) inklusive eines funktionierenden Links in die entsprechende Kategorie hinbekommen. Das hat shopware auch so wie gewollt ausgeführt.

    Lediglich dass das BILD_B bei Austritt des Mauscursors auch wieder auf BILD_A zurückspringt wurde nicht übernommen, was den Effekt natürlich sinnlos macht.


    Meinen HTML-Code für den Bildwechsel hat die shopware dann aber korrekt ausgeführt. Leider weiß ich hier halt nicht, wie ich den Link beim Mausklick auf BILD_B richtig einbinde.


    @Failix

    1000 Dank schon mal vorab!

    Ich habe deinen Code kopiert und eingefügt, aber noch ein paar Probleme, Fehler damit u/o Fragen ;)

    Wenn ich das richtig interpretiere, wird hier nur noch mit dem farbigen Bild (BILD_B) gearbeitet und dieses durch Parameteränderungen entfärbt und weichgezeichnet. ...ist das korrekt?

    Leider scheint (bei mir?) noch irgendein kleiner Fehler drinzustecken, da mir das Bild nicht angezeigt wird.

    Ich habe dann aber (nach Aufforderung von DW) noch den Alternativtext für Bilder ergänzt und konnte somit am Text den Effekt sehen, den Du programmiert hast.

    Eine coole Sache, nur genau umgekehrt müßte er sein. Also beim Besuch der Shopseite sollen alle Bilder grau und unscharf sein und erst bei einem Mouseover soll das Kategoriebild klar und farbig werden.

    Wenn sich dann noch, auf einen Mausklick hin, die verlinkte Seite im selben Fenster öffnen würde wäre das ein Traum ;)

    Ich habe das trotz des nicht dargestellten Bildes testweise schon einmal hochgeladen. Der Link wird ausgeführt, öffnet die Seite aber momentan noch innerhalb des Kategoriebildes....vielleicht hast Du da ja noch einen Rat damit sich das ganzseitig öffnet.

    Jetzt hast Du mich neugierig gemacht und die Hoffnung geweckt, dass das vielleicht doch noch klappt!


    Beste Grüße


    Jonas

  • Jonas74


    Du hast ein paar Fehler von mir bemerkt. ;)


    1. Das alt-Attribut hatte ich echt vergessen, ist Pflicht, ja.


    2. Der Pfad zum Bild war noch aus meiner Anwendung, habe ihn nun mit [Hier Deinen Pfad einsetzen] überschrieben.



    Den Effekt habe ich umgekehrt - Standard ist das graue Bild, beim Mouseover wird das Bild farbig. Wird natürlich für Benutzer von Touchscreens nicht so der optische Hammer, finde ich. Hab' deswegen mal noch die Pseudoklasse "active" eingefügt, damit das Bild wenigstens beim Antippen bunt wird.


    Das Linkziel öffnet sich in einem neuen Tab oder Fenster? Dann scheint das eine Einstellung in Shopware zu sein, denn der o. g. Link verursacht das nicht. Hab aber für alle Fälle mal target="_self" in den Link eingefügt.


    Und zu "Der Link wird ausgeführt, öffnet die Seite aber momentan noch innerhalb des Kategoriebildes ..." habe ich leider überhaupt keine Idee, kann mir das nicht mal richtig vorstellen. Das Bild verschwindet und innerhalb seiner Dimensionen wird die Zielseite angezeigt, also wie in einem Frame?


    Gruß,

    Felix


    Nachtrag: Nimm mal lieber <div> vorm und </div> hinterm Link weg, vielleicht verursacht das den Fehler - es gehört nicht zum Link.

  • @ Failix
    sorry daß ich heute erst antworte, aber ich mußte mich gestern um ein paar andere Baustellen kümmern.

    Vorab nochmal 1000 Dank für deinen Support!!

    Der letze Code funktioniert reibungslos und auch so wie ursprünglich angedacht.

    Der Kniff, mit den auf das Klarbild angewendeten Parameteränderungen, finde ich sehr interessant.
    ...dann ist mir aber aufgefallen, daß sich die Änderungen natürlich auch auf den Rahmen mit der Schrift und dem Schlagschatten auswirken,

    was ich aus gestalterischen Gründen nicht so schön finde. Somit bin ich wieder zu meinem ursprünglichen Ansatz zurückgekehrt, den Hover-Effekt mit den 2 Bildern zu realisieren und das 2.Bild dann irgendwie mit dem Kategorie-Link zu versehen. Ich wollte Dich allerdings nicht nerven, bevor ich es nicht selber probiert habe.

    Gesagt...getan...aus 2 mach 1....und tadaa...und ich glaube, ich habe es nun geschafft!

    Ich hänge den Code hier nochmal an. Vielleicht könntest Du ihn dennoch mal auf etwaige (Form(at)Fehler) checken.

    Das wäre cool ;)


    Beste Grüße


    Jonas


  • Jonas74 Prima, dass jetzt alles funktioniert, der Code ist auch in Ordnung.


    Natürlich wäre es einfacher, den CSS-Filter zu verwenden, aber der nimmt natürlich keine Rücksicht auf Schrift im Bild - da müsste man den Text separat als HTML-Code einsetzen. Aber vielleicht kannst Du diese Funktion mal irgendwo anders verwenden.


    Gruß
    Felix